IMG TAG MODIFIER

An ExpressionEngine plugin

ABOUT THE PLUGIN

I think the main use case for this plugin is to allow the user to use large original sized images inside entries, scale them to prefered size (as our clients do), and then have this plugin alter the tag to use phpThumb. PhpThumb then creates a new image matching the width and height attributes on the tag - increasing visual quality and decreasing Kb. The plugin can also enable Lightbox to make the image clickable, linking to the original image. The plugin can also add or override the <img> tag attributes.

All that this plugin does could be done with the Find & Replace plugin but that requires regular expressions knowledge. This is hopefully easier.

It can be argued that it does not make sense to do this at runtime - but I think in many cases it does. I did at least create the plugin to solve a frequent problem where wysiwyg editors are used to insert images.

The plugin can be very useful for an example when you want to:

• Modify existing img tags to be phpThumb enabled.
• Override width and height of inserted images
• Override or add parameters like align, class, alt, title
• Enable lightbox on the image.

Download the plugin

EXAMPLES

Enable phpThumb:

{exp:shj_imgmodifier phpthumb="true" phpthumb_path="/thumb/phpThumb.php"}
<img src="/someimage.jpg" width="400" height="300">
{/exp:shj_imgmodifier}

Output:

<img src="/thumb/phpThumb.php?src=/someimage.jpg&w=400&h=300&q=65" width="400" height="300">

Enable phpThumb, set images to be square and cropped from center and enable lightbox:

{exp:shj_imgmodifier phpthumb="true" phpthumb_path="/thumb/phpThumb.php" phpthumb_attributes="q=50&zc=1" width="100" height="100" lightbox="true"}
<img src="/someimage.jpg" width="400" height="300" alt="Some image">
{/exp:shj_imgmodifier}

Output:

<a href="/someimage.jpg" title="Some image" rel="lightbox"><img src="/thumb/phpThumb.php?src=/someimage.jpg&w=100&h=100&q=50" width="100" height="100"></a>

PARAMETERS

There are a few parameters you can use:

clear (true/false)
Remove all but the src, width and height attributes

width, height, align, class, style, alt, title
These explain themselves. They override or add attributes in the tag

lightbox (true/false)
Will add lightbox support to the image by adding an <a> tag around it with the rel="lightbox". Very useful if you are using large originals and make phpThumb create thumbnails. You will of course need to "install" lightbox.

phpthumb (true/false)
If set to true then the src attribute will be modified to use phpThumb

phpthumb_path
This is the path tp your phpThumb installation. Defaults to "/phpThumb/phpThumb.php"

phpthumb_attributes
This allows you to add additional parameters to the phpThumb src. Like if you want to override the default quality of 65% you set this attribute to "q=95". Or if you want to make square thumbnails you use "zc=1" and override the height and width with equal numbers.

LICENSE

IMG Tag Modifier is licensed under a Creative Commons Attribution 3.0 License.