Search the Community

Hi there, I've got a gallery at my site, which is filled with some videos that are embedded from youtube. On click they open in a lightbox. But before the video is seen in the lightbox, the thumbnail shows up again, then slowly fades out. I want only the video to be opened in the lightbox, not the thumbnail. Is there a way to do this? The site runs on Squarespace 7.0 Thanks in advance

Site URL: https://cat-wedge-xh9c.squarespace.com/about I have two gallerys on my 'About' page - one for staff and one for our BOD. I want only one of these - the BOD - to display in three columns on mobile. By using this code : @media screen and (max-width:800px) { .gallery-grid-wrapper { grid-template-columns: repeat(3,1fr) !important; grid-row-gap: 3vw !important; } } I can change it to three columns, but it changes both of the blocks on the page. Can someone tell me how to just specify that one section that I want to change? Thanks! Website: https://cat-wedge-xh9c.squarespace.com/about

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.

Site URL: https://www.sweetonmaui.com/ Aloha! I've been reading lots of posts on the editing captions for gallery light boxes, but can't seem to implement the right pieces to get the effect I'm looking for. My goal is to share photo credits where I need to, but in a subtle way. I thought it would be great to have them appear in the lightbox, so the thumbnail on the gallery page looks clean. I found a piece of code that works to show the caption in the lightbox only, but I don't know enough to then edit it. (see code at the end of the post). My site is www.sweetonmaui.com. Click on Gallery > Dessert Gallery to see the example. First photo of yellow cups - when you click on the lightbox the caption (image description) appears, but not formatted the way I would like. I'm thinking of a couple of options but not sure yet and hoping to be able to see them on the screen: Option 1 - centered text - bar same width as photo and align to bottom edge of photo - smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too. Option 2 - centered text below photo, in the dark gray color in my palette (no background) - smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too. Thanks so much in advance!!! This is the code I'm using: <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.getElementsByTagName('p').length != 0){ var text = itemGallery.getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox.getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> 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: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .3em 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>

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.

Hi forum Do anyone know the class to target to edit the built-in fade effect in the Index Galleries? Managed to target the entire galley but that also fades the titles

Site URL: https://www.joepreston.co.uk/ Hey Guys, I'm trying to input CSS into my site's template in order to create a little bit of padding around the images on my homepage in the gallery box carousel. I've attached an image of what I'm trying to achieve. Any help in terms of what I would need to put into the custom CSS box for my homepage would be really appreciated. Thanks Joe

Hi everyone, I have a small gallery with the arrows to change to the next slide on the side of the pictures (quite standard). I am trying to find a way to enable navigation through the gallery by pressing left and right arrow keys, but can't figure it out. Is there any way to do this? Also would be nice if it is also possible to change the image by pressing anywhere on the left/right side of it (instead of having to hit the very small arrows). Any advice on this would be also appreciated. Thanks!

I'm trying to create multiple portfolio "Grid: Overlay" project style pages, but want to have different gallery image sizes on each page (i.e. 16:9 aspect and 4 rows on home page, 1:1 and 2 rows on a different page). Whenever I change the settings for one page though, it changes the project gallery settings across all pages. I don't know a workaround for this, and am trying to avoid custom CSS. Any ideas what I can do to achieve this?

Site URL: https://www.rafida.org Hey, I'm trying to limit the maximum size of an image on mobile. This code used to work for image blocks, but not working for gallery blocks. The reason I switched to a single image gallery rather than an image block is for the video lightbox function. The image I'm trying to restrict is the large orange play button at the top of the home page. Any idea why it's not working? website: rafida.orgpass: lastphasetesting3 - Code provided below. - Screenshot provided of single image gallery I'm trying to restrict on mobile @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1600057330272_455 img { width: 50% !important; height: auto !important; transform: translateX(-50%); left: 50% !important; top: 0 !important; } div#block-yui_3_17_2_1_1600057330272_455 .image-block-wrapper { padding-bottom: 50% !important; } }

Site URL: https://hallpr.com/steven#s By default photo captions in a gallery are visible only on hover. How can I make them persistent and make them visible at all times? Thank you in advance.

Site URL: https://mwejps3lrkma.squarespace.com Currently on 7.1 the Gallery blocks with links have no hover/interaction on them, so it's quite hard for users to tell they're clickable links. (example: https://mwejps3lrkma.squarespace.com) How easy is it to customise it so that we get a basic hover effect? Even a token 10% opacity on hover? Or even better display the 'Alt' text in the centre to match the styling on the Portfolio gallery blocks (example: https://mwejps3lrkma.squarespace.com/) I thought something like the below would be a quick fix but it doesn't seem to work; .gallery-grid-item img:hover { opacity: 0.9 !important; }

Hi guys! I'm trying to create multiple portfolio pages on the same website which use different settings/ styles. For example I want one to be a 2 column grid and another to use a 4 column grid with different hover functionality/image proportions. When I update the settings of one it updates these across both portfolios. Is it possible to style these separately or is this a limitation of 7.1? Thanks for your help.

