Possible to target individual gallery image in Squarespace?

Is it possible to customize one individual image in a gallery with CSS in Squarespace 7.1?

It seems that individual gallery images do not have ID’s like the overall gallery does.

Any insight would be awesome!

16 hours ago, Kennedy said:

Is it possible to customize one individual image in a gallery with CSS in Squarespace 7.1?

 

It seems that individual gallery images do not have ID’s like the overall gallery does.

Any insight would be awesome!

I think we can set style for  individual image in a gallery with some selector Css :https://www.w3schools.com/cssref/sel_nth-child.asp

Kindly share your site with protected password if you need any help

The general structure is that inside a gallery object, you get specific wrappers depending on the grid type (e.g. masonry, basic etc), that eventually finds a "figure" with a link (if you've got the lightbox enabled), and inside that the image.

so you could use an nth-child selector (e.g. pick me the 5th picture in the gallery) but you'd have to remember that if the order of the pictures in the gallery changed then it would select a different picture.

for example, this would put a border around the second child in every gallery. prefix it with the relevant data section if you just want it on one page (or inject it into that specific page)

.gallery figure:nth-child(2) img {
	border:solid 1px red !important; 
}

If you wanted to be more specific you could also use an attribute selector based on the itemId (which you can see in the URL if you use a lightbox, or you can find in the source), or some other image source attribute if you're not using a lightbox.

// for a lightbox-enabled you can target the link
// $= means ends with. you can find the itemId in the url when you open the image
// in the lightbox
.gallery a[href$='eh93bxzp9wth135k95a1y8qkpopbv7'] img {
	border:solid 1px red !important;
}

// non-lightbox version, you can find the image by searching 
// its attributes for the filename (you could do this for lightbox ones too
// but the itemId is easier to find!). you can use data-src, or src or data-image
.gallery img[data-src$='20140301_Trade-151_0124-copy.jpg'] {
	border:solid 1px red !important; 
}

hope that helps