Question 31012 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Using an attribute value to add custom links for each images in my wordpres gallery – WordPress

I’m using Elementor Pro for my photography website and i want to set custom links for each image in the gallery. By default, i can only set a global link which is the same for each image so that’s not great.

In fact, i want to set a custom link which will redirect the user to the shop page of the specific image.

I found some code online (thanks to elementhow !) and it’s really close to what i want, but i still need to change some things. The thing is a have to manually write all the links in an array and it’s not convenient (close to 100 files and growing, if i change the order, i have to reorder the links, etc).

Here’s the code i currently use :

<style>.e-gallery-item{cursor: pointer;} </style>

<script>
document.addEventListener('DOMContentLoaded', function () {

var filteredImages = document.querySelectorAll('.e-gallery-item');

//Edit the links HERE
var links = [
'https://www.mywebsiteurl.com/product/product-name1/',
'https://www.mywebsiteurl.com/product/product-name2/',
'https://www.mywebsiteurl.com/product/product-name3/',
'https://www.mywebsiteurl.com/product/product-name4/',
];

var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
};

for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}

});

</script>

I would like to use an attribute value in the algorithm to generate the link automatically for each image. I have the process in my mind, but i don’t know how to code this…

Here’s the code of one image ,i can set what value i want in "alt".

<div class="e-gallery-image elementor-gallery-item__image e-gallery-image-loaded" data-thumbnail="......" data-width="1024" data-height="768" alt="product-name";"></div>

I would like to use the "alt" attribute to create a unique url for each file, with this format :

‘https://www……com/product/product-name/’

"product-name’ will take the value of the "alt" attribute of each image.

I tried to change this part of the code (replace "links[i]" by trying to get the attribute value using filteredImages[i].getAttributes) but without success…

    var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
};

Can someone give me some tips about how to do that ? I spend 2 years without coding so i’m a bit rusty…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In fact it was really simple. I tried to target a parent element and it worked ! If anyone is interested, here's the code i use :

    document.addEventListener('DOMContentLoaded', function () {
    var filteredImages = document.querySelectorAll('YOUR_SELECTOR');
    var _loope = function _loope(i) {
        filteredImages[i].addEventListener('click', function() {
            location = "YOUR_WEBSITE_URL" + filteredImages[i].querySelector("YOUR_SELECTOR").getAttribute("alt");
        });
    };

    for (var i = 0; i < filteredImages.length; i++) {
        _loope(i);
    }
});


  2. 0

    I think this does what you’d like it to, as you have already done you can cycle through each image link using a class.

    You can get the value of alt using the .attr() function and then replace the href value of the link.

    DEMO

    // Cycle through each image using common class
$(".e-gallery-image").each( function() {

  // Get value of 'alt' for clicked item
  alt = $(this).attr("alt");

  // Update href value
  $(this).attr("href", "https://www.mywebsiteurl.com/product/" + alt );
  
});


// Prove that its worked
$(".e-gallery-image").click( function() {

  // Confirm all is correct
  console.log($(this).attr("href"));
  
  // Assign url to window
  location.href = $(this).attr("href");

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="e-gallery-image" href="test.com" alt="product1">Product 1</div>
<div class="e-gallery-image" href="test.com"  alt="product2">Product 2</div>
<div class="e-gallery-image" href="test.com"  alt="product3">Product 3</div>
<div class="e-gallery-image" href="test.com"  alt="product4">Product 4</div>
<div class="e-gallery-image" href="test.com"  alt="product5">Product 5</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search