Jump to content

Make images in a simple list auto layout clickable on ONE PAGE only.

Go to solution Solved by Beyondspace,

Recommended Posts

  • Replies 11
  • Views 447
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
57 minutes ago, rodabaugh said:

Hello, I am looking to make the images on this page have links (the same links that is in the button) I don't want this to effect the rest of the site, only this page. Any suggestions? 

https://www.chasecontemporary.com/artists

 

We can have a trick to set the link cover each item (include image + description)

section[data-section-id="63efb9a9a138382a67465a16"] .list-item-content__button:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

section[data-section-id="63efb9a9a138382a67465a16"] .user-items-list-simple .list-item-content__button-container {
  position: static;
}

section[data-section-id="63efb9a9a138382a67465a16"] .list-item {
  overflow: hidden;
  position: relative;
}

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

You can use the following code to set the section on the home page

section[data-section-id="63ecc4af824c3b64145aed3e"] .list-item-content__button:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

section[data-section-id="63ecc4af824c3b64145aed3e"] .user-items-list-simple .list-item-content__button-container {
  position: static;
}

section[data-section-id="63ecc4af824c3b64145aed3e"] .list-item {
  overflow: hidden;
  position: relative;
}

If you need to set on other sections, you can use the following extension to get the right section id

Squarespace ID Finder

Get the right id with this extension: https://recordit.co/Aj9vXw6rfY

Support me by pressing 👍  if this is useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, rodabaugh said:

@Beyondspaceis it possible to do this same thing on this page, but remove the button? Right now, if it remove the button, the images are no longer clickable. thank you!!!

You can keep the button and use the following to add this effect on this section

section[data-section-id="63efb9a9a138382a67465a16"] .list-item-content__button:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

section[data-section-id="63efb9a9a138382a67465a16"] .user-items-list-simple .list-item-content__button-container {
  position: static;
  opacity: 0; /*hide the button on gallery*/
}

section[data-section-id="63efb9a9a138382a67465a16"] .list-item {
  overflow: hidden;
  position: relative;
}

Support me by pressing 👍 if this is useful for you

Edited by Beyondspace
fix

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Opp, it's my bad. I have just updated the code, kindly try it again

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.