The 8.x-2.x version provides a working editor integration. This shall also be available in the 8.x-1-x version.

Comments

ytsurk created an issue. See original summary.

rang501’s picture

There is some code in editor-integration branch. I'm currently reviewing this part, as I need to implement this on one of my projects.
I'll create a proper patch after I'm done (hopefully today)

ytsurk’s picture

Assigned: ytsurk » rang501

Great :D
I also dedicated today for media_directories ;)

rang501’s picture

StatusFileSize
new16.6 KB

I have reviewed and tested this code and it should be enough for initial integration. If this patch is applied, the editor integration module will provide one embed button for media (currently selects the image and remote video) and enables two display modes to choose from - Full content and Image with dimensions (provided by this module).

"Full content" will just render a media entity normally.
"Image with dimensions" will render an image with user-specified dimensions, it is quite similar with the image dialog in D7, I did not add lock button, because I think it will be good to render images with fixed aspect ratio. This will work with the Image Resize Filter module, as it only adds height/width attributes to the image.

There were code for adding a link too, but I saw that Entity Embed module is already working on it #3070343: Allow to add a Drupal core link with Link Widget for Image entities using Entity Embed Dialog in CKEditor

There are some manual steps to be done:

  1. Drag button 'Media' to CKEditor toolbar.
  2. Enable filters "Display embedded entities" and "Image Resize Filter: Resize images based on their given height and width attributes" (optional, if enabled, it should run after "Display embedded entities" filter).

Missing or needs some work:

  • "Image with dimensions" should only be selectable by image media type(s). By default, there are only Image media type, but we can't restrict it that way, needs some better solution for it. Although it kinda works for other types, this is not useful, e.g remote video shows up as thumbnail image.
  • Toolbar button needs an icon, currently it shows letter "E" (default icon)

I might make improvements if I have time tomorrow. But for now, the patch can be applied with the Composer.

ytsurk’s picture

Category: Task » Feature request
Status: Active » Needs review
StatusFileSize
new17.29 KB
new1.19 KB

NIce work @rang501!

We could consider to make a sub-module for the image_resize_filter module, just to keep the module footprint small if desired?

I added an uninstall_hook to your patch to uninstall the entity browser and the button.
Not quite sure yet how to cleanup embedded entities in content - they produce an error after uninstallation when the entity where the embed is still in the DB is viewed: Uncaught PHP Exception Drupal\\Component\\Plugin\\Exception\\PluginNotFoundException: "The "entity_reference:media_directories_image_dimensions" plugin does not exist. . Probably this needs to be addressed to embed / entity_embed ..

rang501’s picture

I think something media related icon that we can use (without license issues) in our module.
Currently, there is no actual image_resize_filter related configuration available. We probably can't automate it, there might be many text formats available and we wouldn't want to mess with them, the same thing applies to the editor button. We could remove image_resize_filter dependency, as it is not actually required, height/width attributes will resize image, unless css overrides it, filter only resizes it to these dimensions.

ytsurk’s picture

The proposed image fits IMO ;) and is license-free.

And to have the image_resize_module as a loose (non-required) dependency sounds good to me.

rang501’s picture

I would use some icon set maybe we want to use icon somewhere else and this would be consistent.
FontAwesome would be good, although the CKEditor button works better with png than SVG, or IcoMoon icon set.

rang501’s picture

StatusFileSize
new18.87 KB
new2.82 KB

SVG seems sometimes ugly on CKEditor toolbar, so I generated png of it at http://fa2png.io/r/font-awesome/folder-open/?color=444444&margin=0&size=32
Embed 1.3 embeds icons into the configuration file, so this is now updated with that icon, an original icon is inside the media_directories_editor module to be re-used if needed somewhere.
Removed the image_resize_filter dependency, added readme file for additional instructions.
Maybe this is good enough for now? Other things can be solved on follow-ups.

ytsurk’s picture

Status: Needs review » Fixed
StatusFileSize
new4.61 KB

I renamed the button and entity browser, and made sure the icon is really in place (the file was 0 bytes and your approach did not work).

  • ytsurk committed 13777e4 on 8.x-1.x authored by rang501
    Issue #3101777 by rang501, ytsurk: Fill in the media_directories_editor...
heddn’s picture

Project page could use an update to remove mention of this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.