Making List Item Images Clickable
I recently redesigned my website and used a List Section on the Plugins page. When testing, I found myself continuously clicking images and realising they don’t clickthrough to anywhere. And here's the kicker - if I'm doing that, you can bet your bottom dollar that my users are too!
It turns out, we humans are a predictable bunch. Users, are clicking on these images, dreaming of magical journeys to new digital lands. But instead of adventure, they're met with the bitter taste of disappointment and a slightly sore index finger. And let's be honest, nobody likes a disappointed user. They tend to leave bad reviews and say mean things about your choice of fonts.
JavaScript to the Rescue!
Don't worry, though – we've got a fix for this. With just a few lines of code, we can turn those static images into clickable gateways of wonder.
First you’ll need to create a List Section, add a few items and ensure you’ve added the links to the Buttons. This code works with the Grid Layout.
<!-- Make List Item Images Clickable -->
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.list-item').forEach(function(item) {
const button = item.querySelector('.list-item-content__button');
const image = item.querySelector('.list-image');
if (button && image) {
const link = button.getAttribute('href');
if (link) {
const anchor = document.createElement('a');
anchor.href = link;
image.parentNode.insertBefore(anchor, image);
anchor.appendChild(image);
}
}
});
});
</script>
How This Code Works
Let's break down this code like we're explaining a magic trick to a room full of skeptical rabbits who are surprisingly interested in web development:
1 - DOM Ready:
We start by listening for the 'DOMContentLoaded' event. This ensures our code runs only after the page structure is fully loaded and ready to be manipulated. It's like waiting for your toast to pop up – you could try to butter it early, but you'll just make a mess.
2 - Find List Items:
We use querySelectorAll('.list-item') to locate all elements with the 'list-item' class. This gives us an array-like object of all our list items. It's like playing "Where's Waldo?", but instead of a guy in a striped shirt, we're looking for divs. Thrilling, I know.
3 - Iterate and Locate:
For each list item, we search for two key elements:
The button (
.list-item-content__button)The image (
.list-image) It's like a tiny scavenger hunt where the prize is... more code to write. Yay?
4 - Extract the Link:
If both the button and image are found (congrats, detective!), we grab the 'href' attribute from the button. This is where our image will link to. It's like pickpocketing, but legal and with less running away afterward.
5 - Create New Anchor:
We create a new <a> element using document.createElement('a'). This will be our clickable wrapper for the image. It's like giving birth to a baby HTML element, but with significantly less screaming and no need for diapers.
6 - Set the Href:
We set our new anchor's 'href' attribute to match the button's link. It's like giving our new anchor the same destination as the button. Think of it as copying your friend's homework, but the teacher (browser) actually approves.
7 - DOM Manipulation:
Here's where it gets interesting – we perform a bit of DOM gymnastics:
We insert the new anchor just before the image in the DOM structure using
insertBefore(). It's like cutting in line, but polite.Then, we move the image inside this new anchor using
appendChild(). It's like giving the image a nice, clickable jacket.
It's a bit like performing a gentle juggling act with our DOM elements, but the result is a nicely wrapped, clickable image.