DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

Shortcodes are always a good solution when you need to achieve a specific task. In this recipe, let’s see how we can insert an image in a post, simply by using a shortcode and the filename.

The first thing to do is to paste this code on your functions.php file:

function image_shortcode($atts, $content = null) {
    extract( shortcode_atts( array(
    'name' => '',
    'align' => 'right',
    'ext' => 'png',
    'path' => '/wp-content/uploads/',
    'url' => ''
    ), $atts ) );
    $file=ABSPATH."$path$name.$ext";
    if (file_exists($file)) {
        $size=getimagesize($file);
        if ($size!==false) $size=$size[3];
        $output = "<img src='".get_option('siteurl')."$path$name.$ext' alt='$name' $size align='$align' class='align$align' />";
        if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
        return $output;
    }
    else {
        trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
        return '';
    }
}
add_shortcode('image','image_shortcode');

Once done, you can use the image shortcode in your posts. For example, the following line of code:

[image name=cat]

Will insert (with all proper attributes) cat.png from the /wp-content/uploads/ directory.

Thanks to Rarst for his valuable contribution to WpRecipes!

4 Comments

  1. Thank you!! Great recipe. I just wrote up this which might also be useful to some people. It allows you to insert any image from the Media Library via a shortcode. To get the image id, hover over the title of the image in the Media Library list page and look in the status bar of your browser for the number following attachment_id= .

    // SHORTCODE TO INSERT IMAGES IN WIDGETS
    // use [show_image] in pages or widgets
    function show_image_function($atts, $content = null){
    extract( shortcode_atts( array(
    ‘id’ => ”,
    ‘class’ => ‘alignright’,
    ‘size’ => ‘thumbnail’,
    ‘alt’ => ”,
    ), $atts ) );
    $my_image = wp_get_attachment_image_src($id,$size);
    return ”;
    }
    add_shortcode(‘show_image’, ‘show_image_function’);

  2. Will this work if your upload folder is divided into month/year month configuration?

    Thanks

  3. It wil not work with the folder divvied up by month/year, unfortunately. What I did to make this easiest on my clients is use Michelle’s code above, slightly adjusted to include the export of the full img tag. I then also installed the “Reveal IDs” plugin (http://wordpress.org/extend/plugins/reveal-ids-for-wp-admin-25/)

    I configured it to only add an “ID” column to the Media section. So now, instead of a client hovering over the link and getting the ID from the status bar, the ID is printed in the last column when viewing all images in the backend. They can copy it from there, and paste it right into the shortcode.

  4. Thanks for this. To get around the directory problem, I’ve created a folder within the uploads root and just ftp to that.

    I would like to be able to easily include external links with inserted images at the same time. Is there some code that I can add within the shortcode to enable me to easily insert a link at the same time?

Leave a Comment

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