We use interaction design & strategy to build awesome websites.

Controlling how clients include images in entries can sometimes be a challenge without limiting their ability to place images where they make the most sense within their content. Many clients do not have the necessary training to format images before plopping them into their entry. We've seen images that are 2000 pixels wide in containers that are limited to 600 pixels. In addition to cropping and resizing images to fit nicely within articles, sometimes sites require that certain images have other effects applied such as slick borders.

In the screencast, we demonstrate how we utilize a number of 3rd party add-ons for ExpressionEngine to put a strangle hold on controlling how images are output, without limiting the customizability or placement for the publishers. Some of the pre-requisites to achieve what is demonstrated in the video include: ExpressionEngine, NSM Transplant, Wygwam, Matrix, and ED_ImageResizer*.

The technique we demonstrate in the video allows us to create a matrix with infinite row (for infinite images), with pre-set options to allow the publisher to customize exactly how they want the image to be output including cropping, resizing, and even adding a border while keeping all images in entries across the site uniform and intact with the site's brand. Utilizing NSM Transplant we allow the publisher to place tags such as {image_1} inside of the WYSIWYG wherever they want so that the context of the image is always spot on.

In addition to the image control we also briefly demonstrate how to setup a dynamic accordion field utilizing the same technique. Wait what? That's right, using the same technique with only a few minor changes, you can allow your publishers to create accordions on the fly without an inkling of coding knowledge. Sounds pretty awesome right? What are you waiting for, watch the screencast and start implementing this technique today and make your clients smile too!

*UPDATE: We have updated our technique to now use CE Image rather than ED_ImageResizer to give publishers even more features and flexibility.