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.