Skip to main content

Comprehensive Guide to Handling Images in Drupal

Design & Front-end
Tyler Struyk
Audience Experience Level

This presentation will try to explore all of the ways to display images to end users. It will show how developers and front-end designers can empower content creators to have full control of their images.

We will start off with simple topics like creating responsive images in Drupal 8 and choosing between using image fields or adding images through a WYSIWYG editor. We will also look at how simple adding an image is with the new Layout Builder in Drupal 8.7.0.

The majority of the presentation will focus on advanced topics, such as:

  • Responsive vs. adaptive design. Demo: creating a banner that scales responsively vs an adaptive design with a fixed width.
  • Then we will get into greater detail for front-end designers of how to make an adaptive image look good at different widths.
  • Basic editorial control of responsive images. Demo: taking an image of 3 people and ensuring that the “president of the company” never gets cut off when the image is cropped for various breakpoints.
  • Advanced editorial control of responsive images. Demo: walking through the lengthy process of giving the content editor the ability to control exactly what the image will look like at every breakpoint.

What level of knowledge should attendees have before walking into your session?

  • None

Who is this session for and what will attendees walk away having learned?

  • Content Editors - all of the ways they could ever want their images to be displayed
  • Developers and Site-builders - comprehensive knowledge of all the tools and modules they will need to empower their content editors
  • Front-end Developer - tips and tricks for handling images on the front-end, such as using overlays