Gradualism

Make adding inline images to ExpressionEngine entries safe and easy for your clients

December 15th 2009

Most of the time when I’m setting up a CMS in which site editors can add images to their entries I will give them a specific image field to upload into, and that image will be positioned in the page template wherever I have designed it to go. End of story.

But there is one type of content entry when this just doesn’t cut it. News and Blog entries. The site editor might want to put 1, 2 or 3 images into an entry and they’ll want to position them at the relevant part of the story, in between, or alongside specific paragraphs. And I have got to give them that – it isn’t such a big thing to ask, is it?

The Problem

If you have any experience of developing or customising a CMS you must have encountered problems with this. How do you let your clients add images to their entries without letting them completely screw up the design of the site, or without making it so complicated they will never even try? You may be thinking ‘but how hard is it to upload an image, embed it and float it left or right?’. Well, let me tell ya, it is never that simple. Here are some of the specific problems:

• the floated image is too wide, or just not wide enough, for the containing column, which means the text gets squooshed beside it (as illustrated above).
• a portrait image is resized to the same width as a landscape format image which means it might be way too big/tall.
• if you have image captions you’ll want them to wrap below the image which means the containing element needs to be set to the same with as the (variable – see above point) image width.
• if the editor has to be working with HTML code and accidentally deletes an end tag it could break the entire page layout.

Finding a solution that prevents these potential problems rules out using the built-in ExpressionEngine File Upload, even with the functionality it offers to add ‘Image Pre/Post Formatting’, because you just don’t want the client to be editing HTML.

Essentially what we are looking to output is a span (can’t use a div because it might be inside a paragraph) with display:block applied to it and a class of either ‘full’ or ‘half’ depending on format of image uploaded. This is because I want the span containing the image and caption to have a different width depending on the width of the image inside it, so that the caption, contained by the span, wraps below the image.

<span class="image full">
<img src="images/image_filename.jpg" width="500" alt="Image caption" />
 <small>Image caption goes here</small>
</span>   

The Solution

This solution relies on you having a number of ExpressionEngine plugins and extensions installed and enabled. It would probably help if you know how these add-ons work. This might seem like a lot of work, but I use them all for other reasons so it made sense to combine them for a new purpose.

• Reeposition plugin
• Allow EE plugin
• Image resizer plugin
• Field frame extension + nGen File Field type
• Textile plugin (+ optionally, Textile Editor Helper )

Method

Add a custom field to the entry form which uses FF Matrix and nGen file field to allow the editor to upload multiple images for use in that entry. Each image can have a caption and size/format associated with it.

Place the FF Matrix tags in the template and directly within them place the Reeposition variable pair tags, which will identify each item within them as a separate entity which can then be placed in different positions throughout the document using the single variable.

Create a Textile Editor Helper button which allows the editor to position the Image/Caption set within their body text into the right place. The button will just save them copying and pasting the variable into the textarea, and will prompt them to enter which number image (if adding more than one in the FF Matrix) they’re positioning. The variable will be processed because you have wrapped the main body tag in the Allow EE variable pair.

That method will probably make a lot more sense when you look at the code snippets below.

Creating the custom weblog fields

Create a new field of the FF Matrix type. Configure the matrix with 3 or 4 columns: nGen file field; Textarea for the caption; Text input for Alt. text*; Select for Image size (with options Full/Half or Large/Medium etc)

(*I haven’t included this extra field in my example below but it is probably best if you want to allow links in the caption( for photo credits), you can’t have them in the ALT text).

Put text in the instructions field which has the reposition code for them to copy and paste into the main body textarea. Or, preferably, add a Textile Helper Button which will paste the code in for them – I just made one of these because I was talking a client through how to do this reepositioning and I could hear she was stumbling over copying the whole curly bracket encased code and I realised this was potentially problematic. Not to mention the complications of adding more than one image and so needing a different id on the reeposition code (you can see I had added further instructions about this in my custom field, but with the TEH button these won’t be necessary).

See below for the TEH config code addition.

Creating Textile Editor Helper button

You need to add some code to the config file for the Textile Editor Helper I figured the simplest way for me to share this would be to give you my amended config file – this ZIP also contains the image I used for the button.
textile-editor-config.zip

You will need to upload the icon image to the theme’s images folder. The one I included above is called winxp_jpeg.gif because I used a Windows jpeg icon so that my client, who uses a PC, would recognise it.

When the editor clicks on the button, a drop-down dialogue box appears asking “which number image are you inserting?” and they insert 1, 2 or 3 etc to embed the image from the FF Matrix image set.

Watch out for

• Search results (you’ll need to wrap in Reeposition and Allow EE code, so that the code doesn’t appear! (but you can prevent images from appearing)
• You can’t paste EE code into your weblog main textarea for demos like this blog post if you’re using this approach (because it will get parsed!), but generally for client sites this shouldn’t be a problem.

All done!

I hope you find this useful. Please don’t hesitate to ask questions in the comments if anything is unclear.

Add your comment

Please complete the fields marked * (don't worry, I won't publish your email)

Name *

Email *

Website

Comment

Flesh and blood test
What day of the week follows Thursday? 6 character(s) required

Remember me next time

Keep me in the loop of follow-up comments?