Duotone effect disappears when image is aligned (left, right, center)

  • TiramiSue

    (@tiramisue)


    12 months ago

    I noticed that the dutone function does not work anymore if an image is for example aligned left. If no alignement is chosen the dutone works fine. I am not sure for how long that has been the case. Running WP 6.4.1 with the Customizr Pro theme.

    On the page listed below it affects the portrait images.

    • This topic was modified 12 months ago by TiramiSue.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Rajnish Vijya

    (@rajnishvijya)

    Try inspecting the element for conflicting styles, use custom CSS to override conflicting filters, check your theme options for alignment controls, and ensure your theme and WordPress are up-to-date for compatibility.

    Thread Starter TiramiSue

    (@tiramisue)

    Thx for the input. It would be sad if custom css would have to be injected for this little website… specially since the duotones on the portraits had been working for a long time just fine.

    All systems are up to date, could not identify a theme option with influence.

    Here’s a screenshot of my inspection (I see no conflicts):

    And I should add that in the editor view the duotone effect is cleary visible:

    • This reply was modified 12 months ago by TiramiSue.
    • This reply was modified 12 months ago by TiramiSue. Reason: added editor view
    • This reply was modified 12 months ago by TiramiSue.

    I came across the same problem today. It seems that images that are aligned are lacking the css class wp-block-image in the <figure> element. (The wrapper <div> has that class, but that does not help in this case.) If you manually insert it in inspection mode, the filter works. Question: Is it possible to make WP use that missing css class on images? (Is there a filter or other function to inject css at this point?)

    • This reply was modified 8 months, 3 weeks ago by baskerville221b. Reason: clarifying that the class is missing in element

    It looks like the duotone selector changed from?.duotone-id img?to?.duotone-id.wp-block-image img?which doesn’t work in classic themes with aligned images because aligned images in classic themes get an extra wrapping?<div class="wp-block-image">?with the block class removed while the?.duotone-id?class still gets added to the block, not the wrapper. (source)

    Alex, thanks for looking into this. Is there anything one can do? File a bug report? Or find a workaround? Since you have more insight into the matter than I have, any help would be greatly appreciated.

    It looks like the bug has already been reported on https://github.com/WordPress/gutenberg/issues/54121. Follow that for updates. I, unfortunately, don’t have a whole lot of time to work on this right now. But I wanted to share some info such as where to start looking in case someone comfortable with core development came across this.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Duotone effect disappears when image is aligned (left, right, center)’ is closed to new replies.