Jump to content

Possible to target individual gallery image in Squarespace?

Recommended Posts

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

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

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.

image.png.1d07322cc713d9c27772fc52eec309a5.png

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

 

 

Dave Hart. Software/Technology Consultant living in London

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.