[Gelöst] Adding URL's to images in a gallery

[Author]

Artikel

[mauricioT-2]

Tell us what you are trying to do?
I'd would like to add url's to the images in static gallery. I have tried to add a URL on the caption but it messes up with the layout. I can't seem to find a solution. I'm a beginner in website creation so I don't know if this can easily be solved, but so far I haven't managed to find a solution.

Is there any documentation that you are following?
I haven't found anything in the toolset support website.

Is there a similar example that we can see?

What is the link to your site?
versteckter Link

Thanks in advance for your help !

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

The Gallery block doesn't support the option to link images to another URL. If you'll check the "Lightbox" option in the "Gallery Settings" it will show the same image in a lightbox.

I've passed on this feedback to the concerned team and for now, a workaround can be to use some custom script in a "Custom HTML" block.
( please make sure that the "Lightbox" option is turned on )

For example:

<script>
jQuery(document).ready(function(){
	jQuery('ul.tb-gallery--collage li.tb-gallery__cell figure a').removeAttr('data-lightbox');

	jQuery('ul.tb-gallery--collage li.tb-gallery__cell figure figcaption').each(function() {
		var captionTXT = jQuery(this).text();
		if (captionTXT == 'Caption 1') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 1');
		}
		if (captionTXT == 'Caption 2') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 2');
		}
		if (captionTXT == 'Caption 3') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 3');
		}
		if (captionTXT == 'Caption 4') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 4');
		}
		if (captionTXT == 'Caption 5') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 5');
		}
		if (captionTXT == 'Caption 6') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 6');
		}
		if (captionTXT == 'Caption 7') {
			jQuery(this).parent().find('a').attr('href', 'link for Caption 7');
		}
	});
});
</script>

You'll replace text like "Caption 1", "Caption 2" etc with the actual caption text added in the images and "link for Caption 1", "link for Caption 2" etc with the URL that you'd like that image to link to.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[mauricioT-2]

Hello Waqar,

Thanks for the answer. I'm still trying to implement the solution and I guess it will take me some time to understand how to. It is nice you offered a contractor though the goal of the website development is not only creating it but also learning through the process.
Either case, I'm glad the development team may look into offering this solution in a near future.

Finally, do you have any other links to help me understand somewhat better how to do the proposed workaround ?

Regards,
Mauricio T.

[Waqar]

Thanks for writing back.

If you're interested in learning how jQuery script works, I'll highly recommend this tutorial:
versteckter Link

Please feel free to test out the steps that I've shared on your gallery page and in case it doesn't work, you're welcome to share temporary admin login details in reply to this message. This will help in troubleshooting what's missing.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[mauricioT-2]

My issue is resolved now. Thank you!