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