Using Media and IMCE File Manager together on a Drupal 9 site

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. This configuration is supported as a workaround and will be phased out when the bug is fixed.

Bug: Media images with links create empty paragraph tags

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:

Save PowerPoint Slides as Images

Slides in a PowerPoint file can be saved as individual images with the following steps:

Avoid mixed content warnings (HTTPS/HTTP)

Web browsers may display "mixed content" warnings in the address bar when an HTTPS (secure) webpage contains images, iframes, or other resources from HTTP (non-secure) source URLs on other websites. This may cause the whole page to be delivered insecurely.

  • Staff should keep an eye out for "mixed content" that causes pages to not display as HTTPS.
  • Staff should update links, images, and embedded content on the site to make it HTTPS where possible.

Jump to:

What does it look like when a page has mixed content?

Images with Clickable Links

An image can be turned into a clickable button by adding a link to the image.

Avoid copying and pasting images from clipboard

Copying an image to the clipboard and then pasting it into a page's Body box can cause severe problems for your website. The action of pasting the image from the clipboard inserts it into the code with a very long string of letters and numbers as its URL source, instead of a real URL.

Chrome and Internet Explorer prevent this action, but Firefox allows it.

Adding Images to Your Pages

Images stored on your computer/file share can be added to your pages using the CKEditor toolbar and Drupal's File Browser.

Subscribe to RSS - images