Archived topic
Image caption
9 replies · Started by Killian on May 13, 2017
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/
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
So there is no option for auto placing of captions? http://www.wpbeginner.com/beginners-guide/how-to-add-caption-to-images-in-wordpress/
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
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.
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.
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>
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;
}
Thanks, that works.
Glad I could help!