Gallery Block Elements
COMPONENT SELECTOR GUIDE
“Slideshow” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-gallery | The outer gallery block container. This selector will select all gallery blocks, no matter which layout is selected. |
|
| .sqs-gallery-block-slideshow | The inner gallery block container that only selects "Slideshow" gallery blocks. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-design-stacked-slide | The individual slides that contain the image elements in the slideshow. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-design-stacked-slide.sqs-active-slide | The individual slide that is actively being shown in the slideshow container. |
|
| .sqs-gallery-block-slideshow a[href] | If the images have click through URLs, this is the parent anchor element if the image. |
|
| .sqs-gallery-block-slideshow .thumb-image | The gallery slide image elements. |
|
| .sqs-gallery-block-slideshow .meta-inside | The parent container for the metadata, including the image title and description. |
|
| .sqs-gallery-block-slideshow .meta-title | The image title text. |
|
| .sqs-gallery-block-slideshow .meta-description | The image description container. |
|
| .sqs-gallery-block-slideshow .meta-description p | The image description text. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-controls | The container for the slideshow gallery left and right arrows. This element is not visible - it is just the container for the controls. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-controls .previous, .sqs-gallery-block-slideshow .sqs-gallery-controls .previous:before | The "Previous" slide arrow and it's respective ":before" pseudo-element which is used to add the icon imagery. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-controls .next, .sqs-gallery-block-slideshow .sqs-gallery-controls .next:before | The "Next" slide arrow and it's respective ":before" pseudo-element which is used to add the icon imagery. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-thumbnails | The container for the thumbnail images below the slideshow container. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-design-strip-slide | The individual thumbnail images. |
|
| .sqs-gallery-block-slideshow .sqs-gallery-design-strip-slide.sqs-active-slide | The active thumbnail image. |
|
HTML Structure Explanation
The HTML structure of the “Slideshow” gallery block, including it’s descendant elements.
The HTML structure of the “Slideshow” gallery block, including it’s descendant elements.
“Carousel” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-gallery | The outer gallery block container. This selector will select all gallery blocks, no matter which layout is selected. |
|
| .sqs-gallery-block-slider | The inner gallery block container that only selects "Carousel" gallery blocks. |
|
| .sqs-gallery-block-slider .sqs-wrapper | The parent container for the carousel slides. |
|
| .sqs-gallery-block-slider .sqs-gallery-design-strip-slide | The individual carousel slides; This will either be a link element that contains the image if there is a click-through link on the image, or an image elementif it doesn't have a link. |
|
| .sqs-gallery-block-slider .sqs-gallery-design-strip-slide.sqs-active-slide | The individual slide that is actively being shown in the carousel container. |
|
| .sqs-gallery-block-slider .sqs-gallery-controls | The container for the slideshow gallery left and right arrows. This element is not visible - it just holds the left and right arrows. |
|
| .sqs-gallery-block-slider .previous, .sqs-gallery-block-slider .previous:before | The "Previous" slide arrow and it's respective ":before" pseudo-element which is used to add the icon imagery. |
|
| .sqs-gallery-block-slider .next, .sqs-gallery-block-slider .next:before | The "Next" slide arrow and it's respective ":before" pseudo-element which is used to add the icon imagery. |
|
HTML Structure Explanation
The HTML structure of the “Carousel” gallery block, including it’s descendant elements.
The HTML structure of the “Carousel” gallery block, including it’s descendant elements.
“Grid” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-gallery | The outer gallery block container. This selector will select all gallery blocks, no matter which layout is selected. |
|
| .sqs-gallery-block-grid | The inner gallery block container that only selects "Grid" gallery blocks. |
|
| .sqs-gallery-block-grid .sqs-gallery-design-grid-slide | The individual grid item image containers |
|
| .sqs-gallery-block-grid .margin-wrapper | The wrapper that adds padding to the grid items. |
|
| .sqs-gallery-block-grid .image-slide-anchor | The anchor link that surrounds each image. |
|
| .sqs-gallery-block-grid .thumb-image | The grid item image elements. |
|
| .sqs-gallery-block-grid .image-slide-title | The image title text. |
|
HTML Structure Explanation
The HTML structure of the “Grid” gallery block, including it’s descendant elements.
The HTML structure of the “Grid” gallery block, including it’s descendant elements.
“Stacked” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .sqs-block-gallery | The outer gallery block container. This selector will select all gallery blocks, no matter which layout is selected. |
|
| .sqs-gallery-block-stacked | The inner gallery block container that only selects "Stacked" gallery blocks. |
|
| .sqs-gallery-block-stacked .image-wrapper | The container for the image element and the anchor link (if it has a link). |
|
| .sqs-gallery-block-stacked a[href] | If the gallery image has a click-through link, this element is a wrapper for the image element described below. |
|
| .sqs-gallery-block-stacked .thumb-image | The image element. |
|
| .sqs-gallery-block-stacked .meta | The image title and description container. |
|
| .sqs-gallery-block-stacked .meta-inside | The inner metadata wrapper. |
|
| .sqs-gallery-block-stacked .meta-title | The image title text. |
|
| .sqs-gallery-block-stacked .meta-description p | The image description text. |
|
HTML Structure Explanation
The HTML structure of the “Stacked” gallery block, including it’s descendant elements.
The HTML structure of the “Stacked” gallery block, including it’s descendant elements.
Unique Gallery Blocks
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #block-yui_3_17_2_1_1690691237911_5006 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Gallery Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
The Gallery block element with a class name of “sqs-block” and an id attribute.