Jump to content

Gallery Caption workarounds for 7.1? ROUND TWO

Recommended Posts

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Try adding to Design > custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 :-/

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

image.png.801cd4f9a3a7fe730b35c332e36fc6cf.png

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 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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;}

 

Link to comment
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.

Screen Shot 2022-02-22 at 3.33.35 PM.png

Screen Shot 2022-02-22 at 3.33.47 PM.png

What is site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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.

file names on gallery-slideshow.png

Link to comment
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.

file names on gallery-slideshow.png

Try adding to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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!

Screenshot 2022-04-27 at 14.26.38.png

Screenshot 2022-04-27 at 14.26.54.png

Link to comment
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!

Screenshot 2022-04-27 at 14.26.38.png

Screenshot 2022-04-27 at 14.26.54.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Have you turned on the caption in gallery setting style?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Screenshot 2022-05-11 at 13.07.19.png

Screenshot 2022-05-11 at 13.08.45.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.