Insert module for Drupal 8

Insert is a utility that makes inserting images and links to files into text areas or WYSIWYGs much easier by adding a simple JavaScript-based button to file and image fields. Images may be inserted using any image style preset.

Drupal 7

Features

  • Support for all major WYSIWYG editors, including tinyMCE, CKeditor, the WYSIWYG project (the recommended approach), and plain text areas.
  • Insert images using any of your image styles.
  • Maximum width setting for inserted images (for combined use with the Image Resize Filter module).
  • Per-field insert configuration.

Drupal 8

Rewritten for Drupal 8 by H. Snater.

Currently, only CKEditor is supported. Please create issues / support respective issues to push development.

New features

  • Rotation controls may be added to the widget user interface.
  • Added an image effect mock named Link (Insert). Applying this image effect to an image style will link the image inserted using the Insert button to the original image. That allows outputting preview images a JavaScript gallery can easily be attached to in the front-end while retaining equivalent non-JavaScript functionality.

Configuration

  1. Check out /admin/config/content/insert to configure the module and make sure the text formats you want to use the module with do not strip HTML tags and attributes required by the Insert module to work properly.
  2. Editing your content type, go to the "Manage form display" tab and select the "Image Insert" widget for an Image field type or the "File Insert" widget for a File field type. Configure using the cog button.
  3. You probably also want to hide the actual field output in the front-end. Having switched to the "Manage display" tab, you can select "- Hidden -" as format for the fields to prevent showing their contents a second time in addition to the inline content.

Notes

  • By default configuration, specific tags and attributes are stripped from HTML input and output as to the text format's HTML filter setting. Yet, for proper behaviour, some tags (<img>, <a>, <span>) and attributes on those tags need to be white-listed. You can have the Insert module automatically add required tags and attributes via the module configuration at /admin/config/content/insert. After enabling a text format, you need to save the configuration of that text format at least once for the setting to take effect.* (No need to alter anything, just go to the text formats' configuration page (via /admin/config/content/formats) and save the formats.) Warning: Experimental regular expression processing. (At least for now, better backup the HTML filter white list before saving, just to be sure.)
  • Decide between two ways inserted images may be aligned by leaving the image button in a text format's editor toolbar (default configuration for basic HTML and full HTML text format) or removing it from the toolbar.
    If the image button is left in the toolbar, images may be aligned using the image button.
    If the image button is removed, images may be aligned using custom CSS classes using the editor's style drop-down (not in the editor's toolbar by default). A benefit using this method is that other custom styles may be assigned to images as well.
    Both methods are basically compatible in the sense that no images are dropped when switching the method. Yet, alignment, respectively styles assigned to images will be lost when altering the node the next time.
  • For using file icons, appropriate styles need to be defined. A simple solution is to use the icons from core's "classy" theme:
    • In order to make the icons available to the CKEditor instances attach the following to your (front-end!) theme's <theme>.info.yml:
    • ckeditor_stylesheets:
        - ../../core/themes/classy/css/components/file.css
      

      and for displaying the icons in the actual front-end, make sure you add a dependency to class/file to one of the theme's libraries used in the front-end.

Supporting organizations: 
Drupal 7 version

Project Information

Downloads