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

Gallery Caption workarounds for 7.1? ROUND TWO


dan3

Recommended Posts

Ah, sorry about @Charlest93. I forgot you had already sent a link earlier in this post. Also, your English is much better than my French!

What you want can be accomplished with CSS alone. However, it does require an understanding of it, and being comfortable using your browser's web inspector to identify elements and get them looking like you want.

I've written some additional CSS you can add that should help you get a start on it. However, while you can certainly add the following CSS after what you already have, it'd be better to review it and edit your existing CSS to minimize overlap.

@media screen and (max-width: 767px) {
  .gallery-grid-item {
    padding-bottom: 0;
    margin-bottom: 30px;
  }
  .gallery-item-description {
    padding: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    bottom: inherit !important;
    font-size: 1em;
  }
}

Let me know how that works for you.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post
  • Replies 165
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 sup

Has Squarespace hinted at when they will make image captions readily available? It's ludicrous that it's not, knowing Squarespace has a trillion sites requiring this very basic feature. 

This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post.

Posted Images

Hi @brandon I have entered the description but its only showing the image names.

https://krill-iguana-d93r.squarespace.com/

The site isn't live yet, pw: themissing

You'll see the slideshow near the bottom, with some of the pictures showing their file name (they all have file names but some of the photos cover up the name if they're bigger than the other images).

 

I could even give you access to my site if that would help get it working?

I am desperate. Thanks

Link to post

On that page, it looks to me like captions are showing, not filenames @gabmartinez7. It seems you got that sorted.

As to the overlapping of the description over the image, that's a matter of adjusting the CSS. I'd use a combination of font-size, line-height, and flexbox to get things looking better. I might also override the overall height of that gallery (currently set at 75vh).

If that doesn't give you enough to get things the way you want, send me a direct message.

 

 

image.png

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

Hi @totaljoy. It looks like that gallery block was added using a third-party extension and not using 7.1 galleries, so this thread and the code here won't apply. I'd recommend contacting the maker.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post

Hi @brandon, I had the captions working while my site was unpublished. I have now published it live on a 'Personal' subscription level, and its taken the descriptions off. For any coding it says I need to upgrade to atleast the 'Business' level of subscription.

Is there a way around this? Or can this only be done at the Business level and about?

Website: www.themissingpodcast.com

Link to post

Hi @brandon Thanks so much for all the insight. I have used the code for the masonry grid; I have hid the captions so they only appear in light-box once the image is clicked and thus opening the slideshow. I am wondering what CSS code to use/I can use to adjust the size of the image? I've attached a screenshot for reference. You'll see how the caption is much wider than the actual image, which is completely fine if I can somehow get the image to either fill the entire screen or simply be bigger. Thanks in advance!

Screen Shot 2020-05-09 at 2.47.49 AM.png

Link to post

Hey Brandon,

Thanks so much for your help on this issue - I've added your code to my site and I'm happy with how its looking.

Is it possible to create two lines for the description?

Link to post
Posted (edited)

@brandonI'm desperately trying to get this to work and it's not for some reason? I need a gallery as I want to use the autoscroll function. But have inserted the code in the footer injection and also the CSS, and it's not working - it seems to be adding the original filename (including .jpg!) under any image with no title in the gallery settings, and if a title is included, nothing is displayed.

Any ideas?

 

Edited by lisagravy
Link to post
1 hour ago, lisagravy said:

@brandonI'm desperately trying to get this to work and it's not for some reason? I need a gallery as I want to use the autoscroll function. But have inserted the code in the footer injection and also the CSS, and it's not working - it seems to be adding the original filename (including .jpg!) under any image with no title in the gallery settings, and if a title is included, nothing is displayed.

Any ideas?

 

Ah! Actually I've got it to work.... kind of! It works for landscape images, but for portrait, the image is overlaid on top of the caption, so I can't read it? Can I move the caption to the bottom of the image, and make sure it is on top? 

Link to post
Posted (edited)

Wondering if there is a way to get two lines so there is a title and then a description on the second line?

I've used this in 7.0 and did try to change the class to .gallery-item-description to try and make it work but no luck.

 

I see that @douglasmcg is also looking.

 

Below does not work but may be close?

 

<script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.gallery-item-description');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/@/g, '<p>');
  }
});  
</script>

 

Edited by junger
Link to post

If anyone is interested in doing this without code injection, you can hard-code them in the custom CSS as follows:

/* Sets up an animation to fade your captions in */
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* makes the captions centered */
.gallery-grid-wrapper .gallery-grid-item {
  text-align: center;
}

/* Styling for all the captions */
.gallery-grid-wrapper .gallery-grid-item:after {
  display: block;
  font-size: 80%;
  margin-top: .5em;
  opacity: 0;
  animation: 1s ease-out 1.5s 1 forwards fadeIn;
}

/* These are the captions for each gallery item */

.gallery-grid-wrapper .gallery-grid-item:nth-child(1):after {
  content: "Caption for the first gallery item";
}

.gallery-grid-wrapper .gallery-grid-item:nth-child(2):after {
  content: "Caption for the second gallery item";
}

.gallery-grid-wrapper .gallery-grid-item:nth-child(3):after {
  content: "Caption for the third gallery item";
}

 

Link to post
Posted (edited)

This was hugely helpful. Did anyone ever figure out how to get the filenames to show up without the extension? I tried to figure it out from looking at the javascript that @brandon posted, but I don't really know what I'm doing.  

If anyone has figured out how to get the default description to show "filename" instead of "filename.jpg" I would be forever grateful as it would save me a LOT of copy/pasting 😉 

UPDATE: I asked a friend (who knows JS), and He tweaked the code to show filenames without extensions. In case anyone else is trying to accomplish the same thing: 

 

<script>
	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.replace(/\..+$/,'');
							f[j][b('0xd')](h);
						}
					}
				}
			}(gs, gdzs));
		}
	});
</script>

 

Edited by elstevedore
Link to post

Hello! Is there any way to accomplish descriptions on hover w/ masonry gallery without using code injection, just CSS? I'm reading through all of the posts and playing catch up, so please forgive me if I missed something. Very new to all of this!

 

Thanks!

Link to post
9 hours ago, goosegoosegoose said:

Hello! Is there any way to accomplish descriptions on hover w/ masonry gallery without using code injection, just CSS? I'm reading through all of the posts and playing catch up, so please forgive me if I missed something. Very new to all of this!

 

Thanks!

Yes. You can. I solved 3 same questions recently. Can you share link masonry page on your site?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Hi @brandon, amazing workaround!

Implemented your code without issue. However, I am working on an artist site and desperately need to be able to italicize certain words. Someone else asked this but never saw any resolution. Is there a way to add <i> italics into the captions or <br> line breaks? 

Any insight you have is greatly appreciated. 

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...