On Twitter: Best way to position images?
Earlier today Patrick Glynn posted the following question on Twitter about image positioning in ExpressionEngine:
What’s the best way to allow a client to position images in the EE backend? Can one dynamically apply a CSS class to the image?
I’ve done everything from creating custom formatting buttons to just using Wygwam. What’s your technique for allowing images to be easily positioned inside of content areas? Let us know in the comments.
Posted on Aug 23, 2010 by Ryan Irelan
Share on Twitter
David Rapson — 04:59 on 08.23.2010
I’ve had the same problem recently. Wygwam defaults to using inline align parameters which aren’t so nice. There must be a way to add a class name dynamically
Jason Morehead — 05:10 on 08.23.2010
I often create two fields: one for the image upload (using nGen File Field) and one to select the alignment (either using a dropdown menu or Pixel & Tonic’s recently released “Pill” fieldtype). Then, in my templates, I simply insert the appropriate CSS class for the selected alignment option into the IMG tag.
Also, I’ll often use the ImgSizer plugin to resize the image to an optimal width based on the alignment. So, for example, if the image is center-aligned, it’ll be wider than if it were aligned to the side.
Obviously, this approach limits the user to just one image per page/entry (unless they’re savvy enough to use EE’s built-in file manager), but it works 90% of the time for my clients.
Mason Kessinger — 05:29 on 08.23.2010
We try to allow clients to have freedom with their posts and images. Especially in the case of run-on text pages like blog or news items. We do not want to restrict our clients to X number of images per page, etc.
The LGTinyMCE + ImageManager combo seem to be the most user friendly and powerful combination to allow our clients that freedom.
In addition to limiting the number of WYSIWYG buttons our clients have to remember we add in a few custom styles that they can apply to their images. Clients can select an image and apply styles of “Float Image Left” or “Float Image Right” with TinyMCE. By default, without styles, the image simply breaks free from the other text and behaves normally. Best part is they get to see it live inside the WYSIWYG editor so they know what they’re getting before they publish. I will say that the addition of LG Live Look is a god send in cases like this.
bernie — 06:02 on 08.23.2010
I highly recommend Ryan Masugas MD-Markitup, which, among other things, allows in conjunction with Moxiecodes Image- and Filemanager the use of css-classes while inserting images (a bit customization needed, look in the forums). More at: http://masugadesign.com/the-lab/scripts/md-markitup/
Kyle Batson — 08:07 on 08.23.2010
I find this tutorial to be a lifesaver: http://expressionengine.com/archived_forums/viewthread/120427/
It allows user controlled image sizing and alignment based on parameters controlled by the developer. I use it on nearly all my sites now.
On EE2 it requires. The use if NSM Transplant instead of LG.Replace now, but it works great
Jason Morehead — 08:18 on 08.23.2010
@Kyle Batson: I’ve used that technique on a handful of sites, and I agree, it’s really good.
Maix — 11:08 on 08.23.2010
I’ve also like to use the technique witch Kyle an Jason are using.
John Faulds — 11:56 on 08.23.2010
For 1.6.x I’ve used TinyMCE with MX Universal Editor and have created a styles dropdown where you can assign different classes to elements. If you assign a stylesheet with those classes to TinyMCE, the editor can see the styles applied right inside the WYSIWYG window, no need for a page preview or anything.
For EE2, like Kyle, Jason and Maix have said, Matrix/File upload/NSM Transplant is a good option.
J — 03:18 on 08.24.2010
If you have a set max number of images you want to allow per post (3 for example), you can also go for the easy route: duplicate text fields + duplicate images (nGen) + duplicate config field (full width, left, right in a dropdown).
These supplementary fields are collapsed by default in publish form. Add some conditionals in the template and you are good to go. No risk of someone getting it wrong.
Erik Reagan — 03:53 on 08.24.2010
For those referencing AJ Penninga’s technique - I hear he’s working on an additional approach that’s similar but even better.
Paul Frost — 08:22 on 08.24.2010
I detailed the way I do it for EE 1.6 in this archived thread:
http://expressionengine.com/archived_forums/viewthread/139892/#690174
Using matrix it allows a variable number of images and size and alignment options for each individual image.
I’m currently developing a new method for EE2.
This is using the “String” plugin and Simple S3 Uploader from eMarket South and “Imagesizer” from Lumis.
The nice feature of the S3 uploader is that you can resize the image on upload to a specified size, so it stops people uploading unnecessarily large files.
Wes — 09:23 on 08.24.2010
+1 for LG Replace + Matrix + Copee Pastee + ImgSizer.
For EE2 sites, I just update a few lines of code in LG Replace to make it EE2 compatible.
Sean Smith — 18:40 on 08.25.2010
With one client I put the images in a FF matrix and used the copee pastee add with LG Replace so that the client could easily put images anywhere they wanted in the post. In the matrix one cell was a left float, right float, or full which was then replaced and resized with imagesizer. Worked beautifully but took a while to get it all working smoothly.
Seb — 11:28 on 11.04.2010
Hey Wes,
Care to share which lines you update to make it EE2 compatible?
Kyle Batson — 11:32 on 11.04.2010
My code usually ends up looking like this (I hope this works):
{exp:nsm_transplant:body id=”{image_field backspace=“1”}image_{row_count}|{/image_field}”}
{body}
{image_field}
{exp:nsm_transplant:content id=“image_{row_count}”}
{exp:imgsizer:size src=”{image}” width=”{image_size}” alt=”{caption}” class=”{image_align}”}
{if caption}<span class=“caption {image_align}” >{caption}</span>{/if}
{/exp:nsm_transplant:content}
{/image_field}
{/exp:nsm_transplant:body}