CKEditor 5 using front-end theme templates when rendering media

Created on 28 December 2023, 12 months ago
Updated 29 December 2023, 12 months ago

Problem/Motivation

Upon updating from Drupal 9.x to 10.2.x, all media embedding in the WYSIWYG has started to use my front-end theme's templates to render referenced media.

Media becomes nearly unusable given that I implement JS lazyloading on my front-end theme, so the only attributes present on images in the WYSIWYG are my preprocessed data attributes.

This is an update-blocking issue for content creation.

🐛 Bug report
Status

Active

Version

10.2

Component
CKEditor 5 

Last updated 6 days ago

Created by

🇺🇸United States FrankieD3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @FrankieD3
  • 🇺🇸United States FrankieD3

    It very well could be, though I mistakenly left out a vital bit of information in my original post. This isn't so much a CSS issue as it is a template issue.

    I have the following preprocess in my front-end theme's .theme file, and it is effecting the rendering of elements within CKEditor 5 with the admin theme. To note, I am using the Gin admin theme.

    function theme_preprocess_image(array &$variables) {
      // Remove the "title" attribute from the image element.
      unset($variables['attributes']['title']);
    
      // Check if the "loading" attribute is set to "lazy".
      if (isset($variables['attributes']['loading']) && $variables['attributes']['loading'] === 'lazy') {
        $variables['attributes']['class'][] = 'lazy';
        unset($variables['attributes']['loading']);
    
        // If the "src" attribute is set, move it to "data-src".
        if (isset($variables['attributes']['src'])) {
          $variables['attributes']['data-src'] = $variables['attributes']['src'];
          unset($variables['attributes']['src']);
        }
    
        // If the "srcset" attribute is set, unset it in favor of sibling source elements.
        if (isset($variables['attributes']['srcset'])) {
          unset($variables['attributes']['srcset']);
        }
    
        // If the "sizes" attribute is set, unset it in favor of sibling source elements.
        if (isset($variables['attributes']['sizes'])) {
          unset($variables['attributes']['sizes']);
        }
      }
    }
    
Production build 0.71.5 2024