Responsive teaser list with titles and image thumbnails
Aug 21, 2013
A project we’re working on requires responsive lists of content comprised of only teaser images and titles. For such lists to look decent, the elements need visual consistency by virtue of being the same height, though the titles may vary greatly in length and in a responsive setting we don’t know the viewport size and how many items will be in a given row. Also, in our case the content won’t always have an existing image for us to work with.
So there are two main challenges:
Generate a default image that can be tracked/versioned in some way, but also remain editable by site editors
Ensure all list items are an equal height, regardless of title length and number of items in a row
Generate a default image in a managable way
We can use Drupal’s core image styles to format images from our content in a way that fits our grid system. For entities with an image, that’s all we need. For entities with no image, we need to perform a few steps to get the default image in place.
First, we copy the versioned file over to our public files space:
Next, we generate the image style derivative we need for our content list:
We can call these functions from the function that’s handling our image field – theme_field or some custom function:
And should we ever want to change the default image, we can update the file in our version control system, delete the copy in the public files space, and flush the image style (e.g. with drush image-flush).
Ensure list elements are an equal height, regardless of viewport width
Getting the content list elements to be the same height is even simpler, thanks to Tim Svensen’s equalize.js jQuery plugin. To implement it, we just download and add the script to our repo, include it in our theme, and initialize it on the parent element of our content list.
And of course we make our theme aware of the script with a couple of lines in our .info file:
That’s it! We now have clean teaser lists with images and titles that are equal height regardless of the title lengths and number of items in a row. A default image is supplied if the content doesn’t have one, and we can easily change that default image in the future as needed.