Contrib.social

Improve Layout Builder placeholder for SVG Image/Media fields

Open on Drupal.org →
Created on 13 October 2023, about 1 year ago

Problem/Motivation

When placing a SVG Media field block or SVG Image Field block into a Layout on a content type with Layout builder enabled, the preview contains a dynamically generated text file, which cannot be properly rendered in an <img> tag, and therefore appears broken.

SVG Media Field block in LB:

<div class="block__content">
  <div class="field field--name-field-media field--type-entity-reference field--label-hidden field__item">
    <div class="media media--type-vector-image media--unpublished media--view-mode-default">
      <div class="field field--name-field-media-svg field--type-svg-image-field field--label-hidden field__item">
        <img width="400" height="400" alt="" src="/sites/default/files/2023-10/o7JMWdo1Hg.txt" draggable="false" />
      </div>
    </div>
  </div>
</div>

SVG Image Field block in LB:

<div class="block__content">
  <div class="field field--name-field-svg-image field--type-svg-image-field field--label-above">
    <div class="field__label">SVG Image</div>
    <div class="field__item">
      <img width="25" height="25" alt="" src="/sites/default/files/2023-10/wBMDPu8DvX.txt">
    </div>
  </div>
</div>

Steps to reproduce

  • Launch https://simplytest.me with Drupal core and SVG Image Field module.
  • Enable "Layout Builder" core module and configured the Default view mode of the "Article" content type to use Layout Builder. I left the option "Allow each content item to have its layout customized" unchecked.
  • Enable "Media" & "Media Library" core modules and the "SVG Image Field - Media bundle" submodule, in order to have the "Vector image" media type.
  • Add a "Media" field to the "Article" content type and allow selection from the "Vector image" media type in field config settings.
  • Add an "Svg Image" field to the "Article" content type.
  • Edit the "Article" Layout and add a content block the "Media" field. Configure it to display the "Rendered entity" using the "Default" view mode.
  • Edit the "Article" Layout and add a content block the "Svg Image" field. Configure it with the "SVG Image Field formatter" with the default presets

Proposed resolution

Generate a placeholder SVG and use it instead of the auto-generated plain text file.

We may even be able to reference one of the text SVGs that comes packaged with the module, eg valid_svg--with-xml-doctype.svg

Remaining tasks

  • Research how to intercept/hook/alter the code that auto-generates placeholder content for fields in LB.
  • Write a patch.

User interface changes

Placeholder images in Layout builder blocks for SVG Image Fields will display a working SVG image in the browser.

API changes

N/a

Data model changes

N/a

📌 Task
Status

Active

Version

2.3

Component

Code

Created by

🇪🇨Ecuador jwilson3

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024