How to maintain variant properties of an image when swapping image within a component

I have a blog component which contains an image. I added a property to toggle the image between black and white. I added the effect manually in by changing the saturation to 0.

I need to change the image within the component for each different blog post and I do this by pasting the image into the fill of the component. When I add the new image (in colour), the component does not change the image to black and white when I switch the variant.

Is it possible to replace the image within a component and maintain both variant settings of the mother image? (Saturation 100%> saturation 0%)

@Morgan16 You could use an overlay over your photo with a blend mode applied like hue or saturation to get the same effect.

In the below example, I built a component for my photo which includes a frame, on top of the image, with a black fill and a “Hue” blend mode applied (“Saturation” also works). I then set up that frame to toggle on and off.

See example file

1 Like

This is such a clever solution, thanks!

1 Like