• Skip to main content
  • Skip to footer

EqualServing

WooCommerce, ActiveCampaign, 1ShoppingCart, Infusionsoft Expertise.

  • Services
    • Build Websites
    • Task Automation
      • ActiveCampaign Marketing Automation
      • Process Automation with Infusionsoft
    • Website Content Migration
    • Service Bundles
    • Third Party Software Integration
    • WordPress Plugin Development
  • About Us
  • Contact
  • Blog
  • Shop
    • Service Bundles
    • WordPress Plugin For 1ShoppingCart.com V2.0
    • WordPress Themes
    • All Our WordPress Plugins
  • Support
    • FAQ – 1ShoppingCart Plugin For WordPress – GENERAL
    • FAQ – 1ShoppingCart Plugin For WordPress – FREE
    • FAQ – 1ShoppingCart Plugin For WordPress – PREMIUM
    • Contact Support
You are here: Home / Wordpress / Wordpress Media Shortcode Explained

WordPress Media Shortcode Explained

May 2, 2014 by Michele Leave a Comment

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.

Explanation of WordPress Media 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.
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.

Filed Under: Wordpress, Wordpress Explained

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Stay Connected

Stay up to date with the latest news, product announcements, and more by signing up for our email newsletter. Don't forget to follow us on your favorite social sites as well.
  • Email
  • Google+
  • LinkedIn
  • RSS
  • Twitter
  • YouTube

Contact Us

EqualServing

46 Amethyst Rd
Palmyra, VA 22963

727-490-7443 https://www.equalserving.com/wp-content/uploads/2013/11/eslogo_300x60.png $$
Email :: Plugin Support
  • ActiveCampaign
  • How To
  • WooCommerce
  • WordPress Explained
  • Resources and Recommendations

Copyright © 2021 · Web Development :: EqualServing.com on Genesis Theme Framework
» You will find affiliate links on this site. When we find a company or individual that consistently delivers a high quality product or service, we will become an affiliate. «