Responsive Images

## Environment (optional) Skip this section if you already have a Drupal environment ready to use this recipe. If you wish to spin up a simple site with Drupal 8, I suggest starting with Brian Perry's Olivero Sandbox here

For the instructions below, I cloned this repo to my local machine and followed the README.

The commands I ran to spin up the environment were:

cd dev/olivero-sandbox-master lando start ./scripts/install.sh

You will need to log in with the Admin account for the Drupal site to follow this recipe. One way to do this is to use Drush. Learn more about drush here.

Once drush is installed, you can log in as an Admin in Drupal using this command: lando drush uli -l http://olivero-sandbox.lndo.site/

---

## Step 1: Enable Modules Make sure that both the Responsive Image and Breakpoint modules are enabled. Go to the following link on your local environment to verify the modules are enabled. /admin/modules

You can also use Drush to enable the modules using these commands: lando drush en responsive_image lando drush en breakpoint

## Step 2: Add New Breakpoint

This step and subsequent steps assume you will be using the Olivero theme in Drupal 8. To add a new breakpoint to the Olivero theme, find this file on your machine: web/themes/contrib/olivero/olivero.breakpoints.yml

Add the following Breakpoint at the end of this file: olivero.responsive-test: label: Mobile Responsive Image Resize mediaQuery: 'all and (max-width: 699px)' weight: 8 multipliers: - 1x

## Step 3: Create New Image Style

Go to the following URL: /admin/config/media/image-styles. Add new Image Style called: "Hero Mobile Portrait" Scale and crop 640×1046

## Step 4: Create Responsive Image Style

``` /admin/config/media/responsive-image-style Add responsive image style: "Hero Article"

Choose Olivero as Breakpoint Group 1X MOBILE RESPONSIVE IMAGE RESIZE [ALL AND (MAX-WIDTH: 699PX)] Single Image Style Hero Mobile Portrait ```

## Step 5: Apply Responsive Image Style to Article Content Type

Go to Article Content Type /admin/structure/types

Manage Display /admin/structure/types/manage/article/display

Format: Responsive Image

Next, apply the "Hero Article" Responsive Image Style.

## Test View Chrome's Network Tab to see that only the proper image is downloaded.

## Troubleshooting Note that if you alter Image Styles, you may need to flush the image cache to re-create the images. The great thing about Drupal and images is that the original images are not altered! By flushing an Image Style cache, new images are created the next time you visit a page that uses that particular Image Style. You can flush the cache for each individual Image Style by going to the following link in the Admin, finding the Image Style you want to re-create images, and select the "Flush" under "Operations". admin/config/media/image-styles

Anywhere along the way, if you don't see what you expect, clear the Drupal cache: lando drush cr