Drupal 8: Responsive images, Cropping, Sliders!

Maria
Maria takes a sideways look at all things agile and collective.

Some notes on all things image (responsive images, sliders, cropping) in Drupal 8!

Breakpoints

First of all we need to ensure we have breakpoints defined in our theme - in the yourtheme.breakpoints.yml you can define them like this

 

yourtheme.mobile: label: mobile mediaQuery: '(min-width: 0px)' weight: 0 multipliers: - 1x yourtheme.narrow: label: narrow mediaQuery: 'all and (min-width: 560px) and (max-width: 860px)' weight: 1 multipliers: - 1x yourtheme.wide: label: wide mediaQuery: 'all and (min-width: 861px)' weight: 2 multipliers: - 1x

Responsive Images

Setting up responsive images. Enable the responsive image module that comes with Drupal 8 core. 

$ drush en responsive_image The following extensions will be enabled: responsive_image Do you really want to continue? (y/n): y responsive_image was enabled successfully.

You can configure the responsive image styles through the UI at /admin/config/media/responsive-image-style

Create a new responsive image style.

Choose your theme from the breakpoint group (you can define multiple breakpoint groups in your theme by adding .groupname to the name of the breakpoint and group: yourtheme:groupname declaration. Eg

yourtheme.groupname.wide: label: wide mediaQuery: 'all and (min-width: 861px)' weight: 2 multipliers: - 1x group: yourtheme.groupname

You then have the option to use mutliple image styles and use the sizes attribute, see the Responsive Image help page for more information about the sizes attribute. 

You can also select a single image style per breakpoint, or not use a particular breakpoint. 

Image styles themselves are configured in a similar fashion to Drupal 7  - /admin/config/media/image-styles

Once you have this set up Responsive Image becomes available as a field formatter on any Image field.

Cropping

Installation taken from the module README (http://cgit.drupalcode.org/image_widget_crop/tree/README.md)

Installation ------------ 1. Download and extract the module to your (`sites/all/modules/contrib`) folder. 2. Enable the module on the Drupal Modules page (`admin/modules`) or using $ drush en The module is currently using Cropper as a library to display, the cropping widget. To properly configure it, do the following: * Local library: 1. Download the latest version of Cropper at https://github.com/fengyuanchen/cropper. 2. Copy the dist folder into: - /libraries/cropper or - /sites/default/libraries/cropper or - /sites/EXAMPLE/libraries/cropper or - /sites/all/libraries/cropper 3. Enable the libraries module. * External library: 1. Set the external URL for the minified version of the library and CSS file, in Image Crop Widget settings (`/admin/config/media/crop-widget`), found at https://cdnjs.com/libraries/cropper. NOTE: The external library is set by default when you enable the module.

 

Configuration

Add a crop type /admin/structure/crop/add

This allows you to define an aspect ratio (or not) , a soft limit and hard limit. The soft limit warns the user when they are trying to crop an image smaller than the limit, the hard limit will not allow them to crop smaller. 

You can then choose ImageWidgetCrop as the widget for an Image field on the Manage Form Display on any given content type. 

This allows a number of options, and you can choose one or more crop types for this field.

The user is then presented with an easy to use cropping interface, which helpfully warns you if you're cropping an image with multiple uses.  

You'll still need to set/create an image style/s to use the crop type - which you can then set as the field formatter in the display section for your field, or assign to an responsive image style if you want responsive cropped images. 

Sliders

My first forays in to sliders show that both the following are available:

Both work, my preference is flexslider, it's more configurable and nicer to theme, and more familar. 

A few notes:

Flexslider Fields needs to be enabled to use it as a field formatter. 
The D8 version of the module allows intergration with views without a separate module. 

Tie this all together and we can have croppable, responsive sliders - what more do we need!

 

Add new comment

Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.