Drupal 7 Module: Image Style Selector

David G - DrupalAt my work recently I have a project where the client should be able to put a full-width Node image, or a 40% width tall image with caption at the head of an article. The other developers in this webshop would typically add 4 fields to a content type to do this (full width image, half width image, full caption, half caption) so that the CSS was simple to create to style this.

I understood what the developers goals were but I see something messy with needing 4 fields in a drupal content type to pull this off and properly make the CSS. So I took a few minutes to try and find a nicer solution. I settled on the following solution:

  • Use the Image Style Selector module to set the image style for an upload image
    • Make 2 image styles: full_width_image and tall_image.
  • Use a single caption field for any caption for the styled image.
  • Create a simple template override function that adds the image style name to the css class name(s) applied to the image element.
  • Using Display Suite reset the field output for the image and caption fields. If you like add a caption CSS class to the caption field.
  • Use the CSS sibling selector to properly style the image and caption depending on the width of the images.

Installing and Using the Image Style Selector (ISS) Module

This module is installed as any other module for drupal. You should ideally also create some Image Styles to be used by this module as a drupal field.

Then you assign an Image Style Selector field to a content type. Here is an example of a Page content type with an image, caption and our style selector field configured:

Example Page content type configured with the ISS field.

Example Page content type configured with the ISS field.

Example ISS field configuration, note that we allow only 2 of the sites configured image styles to be used on this content type.

Example ISS field configuration, note that we allow only 2 of the sites configured image styles to be used on this content type.

So for example the CSS we’d like to create would float text around the image right side if the image is only about half the page. Otherwise assure the image is nicely placed above and prior to any text content if the image if a full width image. This CSS can look like this:

/* This is LESS css-preprocessor markup */
body.not-front.page-node {
	div.page_aim_banner {
		float: left;

		img.page_half_width_image ~ p.caption {
			margin: 0 1em 0 1em;
		}
		img.page_full_width_image ~ p.caption {
			clear: both;
		}
	}
}

The template.php file code that adds the img.page_full_width_image class to the image from the image style is as follows (taken from drupal.stackexchange answer):

function MYTHEME_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'], 
    'height' => $variables['height'],
  );

  image_style_transform_dimensions($variables['style_name'], $dimensions);

  $variables['width'] = $dimensions['width'];
  $variables['height'] = $dimensions['height'];

  $variables['attributes'] = array(
    'class' => $variables['style_name'],
  );

  // Determine the url for the styled image.
  $variables['path'] = image_style_url($variables['style_name'], $variables['path']);
  return theme('image', $variables);
}

Doing all of this assures the content authors have a relatively simple admin interface to insert at least an image into their posts. While keeping the theme and CSS tidy as well!

Example Edit page view of a sample piece of content using this image style.

Example Edit page view of a sample piece of content using this image style.

Example final output of all this configuration working together.

Example final output of all this configuration working together.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

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