Adding Links to List Section Images

16 hours ago, creedon said:

I have updated my code.

Hi @creedon it is all working now on the live page! I'm so happy 😃 thank you for your help! This is super! 

thanks for this code! Is there a way to make the links open in a new window? I tried altering with ChatGPT but it didn't work. 

Hi there, Is there way to have a link on the image or title for each list item that takes you to another page on the site and then the button link which links to different page/site?

Thanks, Sarah

5 hours ago, wellnessnewzealand said:

Hi there, Is there way to have a link on the image or title for each list item that takes you to another page on the site and then the button link which links to different page/site?

Thanks, Sarah

You can share link to page where you use List, I can take a look

Thanks

https://iris-bear-y5n2.squarespace.com/config/pages

On 3/27/2024 at 4:27 AM, wellnessnewzealand said:

Thanks

https://iris-bear-y5n2.squarespace.com/config/pages

Your site is private, I can't access it, you can follow this to share url

Is anybody having issues attaching links in list items in 7.1 today? I added a section from people, a carousel list and when I try to attach my link, by pressing the button "Attach Link"  the option disappears just to show me the button text. Am I missing something, I tested it in Chrome and Safari and it's happening in both...I've refreshed, logged in and out and it still won't work. 

32 minutes ago, Pip1 said:

Is anybody having issues attaching links in list items in 7.1 today?

See 

32 minutes ago, Pip1 said:

Is anybody having issues attaching links in list items in 7.1 today?

I just tried on my test site and it worked for me.

It was back working properly this morning, all is well, thanks for responding Creedon and Paul

On 11/28/2023 at 2:15 PM, zmcnees said:

thanks for this code! Is there a way to make the links open in a new window? I tried altering with ChatGPT but it didn't work. 

the solution from @fncreativeconsole is the only one that respects the Squarespace "open-in-new-window" settings.

<!--Make list items clickable-->
<script>
    // JavaScript code to link list-item-media to the closest button
    document.addEventListener("DOMContentLoaded", function() {
        var listItems = document.querySelectorAll('.list-item');

        listItems.forEach(function(listItem) {
            var media = listItem.querySelector('.list-item-media');
            var closestButton = listItem.querySelector('.list-item-content__button');

            if (media && closestButton) {
                media.addEventListener('click', function() {
                    closestButton.click(); // Trigger button click when list item media is clicked
                });
            }
        });
    });
</script>

@tuanphan I have used the code provided on this thread to hyperlink every list item. I am also using the following CSS to add a hover effect, however you can see that the border radius I applied to the image doesn't translate on hover?

https://www.oppidaneducation.kr/home (2nd section)

.user-items-list-simple .list-image {
  border-radius: 15px 15px 0px 0px !important;
}
  
    .list-item img {
       transform: scale(1); 
     transition: 500ms;
       overflow: hidden !important;
}
  
  .list-item:hover img {
       transform: scale(1.05); 
     transition: 500ms;
}

20 hours ago, benstevens05 said:

@tuanphan I have used the code provided on this thread to hyperlink every list item. I am also using the following CSS to add a hover effect, however you can see that the border radius I applied to the image doesn't translate on hover?

https://www.oppidaneducation.kr/home (2nd section)

 

.user-items-list-simple .list-image {
  border-radius: 15px 15px 0px 0px !important;
}
  
    .list-item img {
       transform: scale(1); 
     transition: 500ms;
       overflow: hidden !important;
}
  
  .list-item:hover img {
       transform: scale(1.05); 
     transition: 500ms;
}

 

Use this code under

.list-item-media-inner {
    overflow: hidden;
    border-radius: 15px 15px 0px 0px !important;
}