Hello, I'm re-doing my website using the Flatiron Template but want the galleries to be a grid like "Wells Template" and not a straight line. Essentially I prefer the homepage of flatiron but want to combine the galleries of Wells, is there a way to do this? Attached is an image how I want the galleries to look once clicking on the thumbnail. Thanks.

Site URL: https://orb-hibiscus-bfjf.squarespace.com/ Dear Squarespace friends, I'm looking to tweak the font size and formatting of a gallery description on the homepage. My client would love eg the first bit in capitals to be separated by a line break. Is this just a simple case of adding <Br> at the back end? Also, I've been told the font size relates to paragraph 2. Is there any way of altering the font size here without altering the other paragraph 2 fonts throughout the site? Thank you for your assistance, Best AC

I have several gallery pages which I would like to display in Grid format. However, some galleries have just one or two images in them. How can I edit the gallery to center the images in the middle of the page, rather than having them left-aligned? I am using the York template.

Site URL: http://mckarchitects2.squarespace.com Hi there, When I go to add a Gallery (Slideshow) to my home page and I click 'Large' height with 'Full' bleed, the photos get squished down until you can hardly see them. Ideally I would like to have the images width match the site header width, not fully bleed out the sides of the pages. Is there a way I can increase the height of the Gallery so that it goes above 100 (the current max)? See images attached for references. Thank you! Montana

Site URL: https://megalodon-hexagon-y2we.squarespace.com/ Does anyone know if there is code to alter a Gallery Section so there can be a Text Block next to it? side by side? In 7.1 you have the ability to add a Gallery Section, which looks great but then your text block has to be above or below it in a DIFFERENT Section. All I want to do is add a Gallery to a page without it being the ONLY block in the section. Why did they strip away the Gallery Block function? It makes no sense. Please help!

I have more images uploaded that are showing. Only 10 is being displayed. I need to inrcease this to 30. I cannot find how to change the display settings for the life of me.

Site URL: https://valeriewartelle.co.uk/ Hello - I am switching template within version 7.0 Wells to Mojave to benefit from different features. I am struggling with setting a fullwidth site, a full-bleed image on home page and adding padding so gallery, gallery-blocks, product pages etc don't appear squashed to the edges of the screen. I understand I may be able to add some CCS coding to do so. I'm not a coder so wondered if someone could advise? I'm working on preview so can't send the URL but attach screenshots of no padding v padding for homepage and gallery so you can see what I mean. Ideally I want it to look like this http://www.kerryschroeder.com/ Hopefully you can help 🙂 Thanks!

I added a "search box" to one a pages, which show a lot of "how to" videos. The videos are sourced from a gallery I created and have uploaded them. When I search for the word/title of the video (caption), the various results show up as options. But when I select the specific video, it takes me to the entire gallery page, rather than just that one video. Is there a way for the results to show you the one specific result, rather than the entire gallery where I would still be searching for the specific one? I'm using Squarespace 7.0. Thank you in advance for any help, tips, and advice!

hi all, I'm using 7.1 and I need to create a slider (gallery section) that's contents is two blocks in each slide: an image and text, side by side. Each time the user moves to the next slide, it shows new a new text block and image, side by side. I've seen lots of request for overlays but not a slider containing two elements. is this possible? thanks!

Site URL: http://www.batsevamakes.com/photography Hey there, Trying to get the Title on the images to show only when you hover over the images. Hatch's only hover effect in this situation is that of color. Can anyone help me try to do this only using CSS, because I'm not able to use Javascript rn. It would be greatly appreciated!

Site URL: https://www.zowatt.com Hi there, I'm trying to change the order in which the images on my "Zines" page appear on the mobile view. The images are presented in a specific order (Part 1, Part 2, Part 3 etc) but when viewed on the mobile, it rearranges them so that when you scroll down it's Part 1, Part 5, Part 9 etc. It's the same on my "Writing" page - the images are no longer in the same order when viewed on the mobile. Is it possible to rearrange on the mobile view without changing on the desktop view? My URL: zowatt.com My URL access password is: zowatt1 Thanking you!

Hi there, I'm a photographer and I often upload private galleries for clients with a password so that they can go through a photoshoot and select individual images for retouching, so being able to see the file name as an image title is really important. I used to use the following code in the individual galleries 'Cog icon'>advanced>code injection box; Which I got from another user. I'd then select 'show title' in the galleries settings, refresh the page and voila. But I havent done this in a while and since Squarespace have updated the interface to do this I can no longer find 'show title' anywhere. I dont know if this effects things but I've just had a look through my site and I also have this same above code in Settings>Advanced>Code injection. And also I have the following code in Design>Custom CSS .image-title { display: none; } .image-desc { display: none; } .image-title, .image-desc, .image-desc-mobile p { display: none; } No idea what that is or if its affecting things. I'm using 'Wells' template, site address here: www.ashholdsworth.com Thanks!