Advertising sustains the DA. Ads are hidden for members. Join today

On this page

Style Effects

Last updated on
27 December 2019

Are effects you can give to your image style. These effects will influence how your image is displayed when using the selected image style. By default the drupal core image module comes with seven style effects. However some modules will provide their own style effects. For example the crop module provides the Manual crop style effect. Breakgen has only been tested with the image and crop module therefore we'll only explain these style effects. 

Style effect Description Provider
Convert Converts an image between extensions (e.g. from PNG to JPEG). Image
Crop Crop will make images an exact set of dimensions. This may cause parts of the image to be cut off. Image
Desaturate Desaturate converts an image to grayscale. Image
Resize Resizing will make images an exact set of dimensions. This may cause images to be stretched or shrunk disproportionately. Image
Rotate Rotating an image may cause the dimensions of an image to increase to fit the diagonal. Image
Scale and Crop Scale and crop will maintain the aspect-ratio of the original image, then crop the larger dimension. This is most useful for creating perfectly square thumbnails without stretching the image. Image
Scale Scaling will maintain the aspect-ratio of the original image. If only a single dimension is specified, the other dimension will be calculated. Image
Manual Crop Applies manually provided crop to the image. Crop

Crop types as YAML

Each crop type can be configured using variables provided by the crop type plugin. Breakgen directly configures these style effects in a way that it matches the configuration of that style effect type. Meaning you can copy and paste style effects from existing config into breakgen. However because it is a hassle to go know all image style configurations by hearth we'll go over each of them.

Convert

Data Options
extension

png
jpeg
jpg
jpe
gif

Yaml 

- id: image_convert
  weight: 1
  data:
    extension: png

Crop

Data Options
width

integer representing amount of pixels
height integer representing amount of pixels
anchor left-top
center-top
right-top
left-center
center-center
right-center
left-bottom
center-bottom
right-bottom

Yaml

- id: image_crop
  weight: 1
  data:
    width: 300
    height: 200
    anchor: center-center

Desaturate

Data Options

No data

This style effect does not accept any configuration.

Yaml

- id: image_desaturate
  weight: 1
  data: {  }

Resize

Data Options
width

integer representing amount of pixels
height integer representing amount of pixels

Yaml

- id: image_resize
  weight: 1
  data:
    width: 300
    height: 200

Rotate

Data Options
degrees

amount of degrees between 0 and 360
bgcolor The background color as hexadecimal (E.G: '#FFFFFF').
random Randomize the rotation angle for each image. The angle specified is used as a maximum. true or false

Yaml

- id: image_rotate
  weight: 1
  data:
    degrees: 90
    bgcolor: '#FFFFFF'
    random: true

Scale

Data Options
width

integer representing amount of pixels
height integer representing amount of pixels
upscale Let scale make images larger than their original size. true or false

Yaml

- id: image_scale
  weight: 1
  data:
    width: 300
    height: 200
    upscale: true

Scale and Crop

Data Options
width

integer representing amount of pixels
height integer representing amount of pixels
anchor left-top
center-top
right-top
left-center
center-center
right-center
left-bottom
center-bottom
right-bottom

Yaml

- id: image_scale_and_crop
  weight: 1
  data:
    width: 300
    height: 200
    anchor: center-center

Help improve this page

Page status: No known problems

You can: