An unfortunate bug exists in Drupal 9 related to adding links around images inserted from the Media Library into a field with the editing toolbar: each time the editing toolbar loads, an empty paragraph tag is added after any Media image with a link. If the page is saved without deleting the empty paragraph, it will add a visible blank line in the content. Repeated edits will insert more empty paragraphs that will build up. The following actions are known to trigger this bug:
- Clicking the Edit tab to begin editing.
- Toggling the editor from Source to rich text mode.
While no longer intuitive, workarounds exist to add links around images. Some workaround options may work better than others for your specific need and situation.
Insert a link in a Media Library image's caption field instead
- In the editing window, click the Insert from Media Library button to insert your image.
- When you see the Edit media dialog, check the Caption box.
- When your image is placed on the page, the Caption field will be visible beneath the image. Type in your caption.
- Highlight the caption text and then click the Link button (chain link icon) and create the URL for your link.
- Save the page.
Put the image + link in a custom layout in the page's Layout tab, and then don't edit that block again
If you can sequester the image + link by itself in a block in a custom layout for the page, this will separate it from the other content and allow you to edit the other content without triggering the bug. If you edit the block containing the image + link, it will trigger the bug, and you may need to manually remove empty paragraphs.
Put the image + link in a table
If appropriate, images with links inside table cells do not trigger this bug.
Insert a link around an image using HTML
This option requires some knowledge of HTML. The basic code for an image + link, to be added in Source mode, is as follows:
<a href="https://www.example.com/"><img src="/path/to/your/image.png" alt="Description for screen readers and search spiders"></a>
Insert an image with a link using IMCE File Manager (AKA, the file browser we used with Drupal 7)
For sites that expect to create links on images on a regular basis, an alternate file browser can be added for your site, providing an additional button to Insert from IMCE File Manager. This button inserts an image as a plain <img> tag that won't trigger the empty paragraph bug when a link is added to the image.
Using Media and IMCE File Manager together on a Drupal 9 site
Tracking this bug on Drupal.org
SCLS staff are eager to fix this bug and may try patches and workarounds that become available in the future. We are monitoring the following related issues on Drupal.org: