Tutorial: Drupal 8 WYSIWYG, inline and responsive images

There are some excellent improvements to modeling data in Drupal 8, including a number of new fields. This is going to make it easier to model content in Drupal. Let’s look at the image handling in Drupal 8 and what changes are in store. In this post we'll look at:

• The image field in Drupal 8
• Inline images — the tradeoff
• Drupal 8’s WYSIWYG editor
• Drupal 8 inline images
• Responsive images in Drupal 8 (picture)
• Responsive support in Drupal 8, some issues you can help on.

Correction: An earlier version of the article said all images would appear responsive in Drupal 8. Inline images in Drupal 8 are not responsive. Inline images appear responsive thanks to a special browser behavior by Google Chrome. Responsive images are possible with the Picture module as described in the article.

The image field in Drupal 8

An image field comes preconfigured on articles in Drupal 8, same as 7. This gives a good example of an image field configuration. Adding an image field in Drupal 8 is similar to the experience of Drupal 7. One nice thing is that you’re able to set an arbitrary “limited” number of uploads, and create custom view modes. What's remarkable, I suppose, is that it's not very different in Drupal 8.

The changes to the image field interface are the same as I outlined in my previous article about
Fields in Drupal 8, so please do check that out if you didn’t already.

Inline images — the trade off

First let’s consider two very different use cases which involve multiple images.

In some cases the designers will want full control over the layout of images, and the numbers of images uploaded. For example, you might choose to require a content editor to add in 4 images of clothing for sale, which will appear in a slideshow on the product page. This could have been done easily in Drupal 7 by adding an image field with multiple values allowed; limited to 4.

However, in other cases, content editors want full control of the flow of text and images in their content, for example in a news story or travelogue. They may want to have one “lead” image then a varying number of images throughout their article.

In Drupal 7, this would have required a combination of an Image field + the Insert module, or WYSIWYG of choice + the IMCE WYSIWYG Bridge module + the IMCE module for image insertion.

In both methods, the site builder and designer give up control over the display of the images, and allow the content editor to choose the dimensions, the position and placement on the page. To get either of those solutions to then display responsive images you'd have yet another set of modules and methods to choose from.

And, arguably in both methods, the configuration was often confusing, with several modules to collect and tricky steps to make sure the WYSIWYG editor was working properly. If you're curious about configuring adaptive/responsive images in Drupal 7, please check out this post.

Drupal 8’s WYSIWYG editor

Now with Drupal 8, there is for the first time a WYSIWYG editor in Drupal. Yes, you can override it, but for many site builders this is an ideal choice. So many improvements have taken place. Even configuring the WYSIWYG editor is much easier. Now you can drag and drop buttons for specific formatting right onto the toolbar…

And now, that will automatically update your allowed HTML tags. So much easier! For a good comparison of Drupal 7 to Drupal 8 functionality, please see Wim Leers's presentation.

The role-based configuration per-filter is the same in Drupal 8, though the interface has seen some improvements.

Drupal 8 inline images

Inline images do pose a tradeoff for site builders and designers, but the benefits to the content editors are great. Even the article I am writing now would be really hard without inline images.

The image button in the WYSIWYG toolbar will allow content editors you to upload images to the server, and display them inline. This dialog allows you to change the alignment or opt to add a caption.

You add the caption once the image is in place.

You might be curious, the markup for the caption is figcaption, a new HTML5 element. Good news is Drupal 8 uses a text filter (Caption filter), so we're not storing this in the database. In the DB, we just store an
<img> tag with data- attributes, the filter then takes this and generates whatever output HTML is desired — by default that's a <figcaption>-based structure. This ensures the content stored in the DB remains clean, structured and meaningful.

Responsive images in Drupal 8

As I mentioned earlier, getting responsive images configured in Drupal 7 was a challenge. To be fair, the notion of responsive images wasn't much of an issue when Drupal 7 was developed (960 grids were hot!) and even today the specification for the <picture> element is still being worked on. Drupal 8 is certainly getting ahead of the game this time.

The toolbar and themes respond to the browser dimensions.

This is thanks to the Breakpoint module which is in core now.

Inline images will appear responsive in Google Chrome. However, you might be interested in getting more control. For example, you might like your Lead image to appear as a banner on most pages, but if it’s on a narrow browser you might want a square instead.

The Picture module included with Drupal 8 allows you to specify the mappings to your image styles for image fields. The Picture module isn’t enabled by default. After you enable it, you can select which of your image styles will be selected at a certain viewport, or minimum width. These settings are set within your theme.

After you’ve added the new Picture format, this is available in the “Manage display” tab of your chosen content type, as an alternative to the Image format.

Next, you select your picture mapping, for example the Lead image.

You’ll notice your changes as soon as you refresh your content. In my case the square image appears when I resize to check my article on its full page.

You might be curious about the markup. The images and their alternative options are included with the <picture> element. You can read more about HTML 5 and the Picture element on W3.org and Picture.responsiveimages.org, this is a draft spec.

So now you have two ways of allowing content editors to add responsive images to content in Drupal 8.

Responsive support in Drupal 8 — some issues to work on

I thought a call to action would be a good way to end this blog post. Responsive images are just one slice of the pie for truly responsive websites in Drupal 8. The entire administration theme responds based on the size of your device's browser. The core themes are also responsive, with menus and layouts that move to suit a better mobile experience.

There is work being done to give previews of your site on different devices, and more issues to improve the use of the administration area in Drupal 8. You might find an issue that you can help on. Here are some examples below. Are there other ways you think people can help make Drupal 8 the most responsive CMS ever?

• "Empty image" option for Picture https://drupal.org/node/1999312
• Decide on which <picture> polyfill to use? https://drupal.org/node/1883526
• Add a responsive preview bar to Drupal core — https://drupal.org/node/1741498 — 'live preview' of what you site will look like on different devices.
• [Meta] Mobile friendly admin pages https://drupal.org/node/1870944 — If you find any issues with browsing your Drupal 8 site on your mobile you might find the issues here to test solutions.
• Remove overlay https://drupal.org/node/2088121 - A controversial issue, but would improve the use of your Drupal site administration in mobile.