Tutorial: Drupal 8 WYSIWYG, Inline and Responsive Images

March 10, 2016
5
1

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. 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.

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.

adding image field 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.

Image field example

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.

inline image example

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…

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. Limit HTML tags

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

choose roles for text formats

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.

insert image dialog

You add the caption once the image is in place.

write in caption

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

-based structure. This ensures the content stored in the DB remains clean, structured and meaningful.

 

figure caption

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></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.

responsive images

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.

Picture mapping

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.

picture format selection

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

image picture mapping

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.

Picture example

You might be curious about the markup. The images and their alternative options are included with the <picture></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.

Picture markup

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

Thanks!

Add comment

By submitting this form, you accept the Mollom privacy policy.

Inserting inline images

I'm on 8.0.5, and when I insert an inline image in an article, I do not see the Image Size fields in the dialogue box. As a result the image uploaded is way too big for the article. Is there something different I need to do?

Images and D8

First thanks for the article. While the date on the article is March 10, 2016, the content seems to reflect some past state of Drupal 8. As with the comment by Terry Shannon, the sizing fields are not present in the image dialogue on my 8.0.6. site. In addition, with the ckeditor configuration you and either choose to upload images or add an image by reference to a url ... but not both at the same time. Adding the IMCE module does help resolve this.

Also, the references to the picture module in your article should probably be modified to refer to the responsive image module. I don't know if there's a one to one correspondence between the two, but I see no named "Picture" module in D8. Responsive images does work pretty well but only with an image field that's separate from the body area of an article content type.

In short, 6 months after the release of the initial Drupal 8, this whole area is still a work in progress and it's very unclear when and how it will be straightened out ... 8.1? 8.2?

Why don't we have inline

Why don't we have inline responsive images, or at least options to rotate, crop etc? Seems pretty pathetic compared to other systems if you ask me, and we waited how many years for this inline images in Drupal - 10 years??? Wow, what are you guys doing over there???

D8 Picture module deprecated for Responsive Image module

The Picture module has been deprecated for the Responsive Image module. The height/width options have been removed. Since this is one of the more popular results for this search, the article should be updated to reflect this.

inline responsive images

you could also use the following module for inline responsive images: https://www.drupal.org/project/inline_responsive_images