Drupal Image Styles
Drupal's Image styles allow you to upload a single image but display it in several ways; each way is defined as an image style in which a series of effects to apply to the image is defined. When an image is uploaded and used, a copy of the image is made with the effects of the image style applied. It is then stored in the files folder.
The image styles that we have defined are in the table. In non of these will an image be up-scaled to a larger size than the original. So your original file should be large enough to scale down!
These image styles are (mostly) set by the web designer and administrators. Content Editors can ask for others to be set up. See Gutenberg: Using Images to discover how to used images and image styles in the Gutenberg editor
Name | Action | Use |
720p | Scale and crop to 1280×720. | For a wide screen |
HD | Scale width to 1280px. | |
Large (480×480) | Scale to 480x480 | |
Large Carousel | Scale and crop to 1280×360. | used in the 'slideshow block on the front page |
Media Library thumbnail (220×220) | Scale to 220x220. | used by the media manager |
Medium (220×220) | Scale to 220×220 | |
Medium (330 x220max) | Scale and crop to 330×220 | |
Medium-large (330x330) | Scale to 330×330 | |
medium-square (330x300) | Scale and crop 300×300 | |
Summary 165h | Scale height 165 | |
Thumbnail (100×100) | Scale to 100x100 | |
Wide (1090) | Scale width to 1090 |
Scale to ‘w’ x ‘h’ (pixels) – will produce an image no larger than ‘w’ x ‘h’:
For a portrait image, the height will be set to ‘h’, and for a landscape image its width will be set to ‘w’. The other dimension is set to maintain the aspect ratio, and will be smaller.
Scale and crop to ‘w’ x ‘h’ (pixels) – will produce an image exactly ‘w’ x ‘h’:
For a portrait image, the width will be set to ‘w’ and the height cropped to ‘h’, and for a landscape image its height will be set to ‘h’, and the width cropped to ‘w’.
Scale width to ‘w’ - will produce an image ‘w’ in width, maintaining the aspect ratio
Scale height to ‘h’ - will produce an image ‘h’ in height, maintaining the aspect ratio