How to setup a working Responsive Image in Drupal 8

Responsive Image module is a core module in Drupal 8 and this guide will show setting up this module with working example.

Steps:

  1. Enable the Responsive Image module at http://www.yoursite.com/admin/modules.

  2. We can use existing Breakpoint group but in this guide we will create our own Breakpoint group. It can be created as module or as theme and we will create this as module. Inside /modules folder of your Drupal 8 site, create a folder labelled as "site_optimization".

  3. Inside the /modules/site_optimization folder create the info file with filename of "site_optimization.info.yml". Copy and paste the following codes inside this file:

          
    name: Site optimization
    description: Site optimization.
    type: module
    package: Custom
    version: 1.0
    core: 8.x
          
        
  4. Still inside the /modules/site_optimization folder create the info file with filename of "site_optimization.breakpoints.yml". Copy and paste the following codes inside this file:

          
    site_optimization.big_screen:
      label: big screen
      mediaQuery: '(min-width: 1025px)'
      weight: 4
      multipliers:
        - 1x
    site_optimization.tablet_landscape:
      label: tablet landscape
      mediaQuery: '(min-width: 769px)'
      weight: 3
      multipliers:
        - 1x
    site_optimization.tablet:
      label: tablet portrait
      mediaQuery: '(min-width: 481px)'
      weight: 2
      multipliers:
        - 1x
    site_optimization.smalltouch_landscape:
      label: smalltouch landscape
      mediaQuery: '(min-width: 321px)'
      weight: 1
      multipliers:
        - 1x
    site_optimization.smalltouch:
      label: smalltouch portrait
      mediaQuery: '(min-width: 1px)'
      weight: 0
      multipliers:
        - 1x
          
        
  5. Clear the Drupal cache and enable this site_optimization module we have created.

  6. We will create four image styles to support major device screen sizes. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image quarter (max width 320px)" and "Machine-readable name" field with "image_quarter".

    Create image quarter

    Add "Scale" effect.

    Add scale effect in image quarter

    ... and populate the "Width" field with "320" and leave the "Height" field empty. This settings will limit the image to maximum width of 320 pixels and height size will be auto.

    Configure scale effect in image quarter

  7. Lets create the second image style. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image half (max width 480px)" and "Machine-readable name" field with "image_half".

    Create image half

    Add "Scale" effect.

    Add scale effect in image half

    ... and populate the "Width" field with "480" and leave the "Height" field empty. This settings will limit the image to maximum width of 480 pixels and height size will be auto.

    Configure scale effect in image half

  8. Lets create the third image style. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image part full (max width 768px)" and "Machine-readable name" field with "image_part_full".

    Create image part full

    Add "Scale" effect.

    Add scale effect in image part full

    ... and populate the "Width" field with "768" and leave the "Height" field empty. This settings will limit the image to maximum width of 768 pixels and height size will be auto.

    Configure scale effect in image part full

  9. Lets create the fourth image style. Go to http://www.yoursite.com/admin/config/media/image-styles and click "Add image style" button. Populate the "Image style name" field with "Image full (max width 1100px)" and "Machine-readable name" field with "image_full".

    Create image full

    Add "Scale" effect.

    Add scale effect in image full

    ... and populate the "Width" field with "1100" and leave the "Height" field empty. This settings will limit the image to maximum width of 1100 pixels and height size will be auto.

    Configure scale effect in image full

  10. Now we will create a Responsive image styles. Go to http://www.yoursite.com/admin/config/media/responsive-image-style and click "Add responsive image styles" button.

    Create responsive image style

  11. Populate the "Label" with "Global image style". Select "Site optimization" from "Breakpoint group" dropdown menu. Collapse the "1x big screen [(min-width: 1025px)]", select the "Select a single image style." option from "Type" and select "Image full (max width 1100px)" from "Image style" dropdown menu. Collapse the "1x tablet landscape [(min-width: 769px)]", select the "Select a single image style." option from "Type" and select "Image full (max width 1100px)" from "Image style" dropdown menu. Collapse the "1x tablet portrait [(min-width: 481px)]", select the "Select a single image style." option from "Type" and select "Image part full (max width 768px)" from "Image style" dropdown menu. Collapse the "1x smalltouch landscape [(min-width: 321px)]", select the "Select a single image style." option from "Type" and select "Image half (max width 480px)" from "Image style" dropdown menu. Collapse the "1x smalltouch portrait [(min-width: 1px)]", select the "Select a single image style." option from "Type" and select "Image quarter (max width 320px)" from "Image style" dropdown menu. In "Fallback image style" dropdown menu select "Image quarter (max width 320px)" option and click "Save" button.

    Responsive image style settings

  12. To test, create a content and upload an image inside the Body field. Click "Source" button on WYSIWYG to edit the HTML code of the uploaded image and insert data-responsive-image-style="global_image_style" inside the img tag. Click "Save and publish" button.

    Create test content

  13. The output HTML of the test image should have picture tag.

    Responsive image test result

Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.