Rotate Image Component

I would like the user to be able to rotate an image by clicking on a button. How can I achieve that?

Thanks

Hey @halahmadi and welcome to the forum! There’s no way to do this natively in Retool, unfortunately, but you can use Custom CSS and apply a transform. What’s your use case exactly? What you could do is have a few different image components each transformed to rotate at different angles, and clicking a button shows the one with your desired rotation, and hides all the others.

Hi @justin, thank you for your response. In my dashboard, I show an image from a url which has some text that the user needs to validate. The images sometimes are rotated side way, and we need to be able to rotate it back to be able to read.

In the image component, there is no option to enter custom css. It only has the image url. What’s the best way to address this?

1 Like

@halahmadi check out the post I linked to. In Retool, you don’t write custom CSS on a component basis, it’s global.

OK thank you Justin. I solved this issue by creating a custom component.

1 Like

Here is another simple solution with a JavaScript query & a style text component that Justin mentions above:

a4cf233ac6f207671ab590e486f730f1

This just uses a JavaScript query to set a text value: text1.setValue(" ._retool-image1{ transform: rotate(90deg);}")

And then another query to set it back: text1.setValue(" ")

2 Likes

This is dope @JoeyKarczewski!

1 Like