Classic Themes: Duotone Filter missing on the live site for left, right and center-aligned images on Simple Sites

[jorpdesigns]

Quick summary

When an Image Block has the Duotone Filter applied, the colors appear on the backend but not on the frontend.

This only affects classic themes on Simple sites. Looks like the bug was recently introduced, as noted in 12242641-hc

Steps to reproduce

1. Ensure the test site is using a Classic theme (e.g. Orvis).
2. Create a page and add an Image Block.
3. Important! Set the image alignment option to center, left or right.
4. Click the Duotone Filter button in the block toolbar and set your preferred colors.
5. Publish the page and view on the frontend.

What you expected to happen

The Duotone effect should appear on the frontend, similar to how it is shown in the Editor.

What actually happened

The Duotone effect does not appear on the frontend.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

• Reported in 12242641-hc. Follow-up ticket: 6199292-zen.
• Could reproduce with these themes: Orvis, Business, Twenty Nineteen, Twenty Seventeen, Photos, Radcliffe 2
• The filter worked fine after testing these Site Editing Themes: Blank Canvas, Hey, Archivo
• The duotone filter may be applied via CSS as a workaround but this would only work with the Premium plan.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6199292-zen
• 6252844-zen

[cuemarie]

Hey @jorpdesigns ! Just ran a quick check on this, and was not able to replicate the issue with Orvis, Twenty Nineteen, or Twenty Twenty. Tested on a brand new free site, as well as an older Premium Plan site:

Twenty Twenty

Orvis

Orvis on Premium Plan Site

---

Are there any other specific steps I can take to try to reproduce this?

[jorpdesigns]

Hi @cuemarie ! Took a while to reproduce but I finally managed to crack it.

Looks like the bug only affects images with alignment set to left, right and center (for some reason). Images with alignments set to None, Wide and Full aren’t affected.

I will update the report title and steps to reproduce.

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated on Twenty Nineteen & Orvis

Screenshots/Recordings

Twenty Nineteen

Orvis

The working image shows the following CSS:

But the aligned image does not contain the filter parameter at all:

📌 ACTIONS

• Assigned to Apex

[hngdny]

Another report here 37361778-hc

Atomic site, using Seedlet theme.

Tested and can confirm same issue can be replicated (Duotone color not applied when alignment is "center")

[csabarakasz]

6252844 Setting the image to None did not solve the duotone issue here.

[cuemarie]

This looks like a duplicate of #78442 , but I'll retest before closing as the steps to repro are slightly different.

[cuemarie]

Retested this - on a self-hosted site with Twenty Sixteen active, image blocks do not show the Duotone filter on the live site, no matter their alignment setting.

Screen.Capture.on.2023-08-31.at.14-43-58.mp4

In that case, I'm closing this issue as a duplicate of #78442, where we'll track further issues.

📌 ACTIONS

• Closed as duplicate