Skip to content

Instantly share code, notes, and snippets.

@kaedroho
Last active December 8, 2017 11:10
Show Gist options
  • Save kaedroho/d83f840774f2e0d7fc07bf6ea04b4dd7 to your computer and use it in GitHub Desktop.
Save kaedroho/d83f840774f2e0d7fc07bf6ea04b4dd7 to your computer and use it in GitHub Desktop.
Attempt at describing Wagtail's "fill" filter

The "fill" filter crops the image so that the final image dimensions exactly match the specified dimentions.

Note: If the image is very small, this filter may generate an image that is smaller than the specified dimentions but the aspect ratio will always be the same.

Examples:

  • fill-200x200 (generates 200x200 px thumbnail)
  • fill-200x200-c75 (generates 200x200 px thumbnail. Zoomed in to the focal point 75%)

It's most common use is generating thumbnails which must be an exact size. If the original image's aspect ratio doesn't match the required aspect ratio, the image will be cropped to match. The focal point is used to prevent cropping out the subject of the image when the subject is off centre.

The rules are as follows:

  • The crop rect must not crop into the focal point
  • The crop rect must not escape the bounds of the original image
  • The crop rect must match the aspect ratio of the final image
  • The crop rect must not be smaller than the final image

With these rules in mind, -c100 crops as closely as possible to the focal point and -c0 (default) crops as far away from the focal point as possible. Any number in between interpolates between these two extremes.

When the image cannot be cropped exactly to the focal point (which may happen when either: the "closeness" is less than 100; the aspect ratio of the crop rect doesn't match the focal point; the image isn't high enough resolution), it will include pixels from around the focal point to fill it in.

Wagtail will always try keep the centre of the focal point in the same position of the final image. For example, if the focal point is 2/3rds along the X axis of the original image, Wagtail will crop it so that the centre of the focal point is still 2/3rds along the X axis of the final image.

The only exception to this is when this positioning would cause the crop rect to break one of the first two rules above, if this happens Wagtail will "nudge" the crop rect the smallest amount possible so those rules are not broken.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment