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:
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.
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:
Add the following Breakpoint at the end of this file:
label: Mobile Responsive Image Resize
mediaQuery: 'all and (max-width: 699px)'
Step 3: Create New Image Style
Go to the following URL:
Add new Image Style called: "Hero Mobile Portrait"
Scale and crop 640×1046
Step 4: Create 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
Format: Responsive Image
Next, apply the "Hero Article" Responsive Image Style.
View Chrome's Network Tab to see that only the proper image is downloaded.
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".
Anywhere along the way, if you don't see what you expect, clear the Drupal cache:
lando drush cr