Cloud Platform
D8 WYSIWYG, Inline, & 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. In this post we'll look at:
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.
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.
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.
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 tag with data- attributes, the filter then takes this and generates whatever output HTML is desired by default that's a
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 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 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.
Cloud Platform