targeting squarespace images with custom CSS and HTML

Hello,

I am trying to combine squarespace images with custom javascript and CSS. Specifically I am trying to have a certain picture display when the corresponding tab is "active" or clicked" the tabs portion of the section is custom built but the images need to be through squarespace and can not be custom built out. I need the first image to be set to display: block and the second and third images to be default to display: hidden to start and change to an "active" class in the css when their tab is clicked. I am having a lot of trouble targeting the images through the squarespace made CSS as I was not the one who wrote the custom code. I will provide screenshots of all relevant information. I am not sure if i can provide a link because the site is not live and its a copy. I only have the address with the name.squarespace/jejejkd-1. Is that safe to put up publicly? Sorry for new questions.

1 hour ago, Patrick123 said:

Hello,

I am trying to combine squarespace images with custom javascript and CSS. Specifically I am trying to have a certain picture display when the corresponding tab is "active" or clicked" the tabs portion of the section is custom built but the images need to be through squarespace and can not be custom built out. I need the first image to be set to display: block and the second and third images to be default to display: hidden to start and change to an "active" class in the css when their tab is clicked. I am having a lot of trouble targeting the images through the squarespace made CSS as I was not the one who wrote the custom code. I will provide screenshots of all relevant information. I am not sure if i can provide a link because the site is not live and its a copy. I only have the address with the name.squarespace/jejejkd-1. Is that safe to put up publicly? Sorry for new questions.

 

 

 

 

 

 

Use this extension to target the images

https://chrome.google.com/webstore/detail/igjamfnifnkmecjidfbdipieoaeghcff

so in your code, instead using document.getElementsByClassName("sqs-block-image"), we can use

document.querySelector("image-block-id");

so I would do the same thing the other person did with the tabs but use querySelector("image-block-id)?Also you mean literally put that within the parenthesis right? That helps to be able to target the correct thing at least. 

2 minutes ago, Patrick123 said:

so I would do the same thing the other person did with the tabs but use querySelector("image-block-id)?Also you mean literally put that within the parenthesis right? That helps to be able to target the correct thing at least. 

 

Assume the extension get you the id:#block-yui_3_17_2_1_1620931628669_10882

then it will be

document.querySelector("#block-yui_3_17_2_1_1620931628669_10882")

ok, I got that. If I am trying to target something with CSS and like this, how would i find what classes to use for the images?  I know I can use the data-section-id to target the section then use classes to specifically target an img, but there are so many.

section[data-section-id="60a510a9343ab0590654b05e"].page-section {
    padding-right: 0 !important;
  }

6 minutes ago, Patrick123 said:

ok, I got that. If I am trying to target something with CSS and like this, how would i find what classes to use for the images?  I know I can use the data-section-id to target the section then use classes to specifically target an img, but there are so many.

 

 

section[data-section-id="60a510a9343ab0590654b05e"].page-section {
    padding-right: 0 !important;
  }

Use the id for css selector as well

so something like this? this didnt select the picture i do not think

section[data-section-id="60a3da130d5d245c20f19406"] #block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

On 5/25/2021 at 10:41 AM, Patrick123 said:

so something like this? this didnt select the picture i do not think

 

 

section[data-section-id="60a3da130d5d245c20f19406"] #block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

something like this

#block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

use this code to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 5/26/2021 at 2:03 AM, tuanphan said:

something like this

#block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

use this code to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hate to resurrect an old thread, but I had difficulty targeting SquareSpace images as well. With that code that is posted here it only targets a div - not the actual image itself. I wanted to create an inset feathering/box-shadow effect for one image, but it looks pretty wonky when applied to the containing div instead of the image itself.

Also, I tried targeting the div's child, hoping to apply the effect to the image itself. But still no luck. For example:

#block-yui_3_17_2_1_1621883144215_12316 > * {
      // code here
 }

#block-yui_3_17_2_1_1621883144215_12316:first-child {
      // code here
 }

#block-yui_3_17_2_1_1621883144215_12316:nth-child(1) {
      // code here
 }

It's possible that it's a background image issue. In which case it'd be great to know how to target a background image and apply box-shadow or drop-shadow. I'll think about this more, but if anyone has any idea how SquareSpace images are loaded into the divs and how they can be targeted, I'd appreciate it. Thanks!