Nuxtstop

For all things nuxt.js

Setting up image styles in Drupal 8

#drupal #webdev #tutorial #drush
9 0

All images displayed on the site must have an image style. Otherwise they will be displayed in their original size.

A 4000x4000 picture can take a very long time to load.<br>

Go to "Configuration" → "Image Styles":

/admin/config/media/image-styles
Enter fullscreen mode Exit fullscreen mode

List of standard image styles

Click the "Add Image Style" button → Write the name and change the machine name.

Image description

Now we need to add an effect. To begin with, it is enough to know about two:

  • Scaling;
  • Scaling and Cropping.

Scaling will proportionally reduce the size of your image:

If you have an image of 2000x1000 and you scale it 500x500, the result will be a picture of 500x250.

Scale and crop will set the image to the dimensions you specify:

If you have an image of 2000x1000 and you scale and crop to 500x500, the result will be an image of 500x500.

Go to control the display of the entity that outputs the image:

To make this setting appear - click on the gear icon.<br>

In the settings, select the image style we created → Save.

Scaling and cropping 400x250

If the images are not updated, use the command:

drush image-flush --all ; drush cr
Enter fullscreen mode Exit fullscreen mode
Add comment