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. 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
  2. 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!!
  3. 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!
  4. 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
  5. 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.
  6. 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; }
  7. 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!
  8. 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!
  9. 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?
  10. 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; }
  11. 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; } }
  12. 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
  13. Best I can tell, the ability to enter a caption for a photo has disappeared in Fluid Engine? Can anyone confirm?
  14. Squarespace says it's possible to add captions to images in Image Blocks in Squarespace 7.1 (and they even have a tutorial on how to style them), but I don't see that option.
  15. Hi! Is it possible to add a caption below an image in a gallery, instead of having the caption overlay the image, using the Avenue template? Thanks!
  16. Site URL: https://www.pai.com/payroll-integration-test-page I've seen this question asked a few times, but I haven't been able to get any of the code that's been provided on the other forums to work on my site. I'm designing a page that lists a bunch of partners our clients could choose to work with and have added code that allows users to filter through the available options based on their needs. The page can be found here: https://www.pai.com/payroll-integration-test-page. I would like the captions for each partner's logo (their phone number & website URL) to appear underneath the logo in the lightbox when clicked without having to hover over the image to see the caption and without covering up a large portion of the logo. I'm not a coder (and our in-house developer is on medical leave), so I'm not sure if all the custom code I already have in the page header injection and sitewide header injection is interfering with this working. Any help would be appreciated!
  17. Site URL: https://theartsupplyco.squarespace.com/ Hello! My client is using a Gallery to highlight specific artwork and they want to use the Caption for each image in order to display the artist's name under that image on the page. They would also like to use a separate alt text for each image that is more concise for SEO and accessibility purposes. Is this possible through code? Right now, the Caption also serves as alt text for gallery images. Thanks!
  18. 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>
  19. I would like to make the caption on a gallery grid 2 lines and have the first line be bold. Can anyone suggest custom code to do this?
  20. 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!
  21. Anyone know how I can stop the captions from jumping from the left side of the page to the right when looking at the site on a small screen? it's hard to explain in words but check out: https://alison-shuman.squarespace.com/minarets-and-onion-domes if you see the caption on the left, make the browser window smaller. thanks in advance!
  22. Site URL: https://www.chriswgladden.com/about Hello, I'm trying to add a caption beneath a photo in an image box's card layout. The site is https://www.chriswgladden.com/about. I'd like the caption to be positioned as in the screenshot (made with Paint). Any help would be great... thank you in advance! Chris
  23. Site URL: http://www.chriswgladden.com Hello, I'm trying to add text to the bottom right of the banner photographs on the various pages of my site (www.chriswgladden.com). I've been trying to do this using spacers, but it won't align with the bottom and keeps messing up the rest of the text boxes on the page. The screenshot below shows an example of what I'm trying to achieve (I made this by adding text to a screenshot with Paint). If there was a way to easily place a text box on all banner images in that location, that would be great. Thank you in advance!
  24. Site URL: https://www.hellohome.co.nz/blog My image captions are displaying overlayed on mobile, and perfectly on desktop. I need custom CSS to get the captions on mobile to display below each image. However, I've tried a couple of things which seems to be messing with my footer and banners which are blocks controlled through CCS I think? Any help appreciated. Thanks
  25. Site URL: https://www.thebrattleboro.com/home-1 Hi there, I'm looking to use photos as buttons and I would love to have labels overlaying each one. I started with a packed gallery, but I am not sure what CSS I should add to have the captions overlay the images. I want it to look like the screengrab attached. Thanks in advance for your help! thebrattleboro.com/home-1
  • Create New...