Gallery Grid - Show title and description

Hi,

I need help with some custom CSS code please. I would like to have image title and description details display under all images on my blog posts when using 'Gallery > Grid'.

I achieved the desired title and description below images using 'Gallery > Stacked' however I need the images to appear side by side on mobile which can only be achieved using the 'Gallery > Grid' option

Possible solutions/workarounds that would help me

• CSS for showing image titles and descriptions when using 'Gallery > Grid' + CSS to edit text style so that it aligns right and the fonts/font sizes matched the rest of the website.
• CSS for stacking images (but only for the cluster of 4 images) side by side on mobile view for 'Gallery > Stacked'

'Gallery > Grid' - desktop view 

Title displays but not the description. I need the titles and descriptions to be aligned right with the style format of the 'Gallery > Stacked' example below.

'Gallery > Grid' - mobile display

'Gallery > Stacked' - desktop view 

'Gallery > Stacked' - mobile view

@tuanphan I've tried a lot of your responses on other topics to try and solve this, would you be able to help with this please? Thanks!

Hi,

What is site url? We can check easier

Thank you!

URL: semicircle-pentagon-ate6.squarespace.com

Password: hellowebsite10

@tuanphan

This is the blog post https://semicircle-pentagon-ate6.squarespace.com/config/pages/64b7df34b40be065681947de

14 hours ago, DJX said:

This is the blog post https://semicircle-pentagon-ate6.squarespace.com/config/pages/64b7df34b40be065681947de

/config is url for site owner

You can click arrow on top left or top right of edit mode >> Real url will appear on browser address bar

Sorry @tuanphan, here's the site URL https://semicircle-pentagon-ate6.squarespace.com/

And the blog URL: https://semicircle-pentagon-ate6.squarespace.com/home-accessories/blog-post-title-four-lfwbs-ypbgd

Thank you for taking a look!

Hi,

You want this side by side on mobile?

I'd like the titles and descriptions to show below images when using 'Gallery > Grid'

And CSS to edit the image title and description so it matches the text attached.

Thanks!

Gallery Block Grid doesn't support Description. To make description in backend appear outside, you will need to use custom code.

First, add this to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<style>
  .image-slide-title em {
  	font-style: normal !important;
    display: block !important;
  }
</style>

Next, when you enter title, you can use this format

Coffee title <em>enter description here anything what you want</em>

Thank you @tuanphan the code worked, however I need the title & description to have different fonts and the description to have hyperlinks so I wont work unfortunately and I'll need to use the gallery > stacked block option.

Do you know how I can display the 4 smaller images in the gallery > stacked block in 2 columns on mobile (like it displays for gallery > grid block below) please? Across the whole site, not just for one section.

Thanks

You mean this section?

I think you should enter names, eg stacked,...for sections, so it will be easier to find.

Hi @tuanphan sorry for any confusion. Please see image below - I'd like the cluster of 4 images to show side by side on mobile but the single large images to stay as they are. I'll be doing this on multiple pages so ideally the CSS code can apply sitewide instead of just the 2 sections below.

Thank you!

Hi @tuanphan I managed to solve it with some HTML & CSS. I you have time please could you take a look and let me know if the coding is okay? https://semicircle-pentagon-ate6.squarespace.com/home-accessories/blog-post-title-one-yx3l3

Thanks!

On 8/5/2023 at 3:33 AM, DJX said:

Hi @tuanphan I managed to solve it with some HTML & CSS. I you have time please could you take a look and let me know if the coding is okay? https://semicircle-pentagon-ate6.squarespace.com/home-accessories/blog-post-title-one-yx3l3

Thanks!

Hi. The site is private now, I can't access it

Hi @tuanphan,

I am adding a grid to my site. I would like the title, description with link to appear underneath the images and used your code (above), but it's not working correctly. (see screengrab)

This is the site https://vanilla-sawfish-kk9x.squarespace.com/meditations-1.

I need:

 - customise the title font
- Customise the description font
- Show title
- Show description
- Show link

Thanks
Laura

On 3/1/2024 at 9:58 PM, dotandpeg said:

Hi @tuanphan,

I am adding a grid to my site. I would like the title, description with link to appear underneath the images and used your code (above), but it's not working correctly. (see screengrab)

This is the site https://vanilla-sawfish-kk9x.squarespace.com/meditations-1.

