Reduce image file size with Img Tag Modifier and PhpThumb

April 15th, 2009 in ExpressionEngine | Tutorials | add comments

Have you ever told your client, resizing images in WYSIWYG field doesn't mean that image file size will be reduced too. Well I have, many times! until I've found IMG TAG MODIFIER.

This ExpressionEngine plugin modifies img tags and with a bit of help from PhpThumb, it will create newly resized images for you.

What do you need?

Assuming you are familiar with ExpressionEngine, first you will need to download and install PhpThumb on your server.

I usually put extra codes etc. under "scripts" folder so, for this example PhpThumb will be located in its folder at "/scripts/phpthumb/phpThumb.php".

Lastly download IMG TAG MODIFIER and put it into your ExpressionEngine plugin folder.

How does it work?

Very simple, in ExpressionEngine templates where you display the content, wrap custom field as in following example.

{exp:weblog:entries weblog="weblog_name"}

{exp:shj_imgmodifier phpthumb="true"




Img tag modifier will now go through that custom field which holds our content, make necessary changes in terms of width, height etc. to img tags and make the image ready for resizing with PhpThumb.Reduce image file size with Img Tag Modifier and PhpThumb

It will even create links to original image so you can use it with jQuery lightBox plugin.

If you want to test this effect, go ahead and click the image on the right.

Now you can tell your client to not worry about large images and enjoy faster download speeds with smaller image file sizes.

Picture of Cem Meric

email | follow | peak

Cem Meric

Cem runs a creative web design and development studio called Webunder, specialising in ExpressionEngine CMS and he is an active member of the ExpressionEngine forums.

When he's not working, he enjoys being a hero with friends.


Commenting is not available in this entry.