Jump to content

Make images in Auto Layout list clickable?

Recommended Posts

Site URL: https://supernatlparks.com

I am building my first 7.1 site, and I used an Auto Layout list to organize content on my home page.

Mostly, I like how this works: It seems like will make editing the page easier, and make it easier to keep the layout working between desktop and mobile, while using cards.

However, I have realized that the images in an Auto Layout card aren't clickable, only the button. That's a pretty big problem for an e-commerce site. I want people to be able to get to the products as easily as possible.

Does anyone have a solution for linking each image to a URL? (The same as the button would be nice, but manual is no problem.) I don't mind using CSS and/or scripts to accomplish this.

Screen Shot 2021-10-04 at 8.24.44 PM.png

Edited by Struckhoff
Mistake in URL
Link to comment
3 hours ago, Struckhoff said:

Site URL: https://supernatlparks.com

I am building my first 7.1 site, and I used an Auto Layout list to organize content on my home page.

Mostly, I like how this works: It seems like will make editing the page easier, and make it easier to keep the layout working between desktop and mobile, while using cards.

However, I have realized that the images in an Auto Layout card aren't clickable, only the button. That's a pretty big problem for an e-commerce site. I want people to be able to get to the products as easily as possible.

Does anyone have a solution for linking each image to a URL? (The same as the button would be nice, but manual is no problem.) I don't mind using CSS and/or scripts to accomplish this.

Screen Shot 2021-10-04 at 8.24.44 PM.png

This pure css trick will make the button cover the whole card

.user-items-list-simple .list-item {
  position: relative;
}
.user-items-list-simple .list-item-content__button-container {
    position: static;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

This could work as a last resort, but I have text links on some of the cards that I want to continue to work. 

(I imagine this applies to all cards with buttons in the scope of the custom CSS, so either the page or the site.)

Is there any way to apply a link to a specific image?

Link to comment
On 10/5/2021 at 10:47 PM, Struckhoff said:

This could work as a last resort, but I have text links on some of the cards that I want to continue to work. 

(I imagine this applies to all cards with buttons in the scope of the custom CSS, so either the page or the site.)

Is there any way to apply a link to a specific image?

Have you found the solution yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 10/5/2021 at 10:47 PM, Struckhoff said:

This could work as a last resort, but I have text links on some of the cards that I want to continue to work. 

(I imagine this applies to all cards with buttons in the scope of the custom CSS, so either the page or the site.)

Is there any way to apply a link to a specific image?

I dont understand? the link for each image is the button on each card?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
On 10/26/2021 at 11:37 PM, bangank36 said:

I dont understand? the link for each image is the button on each card?

The cards include an image, but also text links that go to different URLs.

Like the main button and image should go to one product, and a text link goes to a related web page that I mention.

Link to comment
  • 4 weeks later...
On 10/5/2021 at 4:59 AM, bangank36 said:

This pure css trick will make the button cover the whole card

.user-items-list-simple .list-item {
  position: relative;
}
.user-items-list-simple .list-item-content__button-container {
    position: static;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Hey @bangank36 I'm trying this but it's not working because I already have some styling on my auto layouts to shape the buttons (it works when I remove that styling). Could you take a look to see if I can there's anyway I can implement this?
I'd like to put the link on the image only and hide the button ideally.

Site and page: https://dev-sioux-city-public-museum.squarespace.com/visit-sioux-city-museum

login: scpm

 

Link to comment

Have the same question as well, @tuanphan. Also looking to make the image and title clickable with the same clickthrough as the button URL.

 

Edit: I was able to figure it out by removing the specific selectors in the CSS code that @bangank36 shared. The working code is:

.list-item-content__button-container {
    position: static !important;
}
.list-item-content__button:after {
  content: '';
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Edited by caitie1
Was able to fix
Link to comment
1 hour ago, caitie1 said:

Have the same question as well, @tuanphan. Also looking to make the image and title clickable with the same clickthrough as the button URL.

 

Edit: I was able to figure it out by removing the specific selectors in the CSS code that @bangank36 shared. The working code is:

.list-item-content__button-container {
    position: static !important;
}
.list-item-content__button:after {
  content: '';
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The code works properly on your site, doesn't it?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 12/5/2021 at 7:13 AM, noenquiries said:

Hi, I'm trying to achieve this effect too. But the neither of the code blocks are working @bangank36

Do you have any advice? The site details are below, the list is on the 'work' page:

www.awkwardsoul.com.au
p/w: password

Thanks in advance!

Try

section[data-section-id="6162950d489d822ab8841871"] {
	.list-item-content__button {
		position: static !important;
		transform: unset !important;
		&:hover {
			background: #cb9d6c !important;
			color: #fff !important;
		}
	}
	.list-item-content__button-container {
		overflow: visible !important;
		position: static !important;
		transform: unset !important;
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 hours ago, junger said:

Hello @tuanphan .  I am using this method and it works for desktop but not for mobile.  The pointer shows up like the link is gonna work but it refreshes the page.  Any ideas?  Thanks.

 

https://dinosaur-dragonfly-zhnc.squarespace.com/

pw: lars

 

 

Try 

@media only screen and (max-width: 767px) {
	section[data-section-id="61b12d85cf48ba2642611629"] {
		.list-item-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
		.list-item {
			position: relative;
			&:hover {
				.list-item-content {
					opacity: 1;
				}
			}
		}
	}
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 12/11/2021 at 9:25 PM, bangank36 said:

Try

section[data-section-id="6162950d489d822ab8841871"] {
	.list-item-content__button {
		position: static !important;
		transform: unset !important;
		&:hover {
			background: #cb9d6c !important;
			color: #fff !important;
		}
	}
	.list-item-content__button-container {
		overflow: visible !important;
		position: static !important;
		transform: unset !important;
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Hi @bangank36

It didn't work at first, but after I remove the site's loading animation effects it did. Thanks for your help with the code!

Do you have any advice for achieving the same effect without having to turn off the animation? It's currently off on the site, but was set to 'flex'

Thanks again!

Link to comment
On 12/11/2021 at 10:44 AM, junger said:

Hello @tuanphan .  I am using this method and it works for desktop but not for mobile.  The pointer shows up like the link is gonna work but it refreshes the page.  Any ideas?  Thanks.

 

https://dinosaur-dragonfly-zhnc.squarespace.com/

pw: lars

 

 

It looks like you solveld?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
15 hours ago, DLok4 said:

I am also looking for a solution to this. Do you have found one?

I check that it 's fine at the moment. Have you figured it out?

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 10/26/2021 at 11:17 PM, Vncent said:

Hi @tuanphan, I'd like to know the answer to this as well. I'd like to have a list section where each individual image is clickable and will link to a different URL. Is this possible?

@tuanphanI'd also like the answer to this question. I don't want to display buttons in my list section, just an image with a title, and have the image and title be linked to a url. 

Link to comment
On 3/9/2022 at 11:38 PM, Guerolito said:

Hi! Is there any way to add a hover effect to the list image? Could it also the text to be underlined at the same time? 

I would love to achieve the effect on this site when you hover the images 

https://www.dica.es/es/proyectos

Can you share link to page where you use list layout? We can tweak code easier

On 3/10/2022 at 6:19 AM, SFSW said:

@tuanphanI'd also like the answer to this question. I don't want to display buttons in my list section, just an image with a title, and have the image and title be linked to a url. 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

https://caribou-tunny-2kwe.squarespace.com/work

I´ve achieved to code the hover effect. But the 0,5 transition only work in the entry. The out transition does not work with the 0,5 timing... Any solution?

 

My css code is: 

.gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  /* You can replace the color here with a different color */

  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.gallery-caption-content {
  /* You can change the color of your image caption here */
  color: #000000;
  /* You can change the color of your image caption here */
  font-family: "seasonsR"!important;
  font-size: 20px !important;
  font-weight: 400;
}

.gallery-caption-masonry-simple {
  transition-delay: 0ms;
}

.gallery-caption {
  pointer-events: none;
}

.gallery-masonry-item {
  position: relative;
}

.gallery-masonry-item:hover .gallery-caption {
  opacity: 1;
  
}

.gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  
  
}




.gallery-masonry-item {
  background-color: #f1f1ef;}

.gallery-masonry-item:hover {
  background-color: #f1f1ef;

-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.gallery-masonry-item-wrapper:hover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: #f1f1ef;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

 

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.