[Resolved] Customizing gallery & image caption text

[Stefan]

Hi GP,

I would like to style my gallery and image captions so I don’t have to do it manually each time.

It would be nice if the font size would be 14pts and italicized. There could be padding as well (around 10 px between the caption and the image and 20px between the caption and the paragraphs that follows after the image).

Please see the screenshot for a reference of what I would like to edit.

Looking forward to your response.

Regards,
Stefan

[Ying]

Hi Stefan,

Can you link us to the page in question?

You can use the private information field.

Thanks!

[Stefan]

Hi Ying,

I shared the link in the private section.
The first image is the benchmark. I inserted the text in the “Gallery Caption” section of the GP Block. I would like to do the same for all remaining images (starting from the second one on the page) and standardize the captions across the website.

I noticed the way I did the captions do not show well on mobile.

Regards,
Stefan

[Elvin]

Hi there,

You have 2 types of figcaption. One is .blocks-gallery-item__caption and the other one is .blocks-gallery-caption em which is the one on your screenshot.

Do you want all to have the same style or only the one specifically on your linked image?

Let us know.

[Stefan]

Hi Elvin,

I am not sure what’s the difference between the two, but we can test and figure out what’s the difference. I would like to use the same style for all images, not just the one I linked.

Regards,
Stefan

[David]

Hi there,

any reason to use the Gallery Block for a single image?

[Stefan]

Hi David,

Good question. In nutshell. It’s a workaround because the caption features does not work as intended or expected.

I am used to working with captions in Word. Once I insert a caption, it always works and in the off chance it does not display the way I want it, I know how to fix it. However, in WordPress, there seems to be a need for some unnecessary code trickery, which I don’t see the logic in it. In Word, it will not matter if the text expands or not, the caption box will accommodate any change in font size and will always remain below the image. All the text will be clearly visible and the full picture will be visible. The added benefit is that in Word, the figure numbering will be automated as well and I will not have to manually change the numbering should I decide to change the order of the images. Please see the screenshot: https://i.imgur.com/RNYFz5L.png

Since I am using WP, let’s get to the discussion of using some code trickery to get these features to work as intended. I welcome all reasonable suggestions as long they are simple and do not cause unnecessary bloat that slow down the website.

Why Single Block Fails?
Single Block captions displays all text in a single line even if there is two or more lines of text. Please see the screenshot: https://i.imgur.com/7Fv2y2x.png

Why Gallery Block Fails?
The caption option in the Gallery Block does not do this. However, on mobile, if the caption is longer than it takes up the whole space of the image, hence the image is not visible. Please see the screenshot: https://i.imgur.com/acABTkq.png

I look forward for a suggestion to bring the functionalities of the caption in a more automated fashion (similar to Word).

One workaround is to just post a paragraph below the image and manually adjust the font style, size and type for every single image I upload. This makes sense if the blog is going to have a handful of blog posts, not hundreds or thousands as planned.

[David]

The Image Block should be used for single images, the problem with the multi-line caption not wrapping to new lines is because the text is missing its line-height…. which means something is interfering with that. If you set up a test Image Block with multi-line caption i can take a look to see whats causing that.

[Stefan]

Hi David,

I see it makes sense. Here’s a link to a blog post. Please refer to the first image.

Looking forward to your help.

Regards,
Stefan

[David]

I am seeing this CSS on your site – its in the Customizer > Additional CSS:

figure.wp-block-image {
    line-height:0
}

Delete that CSS rule.

[Stefan]

Hi David,

Thanks for the help. It works.

I have two simple follow ups regarding the image gallery. I tried playing with CSS myself but failed:

1) Using the Single Image block, I would like to limit the width of the pictures to 700px (now they expand to 780px to fit block), but retain its height aspect ratio.

`img {
width: 100%;
max-width: 700px;
}

2) How can I increase the fontsize of the captions?

Regards,
Stefan

[David]

1. the images on the post you provided a link to are being displayed at 700px. The only reason why they would expand wider is if the Image Block has the Wide Width option enabled in the Blocks toolbar.

2. You would need to add this CSS:

.wp-block-image figcaption {
    font-size: 15px;
}

[Stefan]

Hi David,

1) Regarding point 1, please see the link from below. When I used the Gallery block the image would be resized to fit the block (700 px max width). Now, with the Single Image block, it’s resizing the image less than the block.
– Is there a way to make images be 700px max width (even if they are smaller or larger than that) and centered?

2) Thank you. It works.

[Elvin]

Hi there,

Have you sorted #1? I’ve checked your site and since it’s main content is set to max-width 780px with 40px padding, all the contents including images will have a max-width of 700px (780px – 40px – 40px) regardless if you specified the img max-width or not.

Let us know.

[Stefan]

Hi Elvin,

Regarding point #1, thank you for following up and confirming.

There’s a little wrinkle, what happens if the picture is smaller than 700px width?

Is it possible to resize its width up to 700px, while maintaining its aspect ratio? I tried using the “wide width” setting, but it fills the width of the main content (780px). I prefer to keep the images to max 700 width, regardless if they are narrower or wider than 700px.

Please refer to the links below.
https://www.lifestyledemocracy.com/how-is-the-revolution-will-not-be-televised-poem-relevant-today-2-2/
https://i.imgur.com/p5i1K0x.png

Regards,
Stefan

[Author]

Posts