WordPress shortcode: Automatically insert image by file name

WordPress shortcode: Automatically insert image by file name

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!

26 Responses

Sachin Khosla

Jul 15 2009 10:51

Awesome, liked it

Freelance Jobs

Jul 15 2009 11:28

Another useful tips for WordPress user.. thanks

Rarst

Jul 15 2009 17:17

@Freelance Jobs

You are welcome.

Kristof

Jul 16 2009 01:50

This is a nice shotrcut. What about an alternate version for inserting images with alignleft or aligncenter ?

Rarsr

Jul 16 2009 05:50

This version already got it. You can choose default align by editing it in code (see align => right) and you can choose specific align in shortcode including it as parameter like [image name=cat align=center]

Tatuaje

Jul 16 2009 07:07

Awesome, I will try it!!

Surfanna

Jul 16 2009 10:09

Hi ! thanks for this tip.
What if I have two different file types, e.g. image.png and a image.jpg file?
Is it possible to distinguish them?

onelargeprawn

Jul 16 2009 17:09

Thanks for the tip

Rarst

Jul 16 2009 17:51

@Surfanna

Sure! [image name=cat ext=jpg]

And (as above with align) you can edit code for preferred default extension.

OkeBanget

Jul 16 2009 19:28

Hmm nice tips, but I still didn’t understand. What benefit is it? We could insert an image by using html code, and we don’t need any function.

Rarst

Jul 16 2009 19:53

@OkeBanget

No benefit for simply inserting image, but lots if reusing same images over and over.

I use some images for icons in multiply posts and I got very sick of looking up image link, inserting it and linking properly every time.

Typing shortcode is way faster and more flexible then pre-made snippets (that are pain to manage by the way).

OkeBanget

Jul 18 2009 05:43

@Rarst,
Owh, I know what you mean, so i don’t need insert the same image each time i published an article. It’s very usefull.. .

Thanks Rarst

annelies

Jul 20 2009 09:14

Hmm, nice tips.
But I don’t mind write the img src= bla bla on each post, since every post has its own image.

anyway, thanks for keep sharing your recipes.

Rarst

Jul 20 2009 10:20

@annelies

As above – this is not for every single image. Just for those that are re-used all the time and in multiply posts.

These recipes are actually snippets from custom code I am writing for new theme. Plenty of things that are cumbersome and not handled by WP so I am going to automate those. Guess it is safe to expect more recipes for me untli I am done with it.

sofia

Jul 20 2009 16:25

thank you for the recipe! (i am learning wordpress on my own and last night i was wondering about displaying an image on a single page)

Rarst

Jul 20 2009 19:38

@sofia

Well, this snippet is bit specialized so I suggest you start with studying common ways to inserts images first. WP docs have decent article on that
http://codex.wordpress.org/Using_Images

used tires

Jul 23 2009 08:29

Pretty neat, I never thought of this as a possibility! I can totally see how this would save time =D

Till then,

Jean

Keiy

Jul 31 2009 10:05

I like the manual way in doing many things with my blog. This tutorial will very helpful for me. Using short code is fun. Thanks

Marvin

Aug 12 2009 16:41

THIS IS REALLY USEFUL
thanks for this iwill definetely try this!

joyologo design shop 2.0

Aug 17 2009 19:20

Awesome, thanks a lot..

Mats

Oct 25 2009 22:37

Awesome. I just heard about shortcodes and this was exactly what I wanted to do. But I don’t have to learn php in order to achieve the result. Thanks a lot!