Text over Gallery

As title says, I am trying to add text over gallery because it does not provide me the option to. Simply, there is no add block option once the gallery is added onto a section. Does anyone know a bypass for this?

@JusChow There are a few types of galleries available (e.g., Masonary, Simple & Strips). Could you kindly specify which type you are using? Also, is your website built on Squarespace 7.0 or 7.1? Your clarification will help us assist you more effectively.

Hey Lesum yes I can!

I think its slideshow (full screen) website built on 7.1.

I would really like to keep the layout of having slideshow on full screen simply with text over since there is no other way I see to get the look I want.

@JusChow  After accessing the edit mode and navigate to Add Section > Images > Select a Gallery. Once the gallery has been added, proceed to Edit Section. Within this interface, you will find a gallery type that allows text to be displayed over the gallery images. Please refer to the attached screenshot. Also we can modify styling of the text with custom code.

I am confused, did you use code to input that text in the image gallery slideshow?

I swear I cant find this gallery image section that allows text.

@JusChow Didn't use any code. Just added a caption text on the gallery image. Maybe you're using a different gallery than the one I mentioned. 

Iv'e tried adding every image section possible with a gallery and didn't find one.

OHHH nvm caption text. So I'm guessing no option for text block?

Ok I see the option to turn on captions but I don't see where the caption box is so I can type whatever I want into a caption.

@JusChow Select Gallery and and image on the galley. Then you can see an option Description where you can add text. 

Is there anyway I can add just normal stationary text blocks over my slideshow? I simple just want a message either to the side or middle of the slideshow that's not a caption. 

Caption is a text block displaying as an overlay on the gallery image. Also you've the capability to add caption text on Squarespace editor. We can also modify the styling of the caption texts with a few lines of code.

If you're not using a caption, then custom text will have to be added for each image with custom code. You won't be able to modify the text without modifying the code. It would require a large snippet of code. 

Is there any way to move the caption, remove the box the caption creates below the picture, and change the font and size?

You mentioned text blocks for Gallery Sections and as you've probably discovered SS doesn't support this natively.

You've also probably discovered that the description you can add to each image has no formatting capabilities natively.

As @Lesum mentions you can do simple formatting with CSS. If you need complex text formatting such as can be found in the rich text editor for text blocks, it's no go natively.

With the business plan or above and some custom code it is possible to use text blocks in conjunction with gallery section images.

Please see Gallery Section Text Block Overlay.

The configuration is not easy. You are basically using a gallery section and a following blank section with text blocks you add. Then you get the block ids of the text blocks and put them in for the description of the images in the gallery section. The code then does the magic of pairing them up and displaying the text blocks in an overlay like manner.

The format of the overlay is as minimal as I could make it. If one needs more complex styling you are certainly welcome to create CSS to manipulate what I provide even further.

Just a note SS did not design these elements to go together so unexpected things might happen. In my testing the effect seemed to work pretty well. I linked to a demo so folks can get a feel for the effect.

Let me know how it goes.

On 8/27/2023 at 10:31 PM, Lesum said:

@JusChow Everything you mentioned can be done with custom CSS. 

To remove the box, you can try the code below:

.gallery-caption {
	background-color: transparent !important;
}

To change the font, you can try the code below. Change "Your font name" in the code to the font name you're going to use.

.gallery-caption-content {
	font-family: "You font name" !important; 
}

To change font size, you can try the code below.  

.gallery-caption-content {
	font-size: 2rem !important;
}

Is there a way to move the caption box in the middle, to make it transparent like this website (https://anabezi.squarespace.com/) , while removing the caption box that goes default below the slideshow?

.gallery-caption-fullscreen-slideshow {
    top: 50% !important;
}

@JusChow You can use this code snippet to place the caption in the middle of the gallery image.

To change size/font of the caption text, you can use this code:

.gallery-caption-content {
	color: #FFFFFF 1important;
	font-size: 2rem !important
	text-transform: uppercase !important;
}

11 minutes ago, Lesum said:

To change size/font of the caption text, you can use this code:

.gallery-caption-content {
	color: #FFFFFF 1important;
	font-size: 2rem !important
	text-transform: uppercase !important;
}

Putting it in the middle works!!!

Thank you so much.

However when adding change of size/font of caption text code, it moves it back down to the caption box area below the slideshow.

Also Do I change font size by changing the (2)?

Also is there any way in which I can completely remove the blank caption box below the slideshow after I have moved the text from the caption to the middle?

@JusChow 

Sorry, there was a syntax error in the last block of code. 😅 It's been a long day. Here's the correct version:

.gallery-caption-content {
	color: #FFFFFF !important;
	font-size: 2rem !important;
	text-transform: uppercase !important;
}

You can change the "2" to increase/decrease the font-size.

4 minutes ago, Lesum said:

@JusChow 

Sorry, there was a syntax error in the last block of code. 😅 It's been a long day. Here's the correct version:

.gallery-caption-content {
	color: #FFFFFF !important;
	font-size: 2rem !important
	text-transform: uppercase !important;
}

You can change the "2" to increase/decrease the font-size.

Looks like this didnt work as well.

It stayed on bottom and this time removed my header.

I edited the code. Try again. 

To remove space at the bottom:

.gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 0px !important;
}

WORKSSSSS! Thankyou so much

Just bought you a coffee!