Add custom URLs to individual images in Elementor gallery widget

David Denedo

David Denedo

Published on .

Table of Content

Introduction

This tutorial will show you how to add custom URLs to individual images in an Elementor gallery without needing extra plugins. It is compatible with both the Basic Gallery widget and the Pro Gallery widget, making it applicable for users of all levels. With this simple guide, you’ll be able to easily add custom URLs to your Elementor galleries in no time!

By default, Elementor only allows you to open the individual images in a lightbox or link all images to a single custom URL. But with this tutorial, you can add links to individual images in the gallery.

You can find a working example with both types of Elementor Galleries here:

Add your gallery widget into a section/container

The first step is to include your gallery widget and include the necessary images on the page. You can set a custom aspect ratio to your gallery images by following this tutorial. You can use either the Basic Gallery Widget or the Pro Gallery Widget.

Basic gallery widget

Add a class name to your gallery element

Edit your gallery widget, navigate to Advanced > Layout > CSS Classes and add your preferred class name. In this example, we’d be using "dd-gallery--links".

add css class name to the gallery widget

Set Link to Custom URL

Edit the Gallery widget under Content > Link, set it to Custom URL for the Pro Gallery widget or Media File for the Basic Gallery widget.

Edit basic gallery link settings
Change link settings for the Basic Gallery
Edit pro gallery link settings
Change links settings for the Pro Gallery

Add an HTML element to the page

We’ll use a custom JS snippet, so you can add an HTML widget to your page or use your preferred code snippets plugin.

html widget

Add custom JS Snippet

Add this code to the HTML element. Replace the links with yours.

    <script>
        let ddGalleryLinks = (className, imgLinks) => {
            const galleryImages = document.querySelectorAll(className + " a");
            // Code to add links to gallery images
            for (let i = 0; i < imgLinks.length; i++) {
                if (imgLinks[i] !== "") {
                    galleryImages[i].href = imgLinks[i];
                    // Open link in new window
                    /* galleryImages[i].target = "_blank"; */
                }
            }
        };

        document.addEventListener("DOMContentLoaded", function () {
            ddGalleryLinks(
                ".dd-gallery--links",
                [
                    "https://daveden.co.uk/tutorials/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/",
                    "https://daveden.co.uk/tutorials/add-a-tooltip-to-elementor-pricing-widget-for-free/",
                    "https://daveden.co.uk/tutorials/elementor-horizontal-accordion-without-any-add-ons/",
                    "https://websquadron.co.uk",
                ]);
        });
    </script>

Note: The links work sequentially for each image in the gallery widget from left to right, top to bottom. If you want to skip any image in the sequence, simply add a blank "".

Multiple Gallery Widgets

If you have multiple gallery widgets on your page, then you simply need to add a new class name e.g. dd-gallery2--links to your other gallery widget. Then, in your html widget, call the function ddGalleryLinks() again and pass in the new classname and links. As shown below

 <script>
let ddGalleryLinks = (className, imgLinks, linkTitles) => {
    const galleryImages = document.querySelectorAll(className + " a");

    // Code to add links to gallery images
    for (let i = 0; i < imgLinks.length; i++) {
        if (imgLinks[i] !== "") {
            galleryImages[i].href = imgLinks[i];

            // Open link in new window
            // galleryImages[i].target = "_blank";

            // Additional loop to add aria-label to links for accessibility
            if (linkTitles[i] !== "") {
                galleryImages[i].setAttribute("aria-label", linkTitles[i]);
            } else {
                // Consider handling the case where linkTitles[i] is an empty string
                console.error("Link label is empty for image " + i);
            }
        }
    }
};

