[Resolved] Image caption

[Killian]

I want to add an image with its caption to a page.
On a page, I am using siteorigin page builder; in a text widget I have added

<img src="http://artobatours.com/image/ar171035-rock-art-ramon-besso-hunters-cow-1r.jpg" />

which I hoped would bring in the image and automatically add a caption. Should it? http://artobatours.com/

[Leo]

Hi there,

Captions won’t be added automatically if you use the img tag.

This might help: https://www.w3schools.com/tags/tag_figcaption.asp

[Killian]

So there is no option for auto placing of captions? http://www.wpbeginner.com/beginners-guide/how-to-add-caption-to-images-in-wordpress/

[Leo]

That’s using WordPress’ Add Media and I don’t think you can do that for page builder widget.

http://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image

[Killian]

Thanks. If I use
caption /caption
shortcode http://justintadlock.com/archives/2011/07/01/captions-in-wordpress what do I need to add to css to change caption font size etc? I tried .wp-caption-text { font-size: 10px !important; } but this didn’t seem to work.

[Leo]

If you can use shortcode in those page builder widget then the way that link suggested should also work.

It’s still using the HTML <figure> from the code stand point but then you should be able to use .wp-caption-text.

[Killian]

It doesn’t appear to be working for me. In css I am using

.wp-caption-text { font-size: 10px !important; color: red !important; 
}

In the page builder text box I am using

<img src="http://artobatours.com/image/ar171035-rock-art-ramon-besso-hunters-cow-1r.jpg" /> 
(caption shortcode) the caption(/caption shortcode) (this forum is reading [ as code so I've shown it as brackets)

But if I view the source code I see the caption shortcode is being changed to p

<p><img src="http://artobatours.com/image/ar171035-rock-art-ramon-besso-hunters-cow-1r.jpg" /><br />
 the caption</p>

[Leo]

Then those widget might not take shortcode as I mentioned.

So use this method: http://stackoverflow.com/questions/10128950/how-to-write-a-caption-under-an-image

Then you can style it with

figcaption {
    font-size: 20px;
    color: #ffffff;
}

[Killian]

Thanks, that works.

[Leo]

Glad I could help!

[Author]

Posts