gallery Overlay Text for Gallery Images (SQSP 7.1)

Site URL: https://rootsandberries.squarespace.com

Hi there

I'm currently building a client website – https://rootsandberries.squarespace.com : password: berries – and I'm trying to create a slideshow gallery with overlaid copy. Something that was simple pre-SQSP7.

On the homepage, I need to get the slideshow looking like the static image that's currently sitting below it.

The text position, the font, being able to change the image opacity etc. All the features of the static image, but on the gallery...

Is there anyone out there with a solution that works for all screen sizes?? Calling @tuanphan

I've tried a few different Custom CSS solutions, but none work as I need, or for mobile view.

Thanks
Mat

You want text over slideshow?

Hi tuanphan

Yes that's right, text to appear over a slideshow, and not underneath it as captions.

Ideally looking like the text over the static image I have below the slideshow on the site.

13 hours ago, matblack said:

Hi tuanphan

Yes that's right, text to appear over a slideshow, and not underneath it as captions.

Ideally looking like the text over the static image I have below the slideshow on the site.

13 hours ago, matblack said:

Hi tuanphan

Yes that's right, text to appear over a slideshow, and not underneath it as captions.

Ideally looking like the text over the static image I have below the slideshow on the site.

Add to Design > Custom CSS

/* text over slideshow */
body.homepage figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

Amazing! That's worked for desktop, but the text is cut off for mobile.

I moved the position of the text using the top and left entries to get the text to sit top-left on the image.

Also, I need to get the text into the custom font I have on the site 'F37 BOBBY BOLD' at the h1 size (2.3rem)

I'm looking to get the text appearing over the gallery slideshow to be the same as the text overlaying the static image I have currently below the gallery slideshow (We are an award winning family of cafés in London’s beautiful green spaces.)

If that makes sense.

Same position (top-left), same font, same font size...

20 hours ago, matblack said:

Amazing! That's worked for desktop, but the text is cut off for mobile.

I moved the position of the text using the top and left entries to get the text to sit top-left on the image.

Also, I need to get the text into the custom font I have on the site 'F37 BOBBY BOLD' at the h1 size (2.3rem)

Add to Design > Custom CSS

/* gallery caption font */
p.gallery-caption-content {
    font-family: 'F37 BOBBY BOLD' !important;
}
/* Resize home gallery mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
    margin-bottom: 5px !important;
}
}

To change gallery caption to h1 style, you can edit Gallery Images > Edit caption follow this format

Quote

<h1>enter caption here</h1>

Thanks for trying @tuanphan, but now the copy is being cut off and not showing all the words.

And it's still not sitting correctly on desktop or mobile. The copy is moving with every screen re-size, rather than just staying top-left.