dan3 Posted October 24, 2019 Share Posted October 24, 2019 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. ddeanphoto, jsanatani, zstrat and 1 other 4 Link to comment
brandon Posted October 25, 2019 Share Posted October 25, 2019 (edited) Update 5/26/2020: Squarespace has added the ability to add image descriptions/captions to 7.1 gallery sections. See here. There are some limitations, such as not appearing in lightbox view and not supporting multiple lines. So, the workaround below may still be of use. --------------------------------------------------------------------- Hi @dan3. Looking at the underlying gallery code, it appears that image descriptions are in-the-works to one degree or another. In the mean time, I've created a bit of code you can use to add image descriptions/captions to gallery sections in Squarespace 7.1 . View Demo Site JavaScript Insert via sitewide footer code injection. If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") For images within a targeted gallery that you do not want a description to appear, you must enter a space as the description (otherwise the filename will show). <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> CSS Insert in "Customer CSS", via the CSS Editor. The CSS below is very basic, adding a white box around the description and generally placing it at the bottom. You can customize to your heart's content. /** * 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: "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; } This is of course experimental. Do let me know how it works for you, or if you have questions. If you reply to this post, please do not quote the code in your reply. Doing so will create copies of the code which A) I would prefer not be copied and B) will propagate old versions of the code which are likely to fall out of date. -Brandon Edited May 26, 2020 by brandon JRBrick, pixolnaut, liamjxn and 39 others 18 20 4 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
dan3 Posted October 27, 2019 Author Share Posted October 27, 2019 This is great! I will definitely give it a try. Thank you so much! Link to comment
jonaverill Posted November 2, 2019 Share Posted November 2, 2019 Hi @brandon Is there a way to have this not effect other parts of the site. Seems to be working on logos sections alos. Thanks Link to comment
brandon Posted November 2, 2019 Share Posted November 2, 2019 (edited) Hi @jonaverill. If it's a gallery section that you've added logo images too, then it's a matter of passing the appropriately-exclusionary CSS selector to the function so that certain sections aren't selected. Another option is to set a space as the description for the image. See the second two bullet points under "JavaScript" in my post. If it's a "logo wall" section you're talking about, I wasn't able to reproduce the issue. So if that's the case, could you provide a link to the page in question? If it's a different sort of section you've added (that is, not a gallery section of some kind), what section was it? Edited November 2, 2019 by brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
jonaverill Posted November 5, 2019 Share Posted November 5, 2019 Hey @brandon So it was a default logo wall on a template, but i added another one to test & when you do that it doesn't replicate the issue. I was going to ask, is there anyway to add a link on the galleries, on the one i'm playing around with it seems to not be able to add a link either on the text or on the image. Thanks again for your help! Link to comment
brandon Posted November 5, 2019 Share Posted November 5, 2019 (edited) Regarding the logo wall, that's strange @jonaverill. I'll have to swing back and see if I can duplicate it using a single section. Regarding adding a link to a gallery image: I find adding links to gallery images in 7.1 to be quite fiddly. I'll set a link, click on another image, make some changes, then save the section. When I go back, the link I added isn't saved anymore. I found it works best if I set the link then immediately hit the "Close" link on the section. I've updated the code in my original answer to accommodate gallery items that have links added to them. It requires just a couple minor changes to both the JavaScript and the CSS. I don't think it's possible to add links to "slideshow" type galleries of any kind. I guess that sort of makes sense, but I wanted to point that out. Edited November 5, 2019 by brandon gcart and GretchenElizabeth 2 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
NuprinBoy Posted December 10, 2019 Share Posted December 10, 2019 Hi @brandon Thanks for this. I'm about to try it out on site I'm working on. Your last note from Nov 5 says you updated code on the "original answer" does that mean the original post is updated and I can experiment with that or is there another one I should look for? Link to comment
brandon Posted December 10, 2019 Share Posted December 10, 2019 1 hour ago, NuprinBoy said: does that mean the original post is updated Yes, that's correct. gcart and NuprinBoy 2 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
NuprinBoy Posted December 11, 2019 Share Posted December 11, 2019 Brandon, Thanks again I tested the code and it worked great. My client, however, does not want captions on the grid pages, the y want the grid to be void of text: (see attached) . They want the the text to appear only on the Lightbox instances. Is this possible. And is this what you are referring to when you said: On 10/25/2019 at 5:18 PM, brandon said: If you only want to add descriptions to some (not all) galleries, pass your own CSS selector into addGalleryItemDescriptions() (for example: "section[data-section-id='5db1f73f7a30760db464bb02']") Thanks, I'm new to Squarespace 7.1 and still stumbling through... Link to comment
brandon Posted December 11, 2019 Share Posted December 11, 2019 Hi @NuprinBoy. You understood correctly. You can control which galleries get descriptions by sending a CSS selector to the function. In your case, try this: In the first line of code in the function replace addGalleryItemDescriptions(); with: addGalleryItemDescriptions(".gallery-lightbox"); If that doesn't work, provide a link to the site/page in question and I'll take a look. -Brandon NuprinBoy, marco_k, GretchenElizabeth and 1 other 3 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
hmfedders Posted December 13, 2019 Share Posted December 13, 2019 On 10/25/2019 at 3:18 PM, brandon said: This is really helpful thank you! Is there anyway to have the caption display only on certain images within the gallery grid? In the image below, I'd like to have only the colored blocks display the caption. Right now the images in the grid are pulling in the file name and I'd like those to be transparent. Link to comment
brandon Posted December 14, 2019 Share Posted December 14, 2019 Yes, @hmfedders. You could do something like this, which would hide the description in a specific gallery on every-other item: [data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description { display: none; } Or you could target a list of gallery items individually by using their data-slide-url attribute: .gallery-grid-item[data-slide-url="1m274ar58gglbeuorp6quol3tmkhel-lx99y"] .gallery-item-description { display: none; } Do keep in mind that in the above examples, the data-section-id and data-slide-url would need to be changed to match your website. You can obtain these attributes using your browser's developer tools/inspector. greener and hmfedders 2 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
IvanOB Posted December 31, 2019 Share Posted December 31, 2019 Hi Brandon, have used your code with modified tweaks to have the 7.1 gallery grid masonry captions showing under the images without a coloured border. This works great with the images in the grid style and also when opened into the lightbox view as below. Problem I can't correct is that when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image. The only way i have managed to fix is by making a black box around the caption as shown below. This works ok but it would be neater if I could maintain the same clean style without a background colour border as on the grid files. Is there something you could suggest that would help do this? Thanks Link to comment
SW_2020 Posted January 16, 2020 Share Posted January 16, 2020 This works great, quick question... Where there is a longer description vs a shorter one and the copy is stacked under the image the image gets smaller. Is there a way to keep all images the same size all the time? thanks Link to comment
brandon Posted January 17, 2020 Share Posted January 17, 2020 @IvanOB: I'll take a look and see if things can be tweaked easily. If you can provide a link to an example page, it might speed things up. @SW_2020: This might be doable. If you can provide a link to a page that shows the issue, that'd be great. Otherwise, I'll do what I can to recreate it in my own demo (but that might not be easy). Also, what gallery style are you using? IvanOB 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
IvanOB Posted January 18, 2020 Share Posted January 18, 2020 Hi Brandon, thanks for the offer. In the end I decided not to include captions and keep it clean so i am ok now. brandon 1 Link to comment
AtelierDeux Posted January 20, 2020 Share Posted January 20, 2020 (edited) Hi @brandon Thank you for taking the time to help us all out with this work around! I've just tried using inserting the css code in the site wide custom css injection (first attachment) for a simple slideshow galleries in the the new Classon template and it doesn't appear to have worked... do you have any pointers? I've experimented with the Javascript and that works when injected into the page settings 'Advanced' custom code section (second attachement) but I need a bit more stylistic control over it. When I put the css code into that same 'Advanced' section it then just shows all the code at the top of the page. Please excuse my ignorance if I'm missing something obvious... coding is still very new to me! Basically, I just want to display the image descriptions under the simple slideshow images in a nice was justified to the left of each image. Any help would be HUGELY appreciated! Thank you in advance! Edited January 20, 2020 by AtelierDeux left off attachments! Link to comment
technopaul Posted January 20, 2020 Share Posted January 20, 2020 Hey @brandon this worked so great! I moved the text center of the image. But the only issue I'm seeing is with URL click throughs not working because it seems the text covers the clickable area. Any advice? Link to comment
brandon Posted January 21, 2020 Share Posted January 21, 2020 Hi @technopaul. You could add the following to the CSS, where appropriate (depending on whether you want the rule to apply globally or just to a specific gallery or type of gallery): .gallery-item-description { pointer-events: none; } technopaul, Tesia and GretchenElizabeth 2 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
brandon Posted January 21, 2020 Share Posted January 21, 2020 Hi @AtelierDeux. The reason you're seeing raw code displayed on your site is due to inserting the code in the wrong location. I've updated the original post to include links that explain how to add the code. Note that you have to use both the CSS and the JavaScript together, and insert them both according to the directions. In your case, you're using per-page header code injection which may also work, but best to do as the directions say (and now link-to). StudioKSR 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
AtelierDeux Posted January 21, 2020 Share Posted January 21, 2020 Hi @brandon Thank you so much for getting back to me... I completely misunderstood and this works perfectly now! Your help is much appreciated, thanks again. All best, Ben Link to comment
brandon Posted January 21, 2020 Share Posted January 21, 2020 Great - glad it's working for you @AtelierDeux. Don't forget to support the original post by liking/reacting accordingly! It's a small thing, but good to see how many people it's helping. fiona.sloan 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
AtelierDeux Posted January 21, 2020 Share Posted January 21, 2020 (edited) Done now @brandon, thank you. One last thing... is there a line or two I could insert to adjust the letter spacing and font weight? Edited January 21, 2020 by AtelierDeux Link to comment
brandon Posted January 21, 2020 Share Posted January 21, 2020 Yes, @AtelierDeux. In the CSS where you see ".gallery-item-description", within that scope (within the curly braces), add your letter-spacing rule. It'd end up looking something like this: .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; letter-spacing: .2em; } AtelierDeux 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) 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