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.

Screen Shot 2023-11-02 at 11.01.28 AM

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
  • 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

1 Attachments
Nate G
Morgan16
1 person likes this
  • Morgan16
    Morgan16
Morgan16
  • Morgan16
  • Author
  • 1 reply
  • November 2, 2023

This is such a clever solution, thanks!

Nate_G
1 person likes this
  • Nate_G
    Nate_G
Terms & ConditionsCookie settings

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