Envela Posted February 18, 2022 Share Posted February 18, 2022 (edited) Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7.0, I don't know why they wouldn't keep that but eh). So it works great, but I wonder if there's a way to make it look like a 7.0 lightbox caption so that: - it matches the length of the image, wether it's portrait or landscape mode. - the opacity is reduced and the block is overing the image. Basically, the first screenshot is what I have now on my 7.1 website, and the second is what I would like to have back 🙂 Thanks a lot! This is the code I have: .image-caption-wrapper { background: none !important; /* Background Overlay*/ margin-left:25px; } /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: Lato; font-weight: 200; font-style: normal; line-height: 1.8em; font-size: 15px; margin: 0 0 1em; color: #EBEBEB; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .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: 0.5em; padding: 1em 2em; max-width:55%; text-align:center; background-color: #121212; transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Edited February 18, 2022 by Envela Link to comment
Beyondspace Posted February 18, 2022 Share Posted February 18, 2022 2 hours ago, Envela said: Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7.0, I don't know why they wouldn't keep that but eh). So it works great, but I wonder if there's a way to make it look like a 7.0 lightbox caption so that: - it matches the length of the image, wether it's portrait or landscape mode. - the opacity is reduced and the block is overing the image. Basically, the first screenshot is what I have now on my 7.1 website, and the second is what I would like to have back 🙂 Thanks a lot! This is the code I have: .image-caption-wrapper { background: none !important; /* Background Overlay*/ margin-left:25px; } /** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: Lato; font-weight: 200; font-style: normal; line-height: 1.8em; font-size: 15px; margin: 0 0 1em; color: #EBEBEB; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .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: 0.5em; padding: 1em 2em; max-width:55%; text-align:center; background-color: #121212; transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Can you share your site with the protected password so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
AIHMN Posted April 4, 2022 Share Posted April 4, 2022 @bangank36 - I'm wondering about this too for my site. Would you be willing to look at my site too? Link to comment
tuanphan Posted April 4, 2022 Share Posted April 4, 2022 6 hours ago, AIHMN said: @bangank36 - I'm wondering about this too for my site. Would you be willing to look at my site too? Can you share link to page where you use gallery? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Nina42 Posted August 5, 2022 Share Posted August 5, 2022 Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up! Any idea why this might be? I've very frustrated. lauren00 and Frick74 2 Link to comment
tuanphan Posted August 10, 2022 Share Posted August 10, 2022 On 8/6/2022 at 3:00 AM, Nina42 said: Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up! Any idea why this might be? I've very frustrated. Hi. Can you share link to gallery page? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
3-day-monk Posted January 11, 2023 Share Posted January 11, 2023 @tuanphan Hi. I also would like to have image captions in light box on a gallery page. I currently have different custom code to have a similar functionality, but it doesn't match the length of the image.. If you could give me some advise I'd appreciate it. Thank you. Here's my gallery page:https://www.sushiofgari.com/signature Link to comment
tuanphan Posted January 15, 2023 Share Posted January 15, 2023 On 1/12/2023 at 3:25 AM, 3-day-monk said: @tuanphan Hi. I also would like to have image captions in light box on a gallery page. I currently have different custom code to have a similar functionality, but it doesn't match the length of the image.. If you could give me some advise I'd appreciate it. Thank you. Here's my gallery page:https://www.sushiofgari.com/signature NO way to equal caption width = image width You can consider reduce caption width. or make caption span fullwidth of screen. If you want this, we can give the code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jazzzz Posted February 15, 2023 Share Posted February 15, 2023 @tuanphan Hi Tuan, I'm having a similar issue. I have a masonry gallery set up on my site and I would like the captions to appear on a hover and also have the captions appear under the image in lightbox. I've figured out how to get the captions in hover, but can not find a way to have the captions appear in the lightbox. Can you help with this? My site URL is www.artdontsleep.com Here is the code I have currently in my CSS for the hover functionality: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ padding: 1vw; } .gallery-masonry-item { position: relative; } .gallery-masonry-item:hover .gallery-caption { opacity: 100; } .gallery-caption-grid-masonry { transition-delay: 0ms; } .gallery-masonry-lightbox-link:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; } Link to comment
tuanphan Posted February 16, 2023 Share Posted February 16, 2023 On 2/15/2023 at 8:10 AM, jazzzz said: @tuanphan Hi Tuan, I'm having a similar issue. I have a masonry gallery set up on my site and I would like the captions to appear on a hover and also have the captions appear under the image in lightbox. I've figured out how to get the captions in hover, but can not find a way to have the captions appear in the lightbox. Can you help with this? My site URL is www.artdontsleep.com Here is the code I have currently in my CSS for the hover functionality: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ padding: 1vw; } .gallery-masonry-item { position: relative; } .gallery-masonry-item:hover .gallery-caption { opacity: 100; } .gallery-caption-grid-masonry { transition-delay: 0ms; } .gallery-masonry-lightbox-link:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; } Use this code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Beyondspace Posted May 7, 2023 Share Posted May 7, 2023 On 1/12/2023 at 3:25 AM, 3-day-monk said: @tuanphan Hi. I also would like to have image captions in light box on a gallery page. I currently have different custom code to have a similar functionality, but it doesn't match the length of the image.. If you could give me some advise I'd appreciate it. Thank you. Here's my gallery page:https://www.sushiofgari.com/signature Just like to chime in and provide an alternate, complete solution with my new Lightbox Studio (beta) plugin. The gallery caption has been curated to resize based on image actual width Check your site in action here (feedbacks are very welcome) BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted May 7, 2023 Share Posted May 7, 2023 @jazzzz I tested your site against the new gallery, I wonder why you have a large padding top? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
lauren00 Posted June 14, 2023 Share Posted June 14, 2023 On 8/5/2022 at 4:00 PM, Nina42 said: Just like Envela, I would like to add captions to my images in light box on a gallery page, but when I inserted the custom CSS code exactly as she uploaded here, the change didn't show up! Any idea why this might be? I've very frustrated. Same here. I've added the exact code with no changes to my site. What might I be doing wrong? Frick74 and taradesigns 2 Link to comment
tuanphan Posted June 16, 2023 Share Posted June 16, 2023 On 6/14/2023 at 12:13 PM, lauren00 said: Same here. I've added the exact code with no changes to my site. What might I be doing wrong? What is your site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lauren00 Posted June 20, 2023 Share Posted June 20, 2023 On 6/16/2023 at 5:30 AM, tuanphan said: What is your site url? Does my site need to be set to public in order for you to take a look? Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 On 6/21/2023 at 3:53 AM, lauren00 said: Does my site need to be set to public in order for you to take a look? No need. You can setup an access password then share url. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Beyondspace Posted November 7, 2023 Share Posted November 7, 2023 On 6/21/2023 at 3:53 AM, lauren00 said: Does my site need to be set to public in order for you to take a look? You can only set the password protected for the single page and share it with us BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Jabeling Posted December 18, 2023 Share Posted December 18, 2023 Hello, I would also like to have captions in the Lightbox. Not in the gallery. The before mentioned code doesn't seem to work on my website. My website is https://www.abeling.nl (I have for now turned caption in the gallery off, because I don't want captions there. But when turned on they only appear in the gallery, not in the Lightbox) Could you have a look please? Thanks and best regards, Johannes Link to comment
tuanphan Posted December 20, 2023 Share Posted December 20, 2023 On 12/18/2023 at 8:45 PM, Jabeling said: Hello, I would also like to have captions in the Lightbox. Not in the gallery. The before mentioned code doesn't seem to work on my website. My website is https://www.abeling.nl (I have for now turned caption in the gallery off, because I don't want captions there. But when turned on they only appear in the gallery, not in the Lightbox) Could you have a look please? Thanks and best regards, Johannes Try this code instead Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Alexi47 Posted March 22 Share Posted March 22 (edited) Hi! Joining this chat as I'm also trying to get captions only to show in the Lightbox. Not in the gallery. I am using both gallery grid-masonry and grid-strips. I've tried lots of variations of the code shared above, but have not had success. And I also want to make sure this feature carries over to mobile view. Any advice would be great The website is still under construction and password protected. Here is a URL to a page that I am looking to edit to only show the image captions in the lightbox: https://vicki-walsh.squarespace.com/black-sheep-drawings Password: TESTSITE24VW Edited March 22 by Alexi47 added website link Link to comment
Beyondspace Posted March 22 Share Posted March 22 (edited) Do you mean showing the image caption when Lightbox opened like this? Besides, what is the plan that your Squarespace site is currently subscribed to? Edited March 22 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Alexi47 Posted March 22 Share Posted March 22 @Beyondspace yes exactly! My client wold like the image captions to only appear when the images are clicked on. Right now the site is unpublished, but it will likely be subscribed under the basic plan, or business plan at most. Link to comment
tuanphan Posted March 26 Share Posted March 26 @Alexi47 You try this thread Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment