CSS class media--background is replaced by b-bg

Created on 21 March 2023, about 1 year ago
Updated 24 March 2023, about 1 year ago

Problem/Motivation

I'm on Drupal 9. This is happening on vs 2.13 and 2.14 and across a couple different sites I'm working on. When updating the Blazy UI Format Settings with or without changes in the Admin UI, it is updating various settings that were not changed.

Steps to reproduce

1 Go to Structure > Media Types > Image > Manage Display
Note: I've added a new image and selected Blazy as the format and still have the same issue.

2 View an image/media with Blazy as the format with lazy as the loading. I have one in a view mode, you should see the view mode in the settings summary. You may also see other settings like alt or title.

ex. I have this
Caption: title, alt
Background: yes
Image style: Max Desktop
Current view mode: css_responsive_background
Loading: lazy

3 Click on the gear to the right of the image to view Format Settings.

4 Don't make any changes and click on Update.
This is what I see

Image style: Max Desktop
Background: 1
Caption: title, alt

5 Click save at the bottom
This is what I see, lazy load and current view mode are removed. I refreshed and cleared cache and the settings haven't changed.
Caption: title, alt
Background: yes
Image style: Max Desktop

6 I view my image on the site and now it is not filling the background like it was. The media--background class has been removed from the background image and replaced with media--image. If I swap those classes on the element in Inspect, the image is working fine.

7 Export the config. Even though I have changed nothing, this config is updated. Confirming what I was seeing, lazy and my view mode have been removed.
core.entity_view_display.media.image.css_responsive_background

Changes:
Added:
lazy: ''"
loading: ''
preload: false
grid: ''
grid_medium: ''
grid_small: ''

Removed:
grid: null
grid_medium: null
grid_small: null
breakpoints:
xs:
breakpoint: ''
width: ''
image_style: ''
sm:
breakpoint: ''
width: ''
image_style: ''
md:
breakpoint: ''
width: ''
image_style: ''
lg:
breakpoint: ''
width: ''
image_style: ''
xl:
breakpoint: ''
width: ''
image_style: ''
current_view_mode: css_responsive_background
fx: ''
icon: ''
sizes: ''
grid_header: ''
_uri: ''

8 If I go back to the UI and change from lazy to another option, that option saves. If I go back to lazy and save, it does not save.

Proposed resolution

I don't have a proposed solution right now as I don't know what is happening.

💬 Support request
Status

Fixed

Version

2.13

Component

User interface

Created by

🇺🇸United States chambers

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

Comments & Activities

  • Issue created by @chambers
  • 🇺🇸United States chambers
  • Status changed to Postponed: needs info about 1 year ago
  • 🇮🇩Indonesia gausarts

    Thank you.

    I haven't got time to see to it, but would like to clarify a few things first.

    Removed settings:

    • Custom Breakpoints were deprecated for core Responsive Image since 2-3 years ago.
    • Non-UI settings (those not visible as options: grid_header, _uri, etc.) were cleaned out as parts of the optimization last year.
    • Options with empty values (lazy, and everything else) are never displayed at formatter summary to declutter since Blazy was created with formatters.
    • Not sure, yet, but current_view_mode was never displayed as an option, so it was likely removed like the rest, too. Instead, checked programmatically somewhere, IIRC. What is always displayed is View mode option. The first indicates the current formatter view mode, mostly used to provide CSS classes, the latter your chosen view mode of the selected entity (media, paragraphs, etc.), used to display its fields.

    Boolean values (Background, etc.) had a value 0/1 which was replaced by no/yes for human didplay. When 0, it is never displayed as mentioned above.

    Leaving the reported bugs to address: Background is no longer working. Is this what it is all about? If anything else, please detail more.

  • 🇮🇩Indonesia gausarts

    I just checked BG and Loading priority are fine. Your issue is likely just confusion with the deprecated stuffs. Some were explained above. Do not compare those configs, in case confusing with the latest changes, see the frontend output.

    > The media--background class has been removed from the background image and replaced with media--image.
    The media--background was replaced by the b-bg class to accommodate non-media like form items, mostly seen at Slick Browser, including body with BG, etc. If you use it on your custom code, place update it. When BG works, you will see DIV tag, not IMG. The relevant classes were explained above.

    The media--background was no longer used since the initial full release 8.x-2.0:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.0/css/blazy.css#L29

    It did exist till pre-release 8.x-2.0-rc7 in tandem with b-bg:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.0-rc7/css/componen...

    The combo was prepared and existed since initial rc1:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.0-rc1/src/BlazyMan...

    And they were years ago :)

    Changing Loading priority from lazy to anything else works as expected.

    I see no OP bugs with the latest, unless those deprecated mentioned were still used in your custom codes. In that case, please update it accordingly.

    Let me know if anything else? Be sure to cooy/paste the BG element (b-bg) for investigation.

  • 🇺🇸United States chambers

    Thanks for all that. This site was created years ago so that explains everything you said. The image blazy settings probably haven't been updated since then. With those class name changes, I'll have to go through and update the class names in the style sheets. Thats where the front end starts breaking because it is looking for the media--background class name.

  • Status changed to Fixed about 1 year ago
  • 🇮🇩Indonesia gausarts

    Thanks for the follow-up.

    Added a CR like the rest of RC changes, not many hopefully:
    https://www.drupal.org/node/3103018#css-changes →

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024