Skip to main content
Solved

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


Morgan16

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%)

Best answer by Nate_G

@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

View original
This topic has been closed for replies.

2 replies

Nate_G
  • Power Member
  • 180 replies
  • Answer
  • November 2, 2023

@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


Morgan16
  • Author
  • 1 reply
  • November 2, 2023

This is such a clever solution, thanks!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings