Gallery Caption workarounds for 7.1?

Wonderful @brandon ! It is a really good start ! The coding world is new for me, but very pleasant 🙂 

Thank you !

No problem @Charlest93. Don't forget to post a like/thank on helpful posts.

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

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.

Hey @brandon thanks for this information, really helpful. I was wondering how to apply this to a gallery grid block. I want to display the product descriptions below images in a grid gallery block. 

Website: https://totaljoy.co/shop

PW: 28031998

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.

hi @brandon ! Everything worked perfectly, thanks again ! 

Finally I only want to use your tutorial for these two pages: https://bumblebee-drum-w3fz.squarespace.com/interiordesign and https://bumblebee-drum-w3fz.squarespace.com/productdesign 

So I tried to add the css selector into the javascript as you told us in your tutorial. But it is not working. Do you know why ? 

Thank you !

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

@gabmartinez7: Try adding the JS via a markdown block in the footer of your site.

This plug in reinstates all the gallery 7.0 options. Super easy. 

https://www.ghostplugins.com/steps/9ehnk49g

@brandon thanks so much, this has worked!

You've been a lifesaver thankyou 🙂

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!

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?

@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?

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? 

@noemipossible11 and @douglasmcg: I'll try to come up with something for you in the next week or so. I've got some ideas.

@lisagravy: Can you provide a link to the page in question?

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";
}

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>

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!

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?

Hi All,  Is there any way to create a border with a title + description + button in the slide-gallery like below screen.

my sitelink

https://www.infinityhk.org/

PW: abcd1234

Here is

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. 

@tuanphan

Sorry for the delay and thank you! My link is: https://coral-icosahedron-7rhx.squarespace.com/ and pw: NOTREADY100

UPDATE: I think I have resolved this. Thank you for your help! I will reach out again if any issues come up.

Brandon. Thank you so much for this. I got it to work in Google Chrome, but the titles do not show up in Safari. Is there code I need to add to be able to see them in that browser?

Thank you @brandon!! This workaround was great for me. Tweaked the CSS a bit to fit style of my site.

THANK YOU SO MUCH