Using ExpressionEngine Image Manipulation in Templates

| In Content Management Systems, ExpressionEngine | by Jerry Price

Since version 2.2, ExpressionEngine has integrated some image manipulation into its file management module. This includes resizing images and creating thumbnails with support for the three major image manipulation protocols: GD, NetPBM, and ImageMagick. This means that when adding images to your site you can set multiple sizes and aspect ratios for creating thumbnails. You also have the option of creating watermarks on the images.

The requirements are, of course, EE 2.2+ and PHP with one of the image manipulation protocols listed above. To create your own thumbnails, first you need to set up a new upload destination.

In the settings for the new destination near the bottom are the rules for creating additional images. The fields to set are short name, height and width. You can use the Resize Type dropdown to constrain or crop the image and the Watermark dropdown to create a watermark. Remember the names of each short name you create because this is how we will access the thumbnails that EE generates later in this article.

* Leaving height or width blank will allow you to not change the aspect ratio of the image.

Once the upload directory is set and you have a channel ready, publish a new entry and upload a new image. As the image gets uploaded the additional images are automagically created. If you already have entries with images that you would like to use, click on the synchronize icon from the File Upload Preferences page and then click submit on the following form. This will scan all images in the directory and create the extra images using the rules.

Now it’s time to change or create the template code to use the new images. Here is sample code for a basic blog with images.

{exp:channel:entries channel=”blog”}
    <h1>{title}</h1>
    <img src=”{blog_img}” alt=”blog_img” />
    <p>{blog_content}</p>
{/exp:channel:entries}

All you will need to do to use the new images is to change the {blog_img} single tag to a tag pair and type in the short name of the image you would like to use prefixed with an underscore. This is to direct the file path to the newly created image. This works because EE creates a folder for all of the thumbs it creates for each Short Name by using the short name plus an underscore (ie. _nameyoumake).

{exp:channel:entries channel=”blog”}
    <h1>{title}</h1>
    {blog_img}
        <img src=”{path}_shortName/{filename}.{extension}” alt=”blog_img” />
    {/blog_img}
    <p>{blog_content}</p>
{/exp:channel:entries}

Using this method you can create multiple images to use in different parts of the page using the default EE install. This can help keep image file sizes small to decrease page load times and use thumbnails for an image gallery. EE, by default, creates an 100x100 thumbnail called thumbs in the directory _thumbs.  For a more customized image process, I recommend CE Image.

*We have also created a CE Image extension to extend the function not only to file field types but to all images within a text, textarea or wygwam field type. Send us an email if you are interested in beta testing.

7 Comments

Picture of Dan Blake

Dan Blake

I did not know any of this, certainly wish you wrote this article about 2 months ago.

Picture of Stevan Fickus

Stevan Fickus

I wish we know about it months ago and that EE had it months ago

Picture of Paul Frost

Paul Frost

I have struggled to find a good method for including images in EE2 and even Assets from Pixel & Tonic isn’t perfect (no resize on upload option). So am intrigued as to where this tag info is in the EE user guide?
I have tested the method and it works (for anyone else confused, { blog_img } is a channel custom field you need to create).
Now to get a copy of the CE Image extension and see how that works…

Picture of Paul Frost

Paul Frost

I’ve now tested the EZ Image Resize extension and think it’s fantastic!
I can’t believe it has taken so long to make adding images to a wysiwig field an idiot proof process.
This is going to change the way I build websites from now on.

Picture of Jerry Price

Jerry Price

Thanks for the feedback Paul. You last comment was buried beneath lots of spam, I hope to have that fixed soon.

Picture of Kurt Trew

Kurt Trew

I’ve been using Dev Demon’s Channel Images for this. Hmmm. Thanks for the tip :0)

Picture of Derek Hogue

Derek Hogue

I believe that this syntax is supposed to work. But it doesn’t when I last tested. But it should!

{blog_img}
    {square_file_url}
    {rectangle_file_url}
    {thumb_file_url}
{/blog_img}

Much simpler than hobbling together the file paths with several variables.

Leave a Comment

Commenting is not available in this channel entry.