If you use the WordPress media library you can add captions to images by using the media library options provided.
But if your images are hosted externally, say on Amazon S3, that option may not be open to you.
Fortunately, the HTML code for captioning is very easy to do.
- Get The URL Of Your Image
- The first step is to have the URL of the your externally hosted image at the ready – so here is mine. It’s a photo of my dog Reina.
- Write The Figure HTML
- Next you must write the first bit of HTML using the Text Editor, not the Visual Editor. (I never use the Visual Editor.) All you do is write the following – an open figure tag followed by a close figure tag.
- Add The Image HTML
- Next you must add the image HTML tags, along with the necessary tag attributes of src, alt, height and width, like this. If you do it this way, you are less likely to get the wrong number of double-quotes. They are all in place and you can just fill them in afterwards.
- Add The Image URL
- Next, place the URL to the externally hosted image in the image tag at the src attribute, and and also supply the alt value and the width and height of the image itself.
- Add Caption Tags
- The next step is to add caption tag. It goes inside the figure tags. You can put it after the img tag if you want the caption above the image, or after the img tag if you want the caption to appear below the image.
I will put it after the closing figure tag.
- Add Caption Text
- Next you simply place your caption text in between the figcaption tags. Like this.
This results in my image looking like this :
You can style the tags figure and figcaption as you wish. In my case as you can see below the photo of Reina, I have styled figcaption to be red, and in italic and with a slightly smaller font size.