[Dara]: Duotone only works in Editor - not published page.

[AnjanaV93]

Quick summary

Duotone configurations for images are only visible in Editor, and not in the frontend.

Steps to reproduce

1. Use Dara theme.

2. Create a post and include an image.

3. Apply duotone filter.

4. Confirm that things look fine on editor:

   

5. Notice that the filter is not applied on the published page:

   

What you expected to happen

Duotone filter to be applied on the fronend as well.

What actually happened

Duotone is only visible in Editor.

Browser

Google Chrome/Chromium

Context

6259701-zen

Platform (Simple, Atomic, or both?)

No response

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

None

Workaround details

No response

[github-actions]

Support References

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

• 6259701-zen

[tellisbethel]

Same issue on the Sequential theme here: 27843422-hc

I assigned a CSS class to the gallery block that had the duotone applied and provided CSS to turn the images grayscale as a close approximation to their original duotone settings:

/* Set images grayscale to somewhat imitate duotone feature | 27843422-hc (db) */
.homepage-logos {
filter: grayscale(100%);
opacity: 80%;
}

[cuemarie]

Closing as duplicate of Automattic/wp-calypso#78442