Ability to add links to individual Carousel images. [SOLVED]

This has already been wished for in other threads like this and this, but I want to formalize it today.

Yes, we all know we can add a text caption below the image and apply links to the text, but we also all know that web visitors need prodding to do the right thing a lot of the time. Having a link on each slide in the Carousel AND a link in the caption text pretty much ensures someone will figure out how to click it.

Please empower Blocs users with the ability to add links to individual Carousel images.

Thanks.

Just add a button bric into the empty content area in the carousel. You can then style the button how you like and add its interaction. You can also create a text link by adding a text Bric to the content area, selecting the text and click on the link icon.

I thought Iā€™d continue this conversation since given the last response, hope thatā€™s not breaking any rules.

Definite noob here, but I did figure out that carousel images donā€™t support links directly, and had decided to use a button or a text linkā€¦ and then found this thread. hendon52 says: ā€œJust add a button bric ā€¦ you can then style the button how you like and add its interaction.ā€ (my emphasis).

I canā€™t see how to style the buttonā€¦ is that a question of overriding the CSS, or is there something else in Blocs that I havenā€™t found yet?

No support ā€œin Blocsā€ or no support ā€œon any Carousel imageā€?

A text or button link is a bandaid that doesnā€™t fix the problem, which is why I didnā€™t reply back in June 2019. Letā€™s face itā€¦ Most people click on the image because that stands out, and when nothing happens they may or may not click that much smaller and therefore less noticeable text link or button. Making a big fat button may help, but I would prefer to have the button AND a link on the image too. The more links you put on things, the higher chance there is to garner a click.

So again, I really want that magic hack that allows links to be placed on individual Carousel images.

Hey guys,

There is a way to do this, when I get back to the office later today, I will do a short video showing you how.

13 Likes

Do I see a new project @PeteSharp: ā€œBlocsBuilderā€???

2 Likes

Brilliant. And what a pleasure to get my first question answered so comprehensively. :clap:

2 Likes

Pete, absolutely brilliant! Please accept my sincere and humble thanks for such a beautiful solution!

I am unable to edit my opening post for some reason, so if you could add ā€œ[SOLVED]ā€ to the title of this thread, it would be much appreciated!

1 Like

Good explanation to a question that has been on some many Blocs builderā€™s minds

1 Like

To close out this thread, I would just like to add that I needed to delete ā€œparticlesā€ from my carousel pages because that code, for reasons unknown to me, prevented the links from working. Specificallyā€¦

Header Code:

<style>
#particles-js canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px!important;
	top: 0px!important;
	left: 0px!important;
	right: 0px!important;
	bottom: 0px!important;
    z-index: 4;
}
#abovepart1,#abovepart2, #abovepart3 {
    z-index: 50!important;
}
</style>

Footer Code:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS("particles-js", {"particles":{"number":{"value":6,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"polygon","stroke":{"width":0,"color":"#000"},"polygon":{"nb_sides":6},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.06,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":140,"random":true,"anim":{"enable":true,"speed":10,"size_min":40,"sync":false}},"line_linked":{"enable":false,"distance":200,"color":"#ffffff","opacity":1,"width":2},"move":{"enable":true,"speed":8,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":false});
</script>

I fiddled with both Z-indexes in the particles ā€œscript,ā€ changing it to everything from 0 to 9999, but that didnā€™t work. Deleting both code segments solved the problem. Oh well. I want the links more than the eye candy.

Did you have that on a slide or in the background of the bloc??

Pete, Iā€™ve not uploaded my changes yet. You can still see the particles floating ā€œaboveā€ the content on this page. It wouldnā€™t work having them display behind the content.

Something to do with the way you have styled the carousel I think.

The Onclick works, but its only working on the text above the button.

1 Like

Hello @PeteSharp. I want to use ā€œOnclickā€ to redirect to a 3rd party website. So far all good. But now I want to open this website in a new window. I added to the value "target=ā€˜_blankā€™ (location.href=ā€˜https://mywebsite.comā€™, target=ā€˜_blankā€™) but no luck. Am I trying to do something which is not possible?

Hey @Jerry,

I actually was going to release another video with this exact thing.

Its slightly different code


onlick="window.open("https://myurl.com/page")"

So under the value you just writeā€¦

window.open("https://myurl.com/page")
2 Likes

Thanks, @PeteSharp. Simply awesome. Thank you for your usual support! :raised_hands:

1 Like

@PeteSharp, It needed a little tweak to make it work. The value should be:

window.open(ā€˜https://www.myurl.comā€™)

1 Like

Whoops, good spotting.

It needed the ā€œwwwā€ as well. Not sure why thoughā€¦

I would say that could be host dependant. I didnā€™t use www. in a test I just did and it worked fine. Although its probably a better practise to write the absolute URL.