Add custom URLs to individual images in Elementor gallery widget

Introduction

This tutorial shows you how to add your own links to individual images in an Elementor gallery. You won’t need any extra plugins! This works with both the Basic and Pro Gallery widgets. This simple guide lets you quickly add custom URLs to your Elementor galleries!

By default, Elementor only lets you do two things with gallery images:

• Open each image in a lightbox, or
• Link all gallery images to the same website.

This tutorial teaches you how to link each image to a different website.

See working examples of both Elementor gallery types.

Instructions

Add your gallery widget

Add a gallery widget (Basic or Pro) to your page and upload the desired images. You can add a custom aspect ratio to your gallery images for a consistent look.

Set a class name to your gallery widget

• Open the gallery widget settings and navigate to Advanced > Layout > CSS Classes.
• Add a unique class name (like “dd-gallery--links“).

Set Link to Custom URL

• In the gallery widget settings, go to Content > Link.
• Set this to “Custom URL” for the Pro gallery widget or “Media File” for the Basic gallery widget.

Add an HTML element

Include an HTML widget on your page or use a code snippets plugin. Paste the following code into the HTML element, replacing the placeholder links with your own:

<script>
    let ddGalleryLinks = (className, imgLinks) => {
        // Create a combined selector
        const selector1 = className + " a.e-gallery-item";
        const selector2 = className + " .gallery-item a";

        // Use querySelectorAll with the combined selector
        const galleryImages = document.querySelectorAll(`${selector1}, ${selector2}`);

        // Code to add links to gallery images (unchanged)
        for (let i = 0; i < imgLinks.length; i++) {
            if (imgLinks[i] !== "") {
                galleryImages[i].href = imgLinks[i];
                // Open link in new window (uncomment if needed)
                /* 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>

Bonus: Multiple Gallery Widgets

If you have multiple galleries, follow these steps:

• Assign a unique class name to each additional gallery (e.g. dd-gallery2--links).
• Repeat the ddGalleryLinks() function, passing in the new class names and their corresponding link arrays.

Example Code

 <script>
    let ddGalleryLinks = (className, imgLinks) => {
        // Create a combined selector
        const selector1 = className + " a.e-gallery-item";
        const selector2 = className + " .gallery-item a";

        // Use querySelectorAll with the combined selector
        const galleryImages = document.querySelectorAll(`${selector1}, ${selector2}`);

        // Code to add links to gallery images (unchanged)
        for (let i = 0; i < imgLinks.length; i++) {
            if (imgLinks[i] !== "") {
                galleryImages[i].href = imgLinks[i];
                // Open link in new window (uncomment if needed)
                /* galleryImages[i].target = "_blank"; */
            }
        }
    };

    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",
            ]
        );

        // 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",
            ]
        );
    });

</script>