Component

Image cropper

Displays an image with resizable crop function

This component uses Cropper.js - a JavaScript library for cropping image. Users can select an specific area of an image, and then upload the coordinates data to server-side to crop the image, or crop the image on browser-side directly.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

The image you selected has been automatically resized to fit on GOV.UK. If you have JavaScript enabled in your browser you will be able to manually crop and resize the image.

Larry the cat

The part you select will be resized for GOV.UK. The shape is fixed.

Larry the cat

How to call this component

<%= render "components/image_cropper", {
  src: "https://assets.publishing.service.gov.uk/government/assets/history/buildings/larry-the-cat-a47549e08bdbc6cd0e3e042eea943f65b7a4590d95642586e51acb44bb2dcea2.jpg",
  no_js_src: "https://assets.publishing.service.gov.uk/government/assets/history/buildings/larry-the-cat-a47549e08bdbc6cd0e3e042eea943f65b7a4590d95642586e51acb44bb2dcea2.jpg",
  alt_text: "Larry the cat",
  caption: "Larry, Chief Mouser to the Cabinet Office",
  credit: "His Majesty's Government",
  crop_x: 0,
  crop_y: 0,
  crop_width: 400,
  crop_height: 300
} %>

Accessibility acceptance criteria

Images in this component must:

  • have alt text