Gallery Caption workarounds for 7.1?

On 8/30/2021 at 11:57 AM, Wanderlust123 said:

 

I just discovered the links do not work, so please ignore those.

Ok, so I was able to fix one of the issues with a code you had already provided me, which I had forgotten to add.  

So the remaining issue is that a large white space appears between the photos and the caption when viewing it in a lightbox through Mobile mode.

 

website password:     photos123

What is site url?

https://dalmatian-flugelhorn-6yx4.squarespace.com/config/

On 9/1/2021 at 2:01 PM, Wanderlust123 said:

 

https://dalmatian-flugelhorn-6yx4.squarespace.com/config/

Try adding to Design > custom CSS

/* Lightbox caption position */
@media screen and (max-width:767px) {
div.light-caption {
    position: absolute !important;
    bottom: 100px !important;
}
}

It worked great for all the horizontal photos but for the photos that are Vertical the caption appears on the photo itself.

On 9/7/2021 at 3:38 AM, Wanderlust123 said:

It worked great for all the horizontal photos but for the photos that are Vertical the caption appears on the photo itself.

It looks like there is no way to solve this :-/

😞 Thanks anyways for all your help!

On 11/2/2019 at 3:15 PM, brandon said:

Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post.

If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question?

If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it?

Hello Brandon, I tried the code you posted above, but I get double titles on the light box, and I would like to remove them from the main page. Currently I am leaving the titles on on the main page, because I want those to be Hoover text, but I have no idea how to do that. While I managed to put the text on transparent (no background), I have no idea why they are double.
Could you help me out please? Thank you so much!

website: www.Kiyary.com 

22 hours ago, kiyary said:

Hello Brandon, I tried the code you posted above, but I get double titles on the light box, and I would like to remove them from the main page. Currently I am leaving the titles on on the main page, because I want those to be Hoover text, but I have no idea how to do that. While I managed to put the text on transparent (no background), I have no idea why they are double.
Could you help me out please? Thank you so much!

 

website: www.Kiyary.com 

It looks like you figured it out?

I used the code and it works so well but I am also getting double titles and can't seem to figure out how to fix it. Site is https://manotick-health.squarespace.com/ password is: health

Thanks in advance!

2 hours ago, AshIzsak said:

I used the code and it works so well but I am also getting double titles and can't seem to figure out how to fix it. Site is https://manotick-health.squarespace.com/ password is: health

 

Thanks in advance!

I figured this out in case anyone else has this issue. Here is the code to remove the duplicate text:

.gallery-caption p.gallery-caption-content{display:none !important;}

Okay I have one more issue and would be so grateful for some help. When I go into mobile, the slideshow simple section image disappears. Here are the desktop and mobile views.

On 2/23/2022 at 3:35 AM, AshIzsak said:

Okay I have one more issue and would be so grateful for some help. When I go into mobile, the slideshow simple section image disappears. Here are the desktop and mobile views.

What is site url? We can check easier

Perhaps this question has been answered before, but I haven't seen the answer for it yet: 

Whenever I add a slideshow to a page, the name of the file shows up at the bottom of each image (for instance, "ls 2.jpg") and doesn't look good. How do I get rid of the file name automatically showing up as the description for each image?

Here's my link: https://www.lindasaccoccio.com/poem-paintings

I talked to a Squarespace customer service guy and he said it was a problem with my CSS. I have a very limited knowledge of coding, and haven't touched this site's coding before. Here's my code: 

.header-nav-folder-content .header-nav-folder-item a {
   padding: 0.5em;
  color: rgb(153, 0, 0);
  text-align: left;
  white-space: pre-wrap;
}

.header-nav-folder-content .header-nav-folder-item a:hover {
  color: #990000;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
     box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.2);
  border-top: 2px solid #990000;
    width: 200px;
}

section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
  font-family: "Georgia", sans-serif;
  font-size: .9rem;
  color: black;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: -35px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {
    bottom: -70px;
    text-align: center;
    background: none;
    color: #000;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside {
  padding: 0;
}

.sqs-gallery-block-slideshow .meta .meta-title {
    color: #414042;
    font-size: 13px;
  font-weight:bold;
  letter-spacing: 0px;
}

.sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p {
    color: #414042;
    font-size: 13px;
}

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background: none;
    color: #414042 !important;
}

.sqs-gallery-controls .previous {
    left: 0px;
  position: fixed;
  top: 300px;
}

.sqs-gallery-controls .next {
    right: 0px;
  position: fixed;
  top: 300px;
}

.sqs-gallery-controls .previous:hover, .sqs-gallery-controls .next:hover {
    background: none;
}

@media only screen and (max-width: 480px) {
  .sqs-gallery-block-slideshow .meta {
    display: block !important;
  }
}

@media screen and (max-width: 575px) {
.gallery-lightbox-controls {
   display:  flex !important;   
}
  .gallery-lightbox-control-btn {
            background: rgba(0,0,0,.5);
    width: 30px;
    height: 44px;
  }
}

Can anyone tell me what I would need to get rid of? Thanks in advance.