I need:

 - customise the title font
- Customise the description font
- Show title
- Show description
- Show link

Thanks
Laura

 

Add to Page Header Code Injection

<style>
  .image-slide-title {
    font-size: 26px !important;
    white-space: initial !important;
    overflow: visible !important;
}

.image-slide-title em {
    font-size: 20px !important;
}

.slide a:after {
    content: "read more";
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: #fff;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 50px;
}
</style>

Hi @tuanphan, 

Thanks for your response but I have decided to use a gallery section with the items all on individual cards and that seems to work well and is good for being responsive on mobile. 

@tuanphan

Hi there, I am having trouble finding the right code above for my situation. 

I would like my description to display under the title, which includes a link to purchase. I am not able to stylize or link in the title, so the <em> solution will not work for me. 

I would use the stacked gallery, however I will the 2 column and would like to keep them all in one gallery if possible, without having to put two stacks next to eachother.

If I am missing a simpler solution, please let me know, otherwise any advice on code for this situation?

URL: https://www.danshornstein.com/portfolio/recent-paintings

On 8/2/2024 at 11:51 PM, kkester said:

@tuanphan

Hi there, I am having trouble finding the right code above for my situation. 

I would like my description to display under the title, which includes a link to purchase. I am not able to stylize or link in the title, so the <em> solution will not work for me. 

I would use the stacked gallery, however I will the 2 column and would like to keep them all in one gallery if possible, without having to put two stacks next to eachother.

If I am missing a simpler solution, please let me know, otherwise any advice on code for this situation?

URL: https://www.danshornstein.com/portfolio/recent-paintings

Hi,

#1. To add link, we can use <a> tag

Something like this to title

Crab Creek on Shelter Island, Oil on panel, 9 x 12 in. <a href="https://amazon.com">Purchase now</a>

If you can't make it work, let me know, I will write a quick guide for you

#2. You can add stack, if you need to make it 2 columns, I can give CSS code to do this.

On 8/4/2024 at 4:39 AM, tuanphan said:

Hi,

#1. To add link, we can use <a> tag

Something like this to title

Crab Creek on Shelter Island, Oil on panel, 9 x 12 in. <a href="https://amazon.com">Purchase now</a>

If you can't make it work, let me know, I will write a quick guide for you

#2. You can add stack, if you need to make it 2 columns, I can give CSS code to do this.

@tuanphan Thank you that helps! Can you show me the CSS for the 2 columns stacked? I think that may be a good option

On 8/5/2024 at 7:22 AM, kkester said:

@tuanphan Thank you that helps! Can you show me the CSS for the 2 columns stacked? I think that may be a good option

Can you add stacked gallery first? I can check code easier

15 hours ago, tuanphan said:

Can you add stacked gallery first? I can check code easier

@tuanphan Its updated now as a stack. Thank you. 

https://www.danshornstein.com/portfolio/recent-paintings

On 8/7/2024 at 6:31 AM, kkester said:

@tuanphan Its updated now as a stack. Thank you. 

https://www.danshornstein.com/portfolio/recent-paintings

Use this code to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('div#block-bb9d7bb12e0facfa808e .image-wrapper').each(function(index) {
  $(this).append($('div#block-bb9d7bb12e0facfa808e .meta').eq(index));
});
});
</script>
<style>
div#block-bb9d7bb12e0facfa808e .sqs-gallery {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 20px;
}
</style>

20 hours ago, tuanphan said:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('div#block-bb9d7bb12e0facfa808e .image-wrapper').each(function(index) {
  $(this).append($('div#block-bb9d7bb12e0facfa808e .meta').eq(index));
});
});
</script>
<style>
div#block-bb9d7bb12e0facfa808e .sqs-gallery {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 20px;
}
</style>

It seemed to work at first, then I tried applying to other galleries. It didn't quite work, so I went back to this original code above and now it appears that the caption is now in the second column. 

I am looking to use this on the following blocks: 

#block-bb9d7bb12e0facfa808e, #block-eac0a3f227712fd3780f, #block-332e8b88c3635c13f70d, #block-185bce822bbb5e4a80d2, #block-yui_3_17_2_1_1718563421008_69897, #block-a91c6ae5ea4f517e8773

And I would like it to appear as one column on mobile.