Responsive image
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
Modern web designs need to take into account the device that is being used to view the content that Drupal is presenting. Different devices have different form factors from mobile phones, to tables, to traditional desktop computers. You may have heard of the terms 'Responsive design' or 'Adaptive design', and basically these mean that rather than having a different mobile version of your site for a mobile device, the content display is modified automatically depending on the device being used.
The following are examples of how content may be presented differently:
- Show smaller images on a mobile device to conserve mobile data bandwidth.
- Rearrange template regions to best present the most important information on a small screen size.
Responsive design relies on a concept known as a breakpoint. This can be thought of as the width of the screen in pixels where the design changes to a layout more appropriate for that device.
In the default theme Bartik, there are three breakpoints defined (which is a common starting point in responsive design)–mobile, narrow, and wide. You could also think of these as mobile, tablet portrait, and desktop.
The Responsive image module allows you to add some simple mobile optimization to your website.
Enable the Responsive image module now.
When activated, a new configuration screen will be available on the Configuration page.
Locate the MEDIA section and click on Responsive image styles:
You will see two pre-defined responsive image styles:
We won't go into detail here on how to create and configure new responsive styles because that would involve too lengthy a discussion involving technical responsive design terminology.
You've already got the two pre-defined ones: Narrow and Wide so instead we'll simply employ those to kick in for your Article content type at the existing breakpoints.
Go to the Manage display page of the Article content type by navigating to:
Structure | Content Types | Article | Manage display (admin/structure/types/manage/article/display).
Note again that since we opted to customize the Full content view mode:
When you select the FORMAT of the Image field, you will see there are now a two additional ones: Responsive image option. Select this option:
Once you have selected this, click on the gear icon to choose the required Responsive image for use within this view mode:
-
No Comment