Jump to content

Search the Community

Showing results for tags 'caption'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. if you click on portfolio > portrait, you see the caption under the images on the grid:masonry, I would like the caption to show in the lightbox on a hover. Just like the current site:https://www.kentin.net/portret-portfolio
  2. Site URL: https://www.robertditty.com/ This might not be possible (or too complicated) but I would like there to be a text overlay when hovering on my images on my homepage. The Supply template does this ( https://supply-demo.squarespace.com/shop-supply?category=Apparel ) but I prefer Wells' wider sidebar. As an alternative, if there was a way for the caption to appear on hover in thumbnail mode that would be better than nothing. Or if there is an alternative to the gallery pages that allows this, let me know. Thanks!
  3. Hi I'm a Noobie to CSS and Squarespace but need help to get SS to behave like I want it to. Is there any way I can get the mobile and desktop blocks - image and text - to align differently in each view/layout?
  4. Hello, I would like to have a hover effect on each image from the grid gallery on my homepage, approximately like the sketch attached. Every image has a link to the concerned page /project, which need to remain. I tried some codes I found, but none where working for me. You may need a PW: dga2023 Thank you very much in advance. Best regards. D*
  5. Site URL: https://www.sarahbergeronartist.com/paintings I am using the masonry gallery on a number of pages on my website https://www.sarahbergeronartist.com/paintings. I would like to find a way to have all image captions show up ONLY in lightbox - centered under the image - and not show the captions in the gallery view. I'm using version 7.1 and I have the most basic squarespace plan, if that is relevant. Can someone help me do this?
  6. Site URL: https://www.photojournalism.org/home-1 Hello. The password for the page is "circle." This is a hidden page I'm building on an existing site; the page will go live Saturday. You'll see there are two galleries stacked; the top is the new one that I'm having trouble with, and the bottom is the old one I'll be deleting (I copied an existing page). I just kept the second gallery up so you could see the difference. I'm having some trouble with captions. Image metadata importing is enabled for my site. In my gallery block (simple gallery), I have captions enabled. I have IPTC data embedded in photos, but when I upload them, the captions don't seem to be coming with them. They're not showing up either in the image description or in the caption field of the gallery. If I manually type in the image description field, it will show up (you might see the word "test" under the first image in the gallery), so it's clear it's the import that's the issue. I've successfully done this many times, and just can't figure out what's going on. I searched in the forum and saw a similar questions posed last spring, and a rep responded they were looking into it. Really hoping it's been resolved by now. Any thoughts/help/insight/advice? Thanks very much.
  7. Has no one found a way to format text in captions in the gallery section? I need to italicize titles for art work. I see others have added code to make it work but surely this must be an issue for any artist using the gallery section and being a coder shouldn't be a requirement.
  8. Site URL: https://flower-bat-t5ng.squarespace.com/ Hi, I am trying to reduce the caption padding and margin for the image blocks on my portfolio. I have added the custom css code for the same: .design-layout-inline .image-caption-wrapper { padding: 0 !important; } .design-layout-inline .image-caption-wrapper h2 { margin-top: 5px !important; margin-bottom: 5px !important; } After doing so ,when I am still in the edit mode, I see the changes being reflected. But once I say Done and Save changes and publish/preview my site I don't see the changes. Appreciate the help! Thanks! Password: Underconstruct21
  9. Captions are being cut off on laptop-sized browser and smaller. Site: deyvaarthurtest.squarespace.com/photographyprojects/egypt-everyday Pass: Deyva123 I tried adding code to make the full caption visible (see below), but the caption expands behind other elements like the gallery thumbnails and another text block below the gallery. Is there a way to tell the caption area to expand and adjust depending on the length of the caption? .gallery-caption .gallery-caption-wrapper { overflow: visible; }
  10. Hi. the image caption titles is moving. mobile, PC both. How can I fix this issue? Thank you KakaoTalk_Video_2023-01-25-16-58-57.mp4
  11. Hi. I add this code on my main page, but when I connect to a main page, the image caption titles is moving.. mobile, PC both. How can I fix this issue? Thank you 🙂 .image-caption { position: absolute; right: -25px; top: -35px; z-index: 99999; } @media only screen and (max-width: 767px) { body.homepage {.page-section.horizontal-alignment--center>.content-wrapper, .content-wrapper { position: relative !important ; width: 85% !important ; justify-content : left ; -webkit-justify-content : left ; margin : 0px !important ; } } } RPReplay_Final1672720485.MP4
  12. I have a gallery grid with images (of artwork). I have it set to pop-up with enlarged images in a lightbox, and display the captions on hover. This is fine on desktop, but on mobile devices the captions do not display unless you tap a tiny dot in the lower right hand corner. Absolutely no one sees this, so mobile visitors to my site always think there is no caption information given. A fine solution would be to simply have the captions below the enlarged lightbox images, and always show up (no hover). This seems like a really, really basic format, but it seems that this is simply not an option on Squarespace, which is baffling to me. Are there any workarounds for this? Having a simple grid of images where you click an image and get a bigger image with a caption below it really seems like something that should be possible.
  13. Hello, I am looking for some code to overlay the captions on a gallery slideshow – so they sit on top of the images, on the bottom left. Thank you! https://groundhog-salmon-bfkp.squarespace.com/home-06012302-4-copy-2 Preview-01
  14. Hey Squarespacers! Happy new year - hope everyone is well 🙏🏻 The page in question is: two-hander.com/work The template is Balboa, SS 7.1, the images in questions are in a Strips Gallery. The issue is that captions display terribly on mobile devices. I've added custom code to the page in order to achieve a hover-overlay effect for the caption/description for each image and it works beautifully on Desktops but on mobile devices the text is too faint, some times misplaced, sometimes not appearing, etc - it's too inconsistent. Is there any CSS that would enable the captions/descriptions to be static and automatically appearing for mobile devices only? Thanks everyone! Cheers!
  15. Hello, I would like to left-align the captions for my gallery slideshow, so they are aligned with the left margin. Any help would be greatly appreciated! Thank you, Dom
  16. Site URL: https://tmha-new-site.squarespace.com/special-occasions password: tamara Ok so on this page i have the first gallery (personal) set to slideshow and it allows a hover to show the image title and the caption. Is there a way to do this for the second gallery on that page (business) which is a carousel style? Ideally the sizing would be just like the first gallery (image title a little larger than the caption) Also, if i could center this text that would be best.
  17. Hi everyone, I recently improved my website by adding some code to make the captions only visible below the Lightbox, and therefore invisible on the page layout. It is working, but it's also ugly. The typo doesn't work, it doesn't look nice and for some reasons, the caption box doesn't automaticaly align with the pictures it refers to, resulting in this ugly white box. First is how it is at the moment, and then what I imagine it could look like. I am looking for ways to make the caption automaticaly adjust to the width of the pictures of each page, my pictures are not always 2,4x1. And I would also like to adjust the opacity of the background, which I knew how to do before adding my ligns of code. I'm not sure where to change that given I have this in the CSS : body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .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: 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; } figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 100%; width: 100%; transform: translate(-50%, -50%); font-size: 1em; text-align: center; width: 60%; } .style-gallery-lightbox-text p { width: auto; padding: 10px 15px; margin: auto; color: #000; line-height:2; background-color: #fff; margin-top:-30px; } .gallery-lightbox-item-img { height: 90%; } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 80%; } } .gallery-caption-grid-simple, .gallery-caption-grid-strips, .gallery-caption-grid-masonry { display: none; } I'm really not a code guy but I try my best, hope someone understands and can help me, Merry christmas to anyone celebrating, Best
  18. 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; }
  19. Hi I would love some help for my Squarespace 7.1 site. I've added custom code to Header Code Injection to have gallery block captions appear on Lightbox. But, I also would like to have the captions appear on hover over the image. I’ve found some custom codes for Lightbox-caption and Hover-caption separately, but I couldn't find any code that allows me to have both functionalities together. I want to have both if possible. If someone can give me some advice, I would really appreciate it. Thank you!
  20. Hello everyone, I have a photography portfolio website and I want my images to show a caption when they're clicked on. Currently, I have a masonry gallery and the captions show when the cursor is hovering over them. Is there a way to also show the caption once the image has been clicked on?
  21. Captions in my Slideshow Gallery are getting cut/cropped off (Mobile_no code.png). I've tried allowing the overflow to be visible with the code below, but that extends the text below other elements under the gallery (Mobile_with code.png). Code I used for caption: .gallery-caption .gallery-caption-wrapper { overflow: visible; } How can I make the caption fully visible on all screen sizes, and allow the content below the gallery/caption to flow properly after it instead of overlap? I also don't like that the thumbnail list under the gallery disappears on mobile. Is there a way to keep that from disappearing? The site is https://deyvaarthurtest.squarespace.com/photographyprojects/worchester-asylum pass is Deyva1234
  22. Hi all. I have a Gallery section, (in 7.1) set to Masonry layout, with Lightboxing activated. I would like to have the images' individual descriptions/captions HIDDEN at the top level (so the masonry grid stays clean), but VISIBLE in full when someone clicks on an image to expand it into the lightbox format. I know it's not natively possible, but is there a way to do it with a code snippet perhaps? There is so much I need to say about each image, but not at the top, section level. The first impact has to be one of clean lines and no clutter. The second level, is drilling down to the descriptions. The logical way to do that is by creating a lightbox state that also shows the image's description. Any help or advice greatly appreciate. Happy to venmo some cash to someone who could help me add the right code. Cheers
  23. When I go to my unpublished site on my phone or ipad, I do not see gallery captions. But, I do see them when I am in editing mode on the desktop and look at mobile view. I also added CSS to ensure they show, but still not showing on my phone or ipad when looking as a visitor. https://orchid-flatworm-splc.squarespace.com/ temppassword123
  24. Site URL: https://jonathan-gaber.squarespace.com/work/bricks I was following this topic from a previous post but it seems my request for help got lost. As so many others, I am looking for a solution to show a caption in lightbox. The code below works but looks awful as it sits oddly on the art work. The other part of this is that I have added code to the caption to control bold and line breaks specific to art. If anyone can help I would be grateful and if anyone knows how to request this be added to 7.1 even better. Thank you! ------ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .35em text-align: center; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style>
  25. password: Siskinhospital2022! I would love to be able to change the black overlay on the photo captions to white. And possibly change the font as well. What CSS code would allow for this to happen? Thanks!
  • 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.