Make images in Auto Layout list clickable?

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.

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.

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%;
}

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?

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?

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?

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?

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.

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

20 hours ago, kellyhutsbydesigns said:

 

You want to make image clickable, same url as button?

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%;
}

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?

@caitie1 is this code also applicable if the list items are displayed as a simple grid without the card layout? Or is this dependent on having the card layout? I'm trying to have my images and text be clickable in a list layout but without making them into cards, any help would be awesome 🙏🏼

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!

On 11/30/2021 at 8:40 AM, tuanphan said:

You want to make image clickable, same url as button?

@tuanphan Yes! After a looong time I got it to work! Thank you

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

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

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

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!

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?

On 10/27/2021 at 5:17 AM, 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?

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

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?

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

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. 

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. 

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;
}