Skip to main content

One Image Field, Multiple Aspect Ratios

Mar 24 '17

Sometimes the same image style doesn't work well for all images, even if those images use the same field. A prime example is the grid of logos on this site's "Work" page. When originally created, it looked like this: an even six-column grid, with each image taking up 80% of its column's width.

Logo grid without any custom aspect ratios.

Due to some logos being taller and narrower and others being shorter but wider, this looks unbalanced, even though it's technically consistent. We needed a way to achieve a more visually pleasing look while still using a single logo field.

I created a List (text) field called "Logo Orientation" (logo_orientation) with the following options:


The content editor now sees both their image upload field and a dropdown of orientation choices:

Editor view of image upload and orientation fields.

This particular implementation uses SVG images, which don't support image styles, so we achieve our aspect ratios using CSS. In our theme's .theme file, we add the logo orientation as a class to the node like so:

function tagv4_preprocess_node(&$variables) {
  $node = $variables['node'];
  if ($node->getType() == 'project' && $node->hasField('field_logo_orientation')) {
    $orientation = $node->get('field_logo_orientation')->value;
    $variables['attributes']['class'][] = $orientation;


Then, we use that class to apply max-widths via CSS:

.work-client-logos .node-type-project img {
  max-width: 80%; /* Default */
.work-client-logos .square img {
  max-width: 50%;
.work-client-logos .rectangle img {
  max-width: 70%;
.work-client-logos .landscape img {
  max-width: 90%;


Our result is a more balanced looking image grid:

Logo grid with variable widths