document.addEventListener("DOMContentLoaded", function () {
    // First Gallery Widget
    ddGalleryLinks(
        ".dd-gallery--links",
        [
            "https://daveden.co.uk/tutorials/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/",
            "https://youtu.be/j0yZ5oYh4Ss?si=wpwYoI0_QBEQu3tY",
            "https://youtu.be/gIaCz3OdZkI?si=Ujhvf884MthNtEEx",
            "https://websquadron.co.uk",
        ],
        [
            "Learn how to apply custom aspect ratio to Elementor gallery widgets",
            "Learn how to create inverted border radius",
            "Learn how to create a two-column layout with one column boxed and one column extending to the edge of the screen",
            "Web Squadron Website"
        ]
    );

    // Second Gallery Widget
    ddGalleryLinks(
        ".dd-gallery2--links",
        [
            "https://youtu.be/6mwBj6Zpyyk?si=_mcz0dGx6kYMZ7cX",
            "https://youtu.be/3pfPYhgmAZU?si=KQOXSj-HX19n0ZfM",
            "https://youtu.be/J1k05Fa6Ag0?si=sVTUtgpINB-tcuSS",
            "https://daveden.co.uk",
        ],
        [
            "Watch how to add Custom URLs to Gallery Images on YouTube",
            "Watch how to remove focus outlines from Popup Menus with accessibility in mind on YouTube",
            "Watch how to add a tooltip to an Elementor Pricing widget",
            "Open Daveden's Official Website"
        ]
    );
});

</script>

Note: The links work sequentially for each image in the gallery widget from left to right, top to bottom. If you want to skip any image in the sequence, simply add a blank "".

12 comments

  • Hi, for some reason links are not working on my page :(

  • Hi, for some reason is not working on my page :(

  • Thanks so much for this. How do I get the link to open in a new tab?

    • To open the links in a new tab, check within the code, and uncomment the portion which has galleryImages[i].target = "_blank"; by removing the starting

      /*

      and ending

      */
  • Hi Maxime
    I have done exactly what you have laid down. I am using Elementor Pro 3.18.2 and the code does not seem to work.
    I have tried it on Mac Chrome and Mac Safari.

    The code I have used is this:

    document.addEventListener(‘DOMContentLoaded’, function () {

    let linkedImages = document.querySelectorAll(‘.e-gallery-item’);

    let links = [
    ‘https://www.pawsandbebes.com/the-anderson-kulik-family/’,
    ‘https://www.pawsandbebes.com/the-bell-family/’,
    ‘https://www.pawsandbebes.com/the-darson-family/'”,
    ‘https://www.pawsandbebes.com/the-eckanoye-lomax-family/’,
    ‘https://www.pawsandbebes.com/the-namaani-family/’,
    ‘https://www.pawsandbebes.com/the-wilson-family/’,
    ];

    linkedImages.forEach((linkedImage, i) => {
    if (links[i] && links[i].length > 0) {
    linkedImage.style.cursor = “pointer”;
    linkedImage.href = links[i];
    }
    });

    });

    I would be most grateful if you could please assist.

    • Jay Savoor

      Hey David .. goofed up here.
      I have also tried Maxime’s code, and both of yours’ do not work.
      Followed all instructions to a tee .. i suspect that Elementor had screwed things up.

  • this script is not working for multi galleries, i am trying but on same page 2 galleries i am using separately and i can not repeat it.
    let ddGalleryLinks = (className, imgLinks) => {
    const galleryImages = document.querySelectorAll(className + ” a”);
    // Code to add links to gallery images
    for (let i = 0; i < imgLinks.length; i++) {
    if (imgLinks[i] !== "") {
    galleryImages[i].href = imgLinks[i];
    // Open link in new window
    /* galleryImages[i].target = "_blank"; */
    }
    }
    };

    document.addEventListener("DOMContentLoaded", function () {
    ddGalleryLinks(
    ".gallery1",
    [
    "https://daveden.co.uk/tutorials/apply-custom-aspect-ratio-to-the-elementor-gallery-widget/&quot;,
    "https://daveden.co.uk/tutorials/add-a-tooltip-to-elementor-pricing-widget-for-free/&quot;,
    "https://daveden.co.uk/tutorials/elementor-horizontal-accordion-without-any-add-ons/&quot;
    ]);
    ddGalleryLinks(
    ".gallery2",
    [
    "http://google.com&quot;,
    "http://fb.com&quot;,
    "http://x.com&quot;
    ]);
    });

    • Hi Zubair,

      Are you attempting to add links to two different gallery widgets on a single page, or are you referring to the Multiple Type in the Pro Gallery Widget, which includes a filter bar?

  • Hello, thank you for your script. It works on desktop, even when using chrome devtool’s responsive mode, but sadly it doesn’t work on mobile. Is there any way to fix this?

    • That’s weird. It worked well when I tested it on a few mobile phones – Samsung Note 20 Ultra and iPhone XS.
      Can you share the url to your page? If you like, you can send it directly to [email protected]

Leave your comment