WordPress Media Shortcode Explained

Inserting images in your posts or pages is quite easy in WordPress using the Add Media button. This post is meant to explain how the WordPress media shortcode is populated with the information from your media library.

Take a look at the image below. The body of the post as shown in the Text Editor is on the left side and the image (attachment) details is on the right side. I color coded the media gallery fields with their corresponding placement in the media ( [caption ] ) shortcode.

How to read a media shortcode in WordPress.

1. Title (red) – used in the anchor tag (< a href=”…) and again later in the image tag (< img src=”…). The text you enter in the Title field is used to name the image file. Avoid using titles like image1 or photo2 instead follow Google’s SEO Best Practices and use more descriptive names as I did in this example – “Bee in Wisteria.”
2. Caption (blue) – used as the actual caption of the image
3. Alt text (yellow) – used as the alt attribute of the image tag. This text will appear if for some reason the image is unable to download to the visitor’s browser. Again, use brief but descriptive terms.
4. Alignment (orange) – used in the caption tag ([ caption ] ) is used to designate how the image will be aligned on the page with regard to the text that surrounds it. In this particular case the image will appear to the right of any text on the page.
5. Link To (green) – this option is used if and only if you want the image to be a hyperlink, i.e. your site visitor can click on the image to bring them elsewhere. If you do not want the image to be a hyperlink, select None from the drop down list box. Your link to options are as follows:
   • Media File – when the visitor clicks on a link to the Media File, the full size image will appear within the browser.
   • Attachment Page – when the visitor clicks on a link to the Attachment Page, the image will display similar to how a post would appear on the site with a title, image and description.
   • Custom URL – if you would like your image to link to another page on our site or anywhere else on the internet, select this option and enter the URL. Your site visitor will be brought to that page when they click on the image.
   • None – choose this option, if you would like to embed the image without a hyperlink.
6. Size (purple/pink) – select the size of the image you would like embedded in the page.

The shortcode used in the illustration above would be rendered on the page as shown below. Notice the 200px x 300px image is aligned to the right of the text with a caption beneath. Click on the image to display the media file.

Example of Media Shortcode Rendered on a Post.

If you would like to see how the different linking methods work, please go to this media shortcode demonstration page.

I mentioned Google’s SEO best practices in this article. If you would like to read the entire document, you can find Google’s Search Engine Optimization Starter Guide Here.