On 3/11/2022 at 1:22 AM, WA-Admin said:

Perhaps this question has been answered before, but I haven't seen the answer for it yet: 

Whenever I add a slideshow to a page, the name of the file shows up at the bottom of each image (for instance, "ls 2.jpg") and doesn't look good. How do I get rid of the file name automatically showing up as the description for each image?

Here's my link: https://www.lindasaccoccio.com/poem-paintings

I talked to a Squarespace customer service guy and he said it was a problem with my CSS. I have a very limited knowledge of coding, and haven't touched this site's coding before. Here's my code: 

.header-nav-folder-content .header-nav-folder-item a {
   padding: 0.5em;
  color: rgb(153, 0, 0);
  text-align: left;
  white-space: pre-wrap;
}

.header-nav-folder-content .header-nav-folder-item a:hover {
  color: #990000;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
     box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.2);
  border-top: 2px solid #990000;
    width: 200px;
}

section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
  font-family: "Georgia", sans-serif;
  font-size: .9rem;
  color: black;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: -35px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {
    bottom: -70px;
    text-align: center;
    background: none;
    color: #000;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside {
  padding: 0;
}

.sqs-gallery-block-slideshow .meta .meta-title {
    color: #414042;
    font-size: 13px;
  font-weight:bold;
  letter-spacing: 0px;
}

.sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p {
    color: #414042;
    font-size: 13px;
}

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background: none;
    color: #414042 !important;
}

.sqs-gallery-controls .previous {
    left: 0px;
  position: fixed;
  top: 300px;
}

.sqs-gallery-controls .next {
    right: 0px;
  position: fixed;
  top: 300px;
}

.sqs-gallery-controls .previous:hover, .sqs-gallery-controls .next:hover {
    background: none;
}

@media only screen and (max-width: 480px) {
  .sqs-gallery-block-slideshow .meta {
    display: block !important;
  }
}

@media screen and (max-width: 575px) {
.gallery-lightbox-controls {
   display:  flex !important;   
}
  .gallery-lightbox-control-btn {
            background: rgba(0,0,0,.5);
    width: 30px;
    height: 44px;
  }
}

Can anyone tell me what I would need to get rid of? Thanks in advance.

Try adding to Design > Custom CSS

.gallery-item-description {
    display: none;
}

On 3/12/2022 at 10:26 PM, tuanphan said:

Try adding to Design > Custom CSS

.gallery-item-description {
    display: none;
}

 

Thanks tuan! That worked! 🙂

Hello, I am having similar issues here. I have created a Portfolio page with for my client, an artist to show all her work. In the Project page I created as Gallery section with al the images, and my client wants each image to show the title and year on hover over, whether on the gallery or when opening the image on a lightbox.

Does anyone know how to add hover over text to images in Gallery sections or light boxes? Thank you! I am attaching two screenshots: one of the gallery of the first project and one of the image in lightbox. In either of them having a hover over showing text with title and date would work. Thanks!

1 hour ago, otilia said:

Hello, I am having similar issues here. I have created a Portfolio page with for my client, an artist to show all her work. In the Project page I created as Gallery section with al the images, and my client wants each image to show the title and year on hover over, whether on the gallery or when opening the image on a lightbox.

Does anyone know how to add hover over text to images in Gallery sections or light boxes? Thank you! I am attaching two screenshots: one of the gallery of the first project and one of the image in lightbox. In either of them having a hover over showing text with title and date would work. Thanks!

Can you share your site with the protected password so we can take a look?

Yes, the site is https://mariahierro.squarespace.com and the password is allshallpass

Thank you

Have you turned on the caption in gallery setting style?

Hi! I have turned on the captions now, it is on the first image only as a text (it will be the title of the pic and year). My client wants the title and year only to be visible when hovering over, not showing und the image as it shows now with caption turned on. Is this something possible? Thanks!!

Hello! Did you have the chance to take a look at this? Cheers!

On 4/29/2022 at 9:07 PM, otilia said:

Hello! Did you have the chance to take a look at this? Cheers!

You mean

• Initial: hide text under reel
• Hover image: show text under reel?

Hi,

I would like to know if it is possible to show text over image in the gallery or when the image displays (either way would work) when the mouse is on top of the image. My client has requested this functionality to her artwork. Thank you

21 hours ago, otilia said:

Hi,

I would like to know if it is possible to show text over image in the gallery or when the image displays (either way would work) when the mouse is on top of the image. My client has requested this functionality to her artwork. Thank you

Add to Design > Custom CSS

figcaption.gallery-caption.gallery-caption-reel {
    position: absolute !important;
    top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    margin: 0 !important;
    color: white;
}

4 hours ago, tuanphan said:

Add to Design > Custom CSS

figcaption.gallery-caption.gallery-caption-reel {
    position: absolute !important;
    top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    margin: 0 !important;
    color: white;
}

 

Hello and many thanks for this, I see what the code is doing is showing the text over the image on the home (see attached) but what my client wants is the title of image showing when hovering over on the gallery of each project, found in Projects / Tipoesia gallery  (see attached). Is this something that can be done? Do you know how? Many thanks!