Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'caption'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • 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. I'd like to add a photo credit line underneath the image I'm using in a card image block - is this possible? It seems like it's not, but I'm imagining there's a CSS or HTML hack that would make this possible. I'm using the Bedford template.
  2. Hi there, I am doing a website for a client who is only using a personal plan. As they are a jeweller, I need to be able to have a caption showing the details of the work in the Lightbox section of the gallery. I don't want the captions to show in the grid view. I'm having a lot of trouble trying to work this out, and I'm stuck because they do not want to upgrade to a business plan. Any help would be much appreciated! Nina
  3. Site URL: https://octopus-avocado-223h.squarespace.com/config/pages I have a grid gallery section that I would prefer to be arranged in strips or masonry style. I want the image title to be displayed on hover with opacity. I was able to find code that worked for simple grid, but when I change the arrangement of the grid it's gone. Anyone?
  4. 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.
  5. Site URL: https://www.michellecurrandesign.com/prime-video-kids-streaming Hi, I'm trying to get the subtitle of this stacked image to be just under the title. And I also want to tighten up the spacing above "This title" so that it's closer to the image. I've tried and tried with the custom CSS and can't seem to get it. Can anyone help?
  6. When using lightbox, i have a small dot in the bottom to show captions (within the image). however, it is too small and nobody can find it. is there a special css code to always show the caption when opened in lightbox?
  7. Site URL: https://jaguar-crow-elz8.squarespace.com/ The url password is "test". On the page, there are two gallery sections, each with 1 image. In the first, lightbox and captions are both enabled, and the captions only appear in the ordinary view but not the lightbox. In the second, lightbox is enabled but captions are not. As a result captions appear neither on the page nor in the lightbox. Both images have the same caption, which I inserted under Edit Gallery/Description. I'd like the first image on the page to appear without captions. However I would like the captions to appear when you click on the image to "enter the lightbox". Is this possible? The layout for both is Grid:Strips, if it matters. This is one of the squarespace default sites that I set up as a test.
  8. Hi, Im looking to change the font size on caption hover text. I've managed to split the lines of my caption up into 4 lines. Id like to make the 1st and 3rd lines in bold or larger font size. I've tried inserting .gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold} at various points but cant seem to get it to change the text. This is the css I have just now: figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } .gallery-caption p{white-space: pre; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; font-family: Source Sans Pro; font-size: large; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: #f1a638; /* Overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 1; } /* remove gap */ figcaption { padding: 0 !important; }
  9. Site URL: http://www.maggiebrz.design Hi everyone! I just switched from 7.0 to 7.1. In the masonry gallery grid, I'm trying to add hover effects to my images- a color overlay and image caption on hover. I talked to customer support, and they told me that 7.1 doesn't support gallery hovers. I'm having trouble with the code, and was wondering if anyone had more luck than I did? I've attached a screen shot of how the site is set up. I'm trying to keep the full-bleed effect. I've been stuck in a rabbit hole working on this all day - thanks for the help!!
  10. Hello everyone, I want to make a starting page as an overview portfolio page that opens in a lightbox that one could browse through the portfolio photos. However, I would like that each photo, when open in the lightbox, has a caption below that says "View Project" and takes you to the page of that specific project. So basically, I need to: a. Turn captions into links (for some reason a simple hyperlink leads to all kinds of errors as it ads the link url after the page's url) and b. Make captions appear only in the lightbox. I am at the very beginning of building the page so have nothing to show yet (and no extra code has been added yet) but any help would be highly appreciated. Thank you in advance, Elena PS: example of the desired result attached
  11. Is there a way to add image captions to gallery photos using either the app (iPhone) or mobile device? I can add the captions so they are displayed in my gallery from my PC but I can't find a way to add them using the app on my mobile device. I can add/delete images and re-arrange the gallery but there doesn't seem to be a way to add a caption that will be displayed below the image when I upload a new image to the gallery using the app. Thanks in advance.
  12. 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>
  13. Site URL: https://www.jurajsimkovic.com/projects/slovak-national-theatre Hi, as the title says, I would like to add specific captions to specific images in my gallery and, this is important, I want them to only appear in the lightbox view. I don't want them to appear under the images when viewed casually on the site, without lightbox. Most of them are masonry grid-galleries, one of them is a simple grid-gallery. I have just paid for the personal plan and would like to avoid upgrading and paying for the higher tier business plan. The picture attached to this post should clarify the look of the captions. Thank you in advance. Juraj
  14. 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
  15. Site URL: https://hexaflexagon-badger-7lht.squarespace.com/ Hey, Password to my site is KIPO2020 I'm looking to increase the font size of my captions on my gallery grid masonry block but I can't work it out. Can anyone help me? Thank you!
  16. Best I can tell, the ability to enter a caption for a photo has disappeared in Fluid Engine? Can anyone confirm?
  17. I used to insert images and then add title and subtitle text which meant it would look good regardless of what platform the site was viewed on...now I can't find an option to add a title and subtitle anymore. Has it been made defunct? Thanks.
  18. Posting again because my original post is missing. I'm doing my first 7.1 site for an artist client who has a large portfolio of work. Since captions are not yet supported in the gallery or portfolio layouts, has anyone figured out a workaround? Or any way to mimic thumbnail image navigation? It's a requirement to caption the artist's images with the gallery, otherwise I may as well go back to a Brine layout. Thanks.
  19. 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; }
  20. Site URL: https://www.averyyoungphotography.com I would like to add captions to my images that only appear when you hover. Located on my homepage gallery (work), using a masonry grid - Just like https://www.oliviabossert.com Thanks!
  21. Site URL: https://www.elizabundledee.com/bitch-medicine-copy Hi! I have a Simple gallery section with captions set to appear on hover. In order for them to be visible I made the captions bold font. All appears just exactly how we want it on the desktop view but the caption is too large on the mobile view and gets cut off. I am open to style suggestions how to resolve this. Here is the code I have in place now: .gallery-caption p {text-align:center} .gallery-caption p {color: white; font-size: 1rem; font-weight:bold !important;} .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 !important;/* center horizontally */ } .gallery-caption-content { font-size: 2rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } Any suggestions welcome. Thank you!
  22. Site URL: https://www.keaneknapp.com/work Hi! I've noticed that some of the gallery captions on my site are showing a weird glyph – an "x" in a box see the images below – how can I fix this?
  23. Site URL: https://www.4101empedrado.com/services Anybody tell me how I can get the link underline to go away? I'm currently using all this css but the underline is still there and I'm stumped. Thank you! a { background-image: none !important; } .image-caption a { text-decoration: none; } .image-title a { text-decoration: none; } .image-subtitle a { text-decoration: none; } .sqs-block-html a { text-decoration: none !important; } body:not( .header--menu-open ) .header-nav-folder-item--active .header-nav-folder-item-content, /* desktop */ :is( [aria-current="page"], /* mobile */ [aria-current="true"] ) .header-menu-nav-item-content { background-image : unset; }
  24. Hi everyone, I'm stuck at a particular problem: No. 1 I'm working on a gallery of album covers and want to create the exact same effect as on this page: https://www.metallica.com/releases/albums/ Meaning: hovering over the image makes it greyed out (in the above example it's red) and a text with a subtitle for the release year appears. Then you can click on the gallery image and it will take you to the respective page. I have managed all of this with the below CSS coding BUT once I switch to mobile the font size gets way too big and messes up the whole look of it (see screenshots 1 & 2 attached for "correct desktop" VS "messed up mobile"-view). Also, the greyed out image effect appears only if I put a link on the image but not if I don't link it. Is there a way to make it appear without linking the image? Can anybody please help me this? I have no idea about CSS and feel lucky to even have managed to get to the point where I am 😉 Also, the site isn't live yet, so I unfortunately can't share any link to it. Thanks a lot! CSS code figure.gallery-grid-item { position: relative; } @media only screen and (min-width: 834px){ .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #242526; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.80; } /* remove gap */ figcaption { padding: 0 !important; } .gallery-caption-content { font-size: 17px !important; /* caption font size */ color: white; /*caption font color */ } p.gallery-caption-content span { display:block; position: absolute; top: 53%; font-size: 16px; color: white; } }
  25. Site URL: http://www.skatedays.nl Hi y'all, I'm adding images on our page with bulletpoints that link to certain pages. I managed to change the color and font size in CSS. However when I change words into links, the color of the text doesn't change into the right color. This is the code that i used: .image-caption-wrapper { max-height: 100% !important; } .image-caption-wrapper { background: rgba(255,255,255,0.7) !important; } .image-caption p { color: #f0113e !important; font-size: 15px !important; font-weight: bold !important; line-height: 150% !important; letter-spacing: 1px !important; } Second question: Is it also possible to remove the underline when using a link in caption overlay? Thanks, Gr. Koen
  • Create New...