Insert Image
Categories
Component ID
Component name
Component type
Maintenance status
Development status
Component security advisory coverage
Component created
Component changed
Component body
This lightweight module is a kind of replacement of Insert module for Drupal 8. It allows you to manually insert images right into the text fields.
Unlike Insert, this module obliges you to use pseudo-tokens like [image:DELTA:STYLE], that will be replaced with themed images when viewing the entity. Here DELTA is the index (starting from 0) of the image being inserted, and STYLE is the name of image style (STYLE may be omitted; in this case default image will be shown). For example, here is a valid token:
[image:0:thumbnail]
Configuration
Technically saying, this module provides a text filter, which should be configured before using.
- After installation, go to http://YOURSITE/admin/config/content/formats and click Configure for text format you want to set up.
- On the text format configure screen, under Enabled filters section, check Insert Images option.
- Below, under Filter settings section, choose Insert Images tab and specify name of the field that contains images you want to insert (for example, field_inline_images).
Alternatives
To get more control on what you have in your text fields, you may take use of Token Filter module. It's a much more general solution, but less convenient if you just want to quickly insert (themed) images.
Entity Embed module is also more general and powerful solution providing similar result under certain conditions. But it is designed to be used with CKEditor and allows less theming flexibility.
Developers notes
Images being inserted can be easily themed using insert_image theme. Override default insert-image.html.twig template (which is just shows <img> tag) if you need.
Moreover, following template suggestions are supported out of the box:
insert-image--ENTITY_TYPE.html.twiginsert-image--ENTITY_TYPE--ENTITY_BUNDLE.html.twiginsert-image--ENTITY_TYPE--ENTITY_BUNDLE--VIEW_MODE.html.twig
For example, if you want to style images inserted in nodes of type "Article" when being viewed in "Full" view mode, use insert-image--node--article--full.html.twig template.