[Share] List Simple Image clickable

You can follow these quick steps to make List Simple (People section) image clickable.

If it doesn't work, you can send link to page where you use List, I will check again.

#A. Use link in Item Description

We will add link to item description, then turn this link to image.

#1. First, add a Link in List item description

We will have

#2. Find ID of List Simple Section

In my example, it is:

section[data-section-id="673db68dc3687009034aeeb9"]

#3. Use this code to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    function wrapImageWithLink() {
        const listItems = $('section[data-section-id="673db68dc3687009034aeeb9"] .list-item');
        listItems.each(function() {
            const img = $(this).find('.list-item-media img');
            const link = $(this).find('.list-item-content a');
            if (img.length && link.length) {
                const newLink = $('<a>').attr('href', link.attr('href'));
                img.before(newLink);
                newLink.append(img);
            }
        });
    }
    wrapImageWithLink();
});
</script>

#4. To hide Link in List item description, you can use this CSS code under

<style>
section[data-section-id="673db68dc3687009034aeeb9"] p:has(a) {
    display: none;
}
</style>

#B. Use Button Link

We will turn item button link to image.

#1. You can enable Item button

then add link to item button

#2. Find ID of List Simple Section

In my example, it is:

section[data-section-id="673db68dc3687009034aeeb9"]

#3. Use this code to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    function wrapImageWithLink() {
        const listItems = $('section[data-section-id="673db68dc3687009034aeeb9"] .list-item');
        listItems.each(function() {
            const img = $(this).find('.list-item-media img');
            const link = $(this).find('.list-item-content__button-wrapper a');
            if (img.length && link.length) {
                const newLink = $('<a>').attr('href', link.attr('href'));
                img.before(newLink);
                newLink.append(img);
            }
        });
    }
    wrapImageWithLink();
});
</script>

#4. To hide buttons, you can add this code under

<style>
section[data-section-id="673db68dc3687009034aeeb9"] .list-item-content__button-wrapper {
    display: none;
}
</style>

#C. Use CSS code

Similar #B, but here we will use CSS code in Personal Plan (Personal doesn’t support Code Injection)

#1. You can enable Item button

then add link to item button

 #2. Find ID of List Simple Section

In my example, it is:

section[data-section-id="673db68dc3687009034aeeb9"]

#3. Use this code to Custom CSS box

section[data-section-id="673db68dc3687009034aeeb9"] {
  li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.list-item-content__button-container a {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}