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

Wish List
1

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.

2

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.

49
Screenshot 2019-05-31 at 18.46.49.png1754Ă—590 40.4 KB

3

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?

4

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.

5

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
6

Do I see a new project @PeteSharp: “BlocsBuilder”???

2 Likes
7

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

2 Likes
8

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
9

Good explanation to a question that has been on some many Blocs builder’s minds

1 Like
11

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.

12

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

13

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.

14

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
16

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
19

Whoops, good spotting.

21

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.

22

oh yes! excellent!!!

23

Hi!! Blocs 5 user here..this post was back in 2019..now that we are using Blocs 5 it seemed that your solution doesn’t work…I mean, I tried to do exactly as you explained but no luck…any updates or it should work as you said even using blocs 5?

Thanks!!

24

@PeteSharp BTW I am trying in Preview mode…not yet on server

25

Should look like…

Screenshot 2023-03-07 at 9.51.28 PM

And if you preview in a Browser and not in Blocs you will find it works.

The version of Blocs you’re using has no bearing on it working or not.