Adding a text overlay on gallery slideshow (full bleed autoplay on homepage)

On 12/24/2022 at 2:51 AM, tuanphan said:

Adjust code to this

body#collection-639bcaa9e249ef08743e64b2 {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50%;
    left: 0;
    text-align: left;
    max-width: 90%;
}
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 30px;
}
.gallery-fullscreen-slideshow {
    margin-bottom: 0px !important;
}
/* mobile size */
@media screen and (max-width:767px) {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 20px;
}}}

 

Hello! Thanks so much for the code - I've got the slider working great now. Only thing is I don't want the extra space below the slider now that the description text is on top of the image - want as much above the fold as possible. Can you please help reduce that space below? 

here's my site

https://octagon-koi-n8se.squarespace.com/
pw: morocco

thanks!!

On 11/6/2023 at 6:52 AM, Bloomdigital said:

Hello! Thanks so much for the code - I've got the slider working great now. Only thing is I don't want the extra space below the slider now that the description text is on top of the image - want as much above the fold as possible. Can you please help reduce that space below? 

here's my site

https://octagon-koi-n8se.squarespace.com/
pw: morocco

thanks!!

Can you take a screenshot of space? I don't see it on homepage

On 11/7/2023 at 3:39 AM, tuanphan said:

Can you take a screenshot of space? I don't see it on homepage

Hi - here is the screenshot - thanks so much for responding - just seeing this now ... have tried what feels like every option on code on this forum to fix it but still no luck.

I want the slideshow images to line up to the 1px line at the top of the next section. 0px padding doesn't work either - and feel like the issue stems for the fact I've moved that subtitle text on top - so essentially the site is still accounting for that space when I put in 0px. 

Can you also please help with padding on mobile view?

Thanks so much.

Hey! 

I figured out how to add text via the description under the images but now want to increase the font size, remove the black background behind the text, and change the font to match my site's fonts. 
 

I've attached a screenshot of what it currently looks like and have tried to use the custom css in the thread above to fix it but no changes. Can anyone help?

4 hours ago, AmeliaHopper said:

Hey! 

I figured out how to add text via the description under the images but now want to increase the font size, remove the black background behind the text, and change the font to match my site's fonts. 
 

I've attached a screenshot of what it currently looks like and have tried to use the custom css in the thread above to fix it but no changes. Can anyone help?

Can you share link to this page?

https://southwindbarbershop.squarespace.com/config/

17 hours ago, AmeliaHopper said:

https://southwindbarbershop.squarespace.com/config/

I don't see text over slideshow. Can you check it again?

https://southwindbarbershop.squarespace.com/?noredirect

Hi I have a similar issue with squarespace 7.1. I have added a Gallery, the gallery type is: slideshow: full ; the gallery has 3 images, I want different titles to appear on each image, maybe like an overlay text - how to do this for 7.1?

For example:

5 hours ago, ShreyaK said:

I have added a Gallery, the gallery type is: slideshow: full ; the gallery has 3 images, I want different titles to appear on each image

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

https://banjo-rhino-35g9.squarespace.com/

pass:123

10 hours ago, ShreyaK said:

I have added a Gallery

I am having trouble finding a gallery that seems to do with interiors, homes, or workspaces. Is this gallery on the home page?

Hi sorry i added the wrong site url and pass

it is this - https://keyboard-platinum-k3wn.squarespace.com/

pass:hc123

on the home page - the first section is a gallery, " Slideshow: Full " with three images, need the following titles as headlines on each, bottom left maybe - not sure if it will look good centrally aligned. Any help would be great! thanks in advance 

On 7/17/2024 at 6:15 AM, ShreyaK said:

I want different titles to appear on each image, maybe like an overlay text - how to do this for 7.1?

Please see the following.

Let us know how it goes.

Hi, thanks for sharing this! I want the title to look like this image. In the middle in the h2 format I have added to the website. 

I tried using the older version's "Headlines" page but it doesnt have an autoplay button so can't choose that as an option..  came across this but not sure if it can be used 

@creedon anyway to make the slideshow autoplay? Or add the text as a headline like the screenshot shared above?

2 hours ago, ShreyaK said:

anyway to make the slideshow autoplay?

The slideshow is already auto playing.

Quote

I want the title to look like this image.

Here is some starter code. Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .gallery-caption-fullscreen-slideshow {
  
    background-color : rgba( 255, 255, 255, 0.8 );
    bottom : 3vw;
    color : black;
    height : unset;
    left : 3vw;
    margin : 0;
    max-width : fit-content;
    padding: 0 1em;
    text-align : unset;
    top: unset;
    
    }
    
  .gallery-section .gallery-fullscreen-slideshow .gallery-caption p {
  
    font-size : xx-large;
    
    }
    
  </style>

Let us know how it goes.

its a personal plan, so i dont think code injection would work. any other way to get it to look like this .. if i add a headlines section.. anyway to make those slides autoplay ?

2 hours ago, ShreyaK said:

its a personal plan

Remove the <style> and </style> from my code and then add to Website > Pages > Website Tools > Custom CSS.

As to the auto play I can't help you as it is already doing that.

Hi @creedon the code worked fine but i need the text to be in the h2 format, when i try changing the code it doesn't change the style, also is there any way to make this bigger? i tried amending the code and the box didn't match, not sure what to change, the code i tried was:


 

.gallery-caption-fullscreen-slideshow {

  background-color: rgba(255, 255, 255, 0.8);
  bottom: 3vw;
  color: black;
  height: unset;
  left: 3vw;
  margin: 0;
  max-width: fit-content;
  padding: 0 1em;
  text-align: unset;
  top: unset;

}

.gallery-section .gallery-fullscreen-slideshow .gallery-caption p {
  font-size: 4em; /* Adjust the size to make the text a lot bigger */
  font-family: inherit; /* Inherit the font family from the h2 element on the website */
  font-weight: inherit; /* Inherit the font weight from the h2 element on the website */
  line-height: inherit; /* Inherit the line height from the h2 element on the website */
  margin: 0; /* Remove default margin */
}


 

@creedon i have added the Headlines section that could work with autoplay. 
https://keyboard-platinum-k3wn.squarespace.com/
pass:hc123

hi @creedon - thank you so much for your clear instructions and resources! I have successfully implemented this on my site. ( cone10.ca/fr/accueil-1 ) 

One last question for you, with autoscroll enabled, I hid the navigation arrows which only has successfully worked on desktop, but not on mobile (see attached photos). Is there a last level of customization that I need to add to remove the navigation arrows on mobile? 

Thanks for your help!

success! of course @tuanphan has already answered this in another thread, linked here for posterity  🙂