Using the Responsive Image module
by Chaz Chumley, Matt Glaman, Richard Jones, Nick Abbott
Drupal 8: Enterprise Web Development
- Drupal 8: Enterprise Web Development
- Table of Contents
- Drupal 8: Enterprise Web Development
- Credits
- Preface
- 1. Module 1
- 1. Introduction
- 2. Installation
- 3. Basic Concepts
- 4. Getting Started with the UI
- 5. Basic Content
- 6. Structure
- 7. Advanced Content
- 8. Configuration
- 9. Users and Access Control
- 10. Optional Features
- 11. Reports
- 12. Extending Drupal
- 13. Theming Drupal
- 14. Getting Support
- 2. Module 2
- 1. Up and Running with Drupal 8
- 2. The Content Authoring Experience
- 3. Displaying Content through Views
- 4. Extending Drupal
- 5. Frontend for the Win
- 6. Creating Forms with the Form API
- 7. Plug and Play with Plugins
- 8. Multilingual and Internationalization
- 9. Configuration Management – Deploying in Drupal 8
- 10. The Entity API
- 11. Off the Drupalicon Island
- 12. Web Services
- 13. The Drupal CLI
- 3. Module 3
- 1. Setting Up Our Development Environment
- 2. Theme Administration
- 3. Dissecting a Theme
- Setting up a local development environment
- Default themes versus custom themes
- Folder structure and naming conventions
- Managing configuration in Drupal 8
- Reviewing the new info.yml file
- The role of templates in Drupal
- Creating our first basic theme
- Introducing Twig
- Template variables
- The role of the theme file in Drupal
- Summary
- 4. Getting Started – Creating Themes
- 5. Prepping Our Project
- 6. Theming Our Homepage
- Creating our HTML wrapper
- Creating our homepage
- Implementing our Header Top region
- Implementing our Header region
- Adding a logo
- Enabling Site branding
- Printing our Header region
- Creating Block templates
- Implementing our search form block
- Placing our search form block
- Creating a search form block template
- Adding custom JavaScript
- Creating an input element template
- Working with menus
- Creating a menu template
- Creating System Menu block template
- Creating a sticky header
- Implementing our Headline Region
- Implementing our Before Content region
- Implementing the footer
- Summary
- 7. Theming Our Interior Page
- 8. Theming Our Blog Listing Page
- Reviewing the Blog Listing mockup
- Creating our blog listing
- Creating a Post Listing view
- Managing our Post Listing block
- Implementing our Node template
- Adding CSS classes to Twig
- Working with content variables
- Using the without filter
- Creating our post image slider
- Working with field templates
- Adding the Owl Carousel library
- Using Twig filters for dates
- Printing title and teaser
- Creating our post metadata
- Field templates and taxonomy
- Handling comments in Drupal 8
- Creating a theme file
- Creating a Categories block
- Managing our Categories block
- Implementing responsive sidebars
- Theming a Block template
- Drupal Views and Twig templates
- Managing popular versus recent content
- Adding the About Us block
- Summary
- 9. Theming Our Blog Detail Page
- Reviewing the Blog detail mockup
- Previewing our Blog detail page
- Creating a Post Full template
- Working with comments
- Implementing social sharing capabilities
- Summary
- 10. Theming Our Contact Page
- 11. Theming Our Search Results
- 12. Tips, Tricks, and Where to Go from Here
- A. Biblography
- Index
The Responsive Image module provides a field formatter for image fields that use the HTML5 picture tag and source sets. Utilizing the Breakpoint module, mappings to breakpoints are made to denote an image style to be used at each breakpoint.
The responsive image field formatter works with using a defined responsive image style. Responsive image styles are configurations that map image formats to specific breakpoints and modifiers. First, you need to define a responsive image style, and then you can apply it to an image field.
In this recipe, we will create a responsive image style set called Article image and apply it to the Article content type's image field.
You will need to enable the Responsive Image module as it is not automatically enabled with the standard installation.
- Go to Configuration and then to Responsive image styles under the Media section. Click on Add responsive image style to begin creating a new style set.
- Provide a
labelthat will be used to administratively identify the Responsive image style set. - Select a breakpoint group that will be used as a source of breakpoints to define the image style map.
- Each breakpoint will have a
fieldset. Expand thefieldsetand select a single image style, and then, pick an appropriate image style:
- Additionally, choose a fallback image style in the event of a browser that doesn't support source sets, such as Internet Explorer 8.
- Click on Save to save the configuration, and add the new style set:
- Go to Structure and Content types, and select Manage Display from the Article content type's drop-down menu.
- Change the Image field's formatter to Responsive image.
- Click on the Settings tab of the field formatter to choose your new Responsive image style set. Select Article image from the Responsive image style dropdown:
- Click on Update to save the field formatter settings, and then click on Save to save the field display settings.
The Responsive image style provides three components: a responsive image element, the responsive image style configuration entity, and the responsive image field formatter. The configuration entity is consumed by the field formatter and displayed through the responsive image element.
The responsive image style entity contains an array of breakpoints to image style mappings. The available breakpoints are defined by the selected breakpoint groups. Breakpoint groups can be changed anytime; however, the previous mappings will be lost.
The responsive image element prints a picture element with each breakpoint defining a new source element. The breakpoint's media query value is provided as the media attribute for the element.
A benefit of using the responsive image formatter is performance. Browsers will only download the resources defined in the srcset of the appropriate source tag. This not only allows you to a deliver a more appropriate image size but also a smaller payload on smaller devices.
The Responsive Image module attaches the picturefill library to the responsive image element definition. The element's template also provides HTML to implement the polyfill. The polyfill can be removed by overriding the element's template and overriding the picturefill library to be disabled.
The following snippet, when added to a theme's info.yml, will disable the picturefill library:
libraries-override: core/picturefill: false
Then, the responsive-image.html.twig must be overridden by the theme to remove the extra HTML generated in the template for the polyfill:
- Refer to the picture element on the Mozilla Developer Network at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
- Refer to
picturefillfor IE9 at http://scottjehl.github.io/picturefill/#ie9
-
No Comment