denisebmitchell 1 Share Posted December 9, 2020 @tuanphan Thank you - have email the details to you! Thanks so much. Link to post
pixolnaut 0 Share Posted December 13, 2020 Has there been an answer on how to add line breaks to the caption in lightbox? I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon. Currently the lightbox display looks like this: I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery: Thank you in advance! Link to post
tuanphan 9,330 Share Posted December 13, 2020 1 minute ago, pixolnaut said: Has there been an answer on how to add line breaks to the caption in lightbox? I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon. Currently the lightbox display looks like this: I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery: Thank you in advance! try add br tag Quote Clouds Over Ai Petri <br/>Oil on Board<br/> 2017 You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
pixolnaut 0 Share Posted December 13, 2020 (edited) @tuanphan I've tried the <br> tag but that only adds the line break in the default caption and not in the lightbox caption. Any other ideas? edit: I've found a janky workaround by using a 3 per em whitespace unicode to organise the text in the caption abit better. It's a little weird but it's the only thing that I've found to affect formatting in the caption. https://qwerty.dev/whitespace/ Unfortunately line break unicodes I've found do not work. Where I am at, at the moment: It looks decent in mobile view but you have to fiddle around with the exact number of blank unicodes to insert. Not ideal but it does the job for now. Edited December 14, 2020 by pixolnaut Placeholder solution Link to post
ShaneV 2 Share Posted December 14, 2020 <script> document.addEventListener("DOMContentLoaded", function() { function render(checked, index) { (function(p, show) { var map; var values; var messageValue; var messages; var name; var type; var k; map = document.querySelectorAll(p ? p : 'section.gallery-section,\x20.gallery-lightbox'); name = map.length; for (; name--;) { values = map[name].querySelectorAll(show ? show : '[class*=\x27-item\x27]:not([class*=\x27item-\x27])'); type = values.length; for (; type--;) { messageValue = values[type].getElementsByTagName('img')[0]['alt']['trim'](); if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false) { messages = document.createElement('div'); messages.className = 'gallery-item-description'; messages.textContent = messageValue; values[type].appendChild(messages); } } } })(checked, index); } render(); }); </script> Here is an deobfuscated version of the original script. It works the same but is much more human readable. It also does not include image file names if they end in "png" or "jpg." tuanphan and Mieke 2 Link to post
Mieke 3 Share Posted December 17, 2020 (edited) On 12/14/2020 at 9:40 AM, ShaneV said: Thank you @ShaneV, works great! I needed and added a .gif exclusion in the script ;^) if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false && messageValue.includes("gif") == false) Edited December 17, 2020 by Mieke Link to post
AlphonseTheMagnificent 0 Share Posted January 5 On 10/25/2019 at 11:18 PM, brandon said: 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 Hi Brandon - 5/1/2020 - the link to the demo site you've supplied says it has 'expired' - is there any way to resuscitate it? - Thanks, Mark Link to post
bangank36 702 Share Posted January 6 On 12/13/2020 at 5:19 PM, pixolnaut said: Has there been an answer on how to add line breaks to the caption in lightbox? I don't know anything about coding but have gotten close to what I'm looking for using the code provided by brandon. Currently the lightbox display looks like this: I would like it to look like how it does in the default galleries caption like this, but to have this only in the lightbox and not in the normal gallery: Thank you in advance! Could you share your url? Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, Geolocation Automatic Currency Converter, Sortable Table from GSheetIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to post
Misanthropology 1 Share Posted January 15 Is possible to add captions to the lightboxes in a gallery using CSS? bangank36 1 Link to post
bangank36 702 Share Posted January 15 1 hour ago, Misanthropology said: Is possible to add captions to the lightboxes in a gallery using CSS? It should require Custom js, with business plan or higher Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, Geolocation Automatic Currency Converter, Sortable Table from GSheetIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment