Kennedy Posted December 3, 2021 Share Posted December 3, 2021 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! Link to comment
Beyondspace Posted December 4, 2021 Share Posted December 4, 2021 (edited) 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 December 4, 2021 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, Lightbox Studio pluginIf 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
iamdavehart Posted December 4, 2021 Share Posted December 4, 2021 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 rodvaldr 1 Dave Hart. Software/Technology Consultant living in London Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment