- OSU Drupal 8 Overview
- Technical Manual
- Working with Content
- Working with Structure
- Working with Appearance
- Working with Configuration
- Working with People
- Working with Groups
- Advanced Topics
OREGON STATE UNIVERSITY
Open search box
Image Styles actually provides a Scale and Crop style out of the box, but the default style doesn't provide many configuration options.
Creating a custom two-step scale and crop style will provide the ability to better control your critical dimensions, as well as provide anchoring to consistently crop images from a given side.
Go to Admin Menu > Configuration > Media > Image Styles.
Drupal 8 comes with three default image styles: Large, Medium, and Small.
We're going to add a custom style to the list.
Click the Add Image Style button.
You'll be redirected to the Add Image Style screen.
Image Style Name text field = enter a name for your image style. Tip: determine and implement a naming convention for your image styles. It will save you a great deal of frustration in the long run.
Click the Create New Style button.
Select a New Effect select field = Scale.
Click the Add button.
Width text field = 1600.
We're performing a scale operation on this image therefore we only really need one dimension. Leave the Height field blank - it will adjust itself based on the width we've configured.
Allow Upscaling checkbox = leave blank. Checking this will allow a small image to be stretched to a size that is larger than the original image, which can result in poor image quality.
Click the Add Effect button.
Select a New Effect select field = Crop.
Click the Add button.
Width text field = 1800. (Note how this is the width that we scaled to in our previous setting. The Crop effect requires values in both fields.)
Height text field = 640.
Anchor radio buttons = select the side that the crop will take. For our purposes, choose the center radio button.
Click the Add Effect button.
Ensure that the Scale effect is at the top of the list. The order of processing starts at the top of this list.
Click the Update Style button.
You will receive a system message at the top of the screen informing you that changes to the style have been saved.