Preparation & Configuration

Foreword

All the following are based on the 2.x branch of all collection's module, for a Drupal 10 site:

First, you need to choose the crop plugin you want to use (focalPoint or ImageWidgetCrop) and configure it.

Set Crop plugin

Focal point

See Module README

Fast Configuration :

• Install the module as usual.
• Create a crop type (automatically created by focal_point activation)
• Create an image style for focal_point crop
  • use "focal point crop" or "focal point crop and scale" effect
• On the media
  • Go to the view mode, and on the image field, choose the image style configured before
  • Go to the form mode, and on the image field, choose the "image focal point" widget

Image widget crop

See Module README

Fast Configuration:

• Install the module as usual.
• Create a crop type with the constraint you want
• Create an image style for focal_point crop
  • use "manual crop" effect and choose the crop type created before
• On the media
  • Go to the view mode, and on the image field, choose the image style configured before
  • Go to the form mode, and on the image field, choose the "image widget crop" widget and configure it to set the image style configured before

Contextual Cropping for media embed in wysiwyg

The goal here are to add the capability to add a contextual crop on a media embed in a wysiwyg.

(need media_contextual_crop_embed)

Finishing Preparation

• Activate media_contextual_crop_embed and the plugin module adapted to the crop plugin :
  • media_contextual_crop_fp_adapter if you use focal point crop
  • media_contextual_crop_iwc_adapter if you use image_widget_crop
• Edit the text format you want use (/admin/config/content/formats)
  • In the toolbar configuration, add the "insert from Media Library" plugin

• In CKEditor 5 plugin settings, you can choose the ImageStyle will be used in CROP modal. 

• In filters, activate "Embed media with Contextual Crop" and the nativ "Embed Media"

• In the filter order, please make sure that "Embed media with Contextual Crop" is set BEFORE native "Embed media"

• In Filter settings,
  • configure Embed Media:
    • as "Default view mode", the view mode which use the crop plugin
    • as Media types selectable: at least the media type with the crop

• Save the text format configuration

Use it ! 

In a content, you can add a media in the wysiwyg in the classic way

You now can use a contextual crop on this media

This open a modal with the crop widget

Save crop modal, the preview is updated.

Save the content, the crop is updated.

Note: If the media_embed use a view_mode which does not use a crop effect, an error will be displayed in the modal.

Contextual Cropping in Media Reference Fields

Here the goal is to add the capabilities to contextualize a crop a on media reference.

(need media_contextual_crop Reference)

Finishing Preparation

• Activate Media Contextual Crop Reference and the plugin module adapted to the crop plugin :
  • media_contextual_crop_fp_adapter if you use focal point crop
  • media_contextual_crop_iwc_adapter if you use image_widget_crop
• In your entity bundle (content type for example)
  • Add a "Reference / media with contextual modifications" instead of a basic "Reference / media" and configure it as usual media reference

Use it ! 

In a content, you can add a media in the referenced field and edit it locally (feature from media_library_media_modify).
In this example, we use twice the same media

On edit modal, you can set a contextual crop

Save media, Save content

Can we use both features (media embed and media reference) on the same content?

Yes, you can use the twice solution in the same site!