Different Font Sizes in Caption

Support
#1

Hey, using the [caption] shortcode, is it possible to have different sized fonts within the caption itself? For example, I describe a specific location in the photo itself and underneath in a smaller font size have the city/country.

I’ve tried adding separate classes to the specific lines of text, but nothing seems to work.

Thanks in advance.

#2

Hi There,

You can try with this shortcodes:

[caption class="caption-1" id="attachment_1" align="alignright" width="300"]<img src="http://via.placeholder.com/350x150" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]

[caption class="caption-2" id="attachment_2" align="alignright" width="300"]<img src="http://via.placeholder.com/350x150" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]

After that adding the following CSS under X > Theme Options > CSS:

.caption-1 .wp-caption-text {
    font-size: 20px !important;
}
.caption-2.wp-caption-text {
    font-size: 22px !important;
}

Hope it helps :slight_smile:

#3

Unfortunately not. It just displayed the image twice and the captions didn’t change.

I managed to get it to work by adding two separate DIVs with different classes around each group of text in the caption field.

Thanks!

#4

You have to replace with your images and texts.

The shortcodes above are working fine on my end.

Could you please provide us with the page URL contains your caption shortcodes.

Thanks.

#5

Sorry, by the captions didn’t change, I meant the font size. I realized afterwards that it was because the 20px and 22px were too similar, I didn’t look close enough. However, it still displayed two images, each with different sized captions. What I want is ONE image, with two different sized captions.

The top images are what your code is giving me. The bottom one is (almost) what I’m looking for, but the code seems a bit excessive. What I don’t understand in the test page is why the caption border is so large at the top. When I remove the two photos above it, it’s the right size…

http://theseforeignroads.com/_test-items/

#6

Screenshots to clarify what I meant about the border:

#7

Hey There,

The borders of the last image is the result of the uncleared floats used int the first two image. You may update your shortcodes and use this:

[caption class="caption-1" id="attachment_1" align="alignright" width="300"]<img src="http://theseforeignroads.com/wp-content/uploads/2018/04/Blog-Central-America-Steep-Road.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave Caption 1[/caption]

[caption class="caption-2" id="attachment_2" align="alignright" width="300"]<img src="http://theseforeignroads.com/wp-content/uploads/2018/04/Blog-Central-America-Steep-Road.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave Caption 2[/caption]

<div class="clear" style="clear: both"></div>

[caption class="caption-3" id="attachment_6" align="alignnone" width="300"]<img src="http://theseforeignroads.com/wp-content/uploads/2018/04/Blog-Central-America-Steep-Road.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave <br><small>The small caption text</small>[/caption]

As you noticed in the last of the caption shortcode, I have this The Great Wave <br><small>The small caption text</small>. This would create a two rows of text. The second one will be smaller font. You can also define the font size of the texts by using an inline css like this:

<span style="font-size: 22px;">The Great Wave</span> <br><span style="font-size: 14px;">The small caption text</span>

And you will have something like this as a result:

Hope this helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.