Expression Engine, Channel Images, Foundation 5 and You - Adpearance

Expression Engine, Channel Images, Foundation 5 and You

Adpearance’s development environment is robust and flexible. I’ll describe what I’ve learned and intuited as being the best practices for managing images using Expression Engine, Channel Images, and Foundation.

When considering the communication of information through the web, we are really talking about the artful arrangement of images and text. The differences in their behavior, particularly when paired together, can ease communication or cause some serious headaches (Frank Chimero does a wonderful job delineating the issues). Now consider that your content will be viewed on everything from the newest 4k (5k?) monitors to a 320×240 Samsung Galaxy Mini. You want your images as big, but not bigger, than whatever container they need to fill. Too small and the image appears to be of poor quality, too large and your image inhibits load time (and your impatient target has gone to faster pastures).

Well, here’s how we deal with it at Adpearance.

The Tools

  • Foundation with Data Interchange
    This is our primary frameworks for developing templates. It has just the right amount of functional tools, but gets out of the way quickly when we need it to do something else.
  • Expression Engine from Ellis Labs
    This is our CMS (Content Management System). It is flexible, extensible, and provides phenomenal control over your environment.
  • Channel Images from Dev Demon
    One of a few extensions to Expression Engine, but this one provides some excellent ways to organize and manipulate your images.

The Environment: A Simple Gallery

For our example, we’ll make a simple, flexible gallery.

Assuming we’re already pulling content from one of our channels, grabbing images from the channel images field goes as follows:

{channel_images_field}

    <img src="{image:url}" alt="{image:title}">

{/channel_images_field}

The above will, assuming five images, export the following:

<img src="/images/première" alt="First">

<img src="/images/deuxième" alt="Second">

<img src="/images/troisième" alt="Third">

<img src="/images/quatrième" alt="Fourth">

<img src="/images/cinquième" alt="Fifth">

Notice that {image:url} was replaced with the relative url of our image and {image:title} was replaced by the title we’ve chosen for that particular image.

Now let’s bring Foundation’s block-grid classes in to help us organize our images for different viewport breakpoints. The following code will result in:

  1. Small screens with 2 images in a row
  2. Medium screens with 3 images in a row
  3. Large screens with 4 images in a row
  • {channel_images_field}
  • <img src=”{image:url}” alt=”{image:title}”>
  • {/channel_images_field}

Expression Engine outputs the following:

<div class="row">

      <ul class="small-bock-grid-2 medium-block-grid-3 large-block-grid-4">

	   <li><img src="/images/première" alt="First"></li>

	   <li><img src="/images/deuxième" alt="Second"></li>

	   <li><img src="/images/troisième" alt="Third"></li>

	   <li><img src="/images/quatrième" alt="Fourth"></li>

	   <li><img src="/images/cinquième" alt="Fifth"></li>

      </ul>

</div>

Already, we have set up a fairly dynamic and extensible method for displaying a gallery of images. But what if the images being uploaded are of drastically different shapes and sizes? What if the size of an image on a small screen appears larger (because the space it has to fill is actually larger) than it does on the large screen? This is where Channel Images’ image upload preferences comes into play. We can define presets for different sizes of images so when they are uploaded, Channel Images will automatically generate versions at the predefined dimensions without harming the original. Swell, huh!?

We might define our presets as follows:

  • Large: no greater than 400 pixels wide and 700 pixels tall, cropping the larger down to fit after resizing.
  • Medium: same as Large, but 300 x 400.
  • Small: 150×200.

Now, combining these Channel Images presets with data-interchange we get the following:

<div class="row">

      <ul class="small-bock-grid-2 medium-block-grid-3 large-block-grid-4">

	   {channel_images_field}

	       <li><img data-interchange="[{image:url:large},(large)],[{image:url:medium},(medium)],[{image:url:small},(small)]" alt="{image:title}"></li>

	   {/channel_images_field}

      </ul>

</div>

The only things we changed were src = data-interchange and {image:url} = {image:url:some_preset}

These changes give us a gallery which—according to screen size—assumes a different configuration, loads the appropriately sized image, is extensible, and leaves room for changes down the road.

Using these basic tools as an initial starting point assures that we can use high quality images and always present the best one for the situation. Because of this, our message is unhindered by image loading times, and we can still have that snazzy picture we’ve been waiting to show the world.

Get monthly newsletters with timely blogs and occasional announcements for resources including in-depth reports, data-driven insights, and webinars. Once subscribed, you can select your preferences to get only what matters to you.

On-Demand Webinar
Why Connected TV is Taking Over Traditional TV Advertising
On-Demand Webinar
How to Measure Your Digital Success
About the Author

User

Adpearance is the digital marketing company obsessed with generating quality leads. Our solutions combine cutting-edge technology, premium tracking, and an expert team to transform business results.

Follow Us

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

Subscribe to our newsletter

Come on... You know you want to.

Subscribe to our newsletter

Get monthly newsletters with timely blogs and occasionally announcements for resources including in-depth reports, data-driven insights, and webinars.

Subscribe Form

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.