Ajouter un commentaire

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.

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

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?

Sign up to a live Drupal 8 Site Building tutorial

You can sign up to a Live online Drupal 8 site building tutorial on Drupal 8. It will even suit beginners who are new to Drupal. We'll look at content types, WYSIWYG configuration, Image handling, Views, Display modes, Blocks, the comment form and the contact form.

Sign up to Drupal 8 Preview for Site Builders , Oct 23rd 1:00 PM EDT

See you then!

Sign up to our training newsletter

Sign up to our training newsletter to be notified about more tutorials for you. Please also check out the
Drupal Training events calendar

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • Pour publier des morceaux de code, entourez-les avec les balises <code>...</code>. Pour du PHP, utilisez. <?php ... ?>, ce qui va colorier le code en fonction de sa syntaxe.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
By submitting this form, you accept the Mollom privacy policy.