Get in touch
Call 07974 744090, skype digitaldelivery, email Steven@digitaldelivery.co.uk.
Recent downloads
Dd Autothumb - expression engine plugin
23/04/2009
This is a simple Expression Engine plugin to create images and image thumbnails from existing unstructured weblog html content.
Useful for adding image based summaries, thumbnail navigation and thumbnail search to existing content within Expression Engine without having to create new weblog fields.
The problem
[ or just skip straight to the download and code samples ]
I had a couple of sites which had large volumes of existing image rich content. This was all managed inline within the main body of the post - rather than having images held in custom weblog fields. I wanted to be able to create thumbnails of these images, related to the posts, and use them as small avatar style links within search results and for related posts lists. I didn't want to have to rework all the content.
A number of extensions and plugins - most notably the excellent Image Sizer allow for this, but by the time you find the image to work on from the html the resulting template code was bulky for what I wanted to achieve. Who needs template files with 10 lines of code for a simple thumbnail? The code is much lighter if your image URLs are already in a custom field as Image Sizer expects - but mine weren't.
So I wrote Dd_Autothumb to:
- Extract all images from an html block
- Select a specific image
- Create and cache the thumbnail
- Return html to display the thumbnail
Dd_Autothumb wraps some thumbnailing code from Image Sizer, and adds a bunch of useful options for finding, formatting, sizing, and html creation for inline or css-background image placement, etc... This gives a more elegant solution within the template file, and insulated you from a lot of the image hunting.
Installation
Download the latest version here: dd_autothumb.zip.
Extract the zip. And copy pi.dd_autothumb.php file to your ExpressionEngine /system/plugins/ directory.
Usage and code samples
The result is custom thumbnail insertion code for inline or css image placement which is produced using a single line of code, from even the messiest html / pseudo html fields.
{exp:dd_autothumb pic="first" width="180"}
{post_body_tag}
{/exp:dd_autothumb}
Will return something like:
<img src="/images/uploads/cache/foundimage1-181x86.gif" width="180" height="86" border="0" />
One additional benefit is that by simply dropping everything you have for an entry into the tag, you will pick out the first image found from any field:
{exp:dd_autothumb pic="first" width="180"}
{post_body_tag}{post_alt_tag}{post_other_tag}
{/exp:dd_autothumb}
Further, you can manage a default image easily by doing something like this:
{exp:dd_autothumb pic="first" width="180"}
{post_body_tag}{post_alt_tag}{post_other_tag}<img src="/images/uploads/theimage.gif" />
{/exp:dd_autothumb}
You can select which pic to show using an integer or keywords first or last. If you ask for image 20, but only have 2 images, AutoThumb will return image 2 for you:
{exp:dd_autothumb pic="first" }
Using thumbtype y ou can select to return an inline <img tag or a css snippet to use for the background of your element:
{exp:dd_autothumb pic="first" width="180" thumbtype="inline"}
this returns <img src="/images/uploads/cache/foundimage1-181x86.gif" width="180" height="86" border="0" />
{exp:dd_autothumb pic="first" width="180" thumbtype="css_background"}
this returns style="background:url(/images/uploads/cache/foundimage1-181x86.gif) top left no-repeat"
You can dictate the size of the thumb using width and height in the expected manner. Leaving these blank will return a 64px wide thumb:
{exp:dd_autothumb pic="first" width="180" height="180"}
To grab the original size image you just pass width and height of huge proportions - 9000px or something. Because we never scale up - this will just return the original size image.
I'd recommend that you use the css_background in most cases, and set the width to match the element you are attaching the style to, and probably set a default in your CSS rather than by including it inline. But the lazy option is there should you wish to use it.
NOTE: This is an early version of this plugin, so do let me know if you have any problems or suggestions - ee {} digitaldelivery.co.uk or head over to the ee forum post
Comments?
I've turned off comments on Digital Delivery. If you'd like to get in touch about Dd Autothumb - expression engine plugin please email me, or tweet @stevenmilne.