Jump to content

Gallery Grid - Show title and description

Recommended Posts

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.

image.thumb.png.b082e1389ebadf4654bd009468beeb7a.png

'Gallery > Grid' - mobile display

image.png.856945ed9d9ee2e274a39396661cdcc0.png

'Gallery > Stacked' - desktop view 

image.thumb.png.ffe05a806340305edfb5fb88a88bdf1c.png

'Gallery > Stacked' - mobile view

image.thumb.png.7ed2814276c86ca5409bf1061f259b46.png

Edited by DJX
Spelling error
Link to comment
14 hours ago, DJX said:

/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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

image.thumb.png.e0047121dae8f52f34969059d69fe131.png

Thanks

Edited by DJX
Image
Link to comment

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!

image.thumb.png.5da360fc916d4654fc29eec6c98ff93d.png

Edited by DJX
Image
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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

 

Screenshot 2024-03-01 at 14.56.40.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.