Zoom in and Zoom out Workaround on Retool Web

🤝 Discussion
,
1

Use case: I wanted to implement a zoom-in and zoom-out feature for an image in Retool. This would help our on-ground teams inspect visual details more effectively to make informed decisions. However, Retool doesn’t provide native support for image zooming.

Workaround( Using CSS + Variables): After exploring a few ideas, I found a simple workaround using custom CSS and temporary state variables in Retool.
STEPS:

  1. Add a container (this will act as a wrapper inside which image can be zoomed in and out). Inside container add image component.

    image
    image1388Ă—688 52.6 KB

  2. Now outside the container add 2 icons or buttons component with icon as + and -. Also create a temp variable named as zoomLevel and set the initial value to 1 .

    image
    image1388Ă—814 53.7 KB

  3. Now add below script on both buttons:
    3.1 For + (zoom in):
    let previousZoomValue = zoomLevel.value zoomLevel.setValue(previousZoomValue + 0.5)

3.2 For - (zoom out):
let previousZoomValue = zoomLevel.value zoomLevel.setValue(Math.max(0.5, previousZoomValue - 0.5))

  1. Now, on customCSS global settings, add below properties

._imageWrapper_1jrm8_52 { transform: scale({{ zoomLevel.value }}) !important; transform-origin: center !important; transition: transform 0.3s ease !important; overflow: auto !important; }

Note: Because of new user I am not able to upload attachment but this workaround works very well.

1 Like
2

Hi @mitushi14, thanks for sharing this! We love to see our users sharing solutions like this with each other.

One thing to note: when doing custom css on retool, using classes like _imageWrapper_1jrm8_52 can be somewhat unreliable. There are instances where these class names change after an update, and so using them widespread could turn into a headache. They also aren't consistent, for example when I tried this out the class name on my image was _imageWrapper_7fam4_53.

A more secure way to select css is through component naming, for example:

.retool-grid {
    [data-testid*=image_container] [data-testid*=image] img {
    transform: scale({{ zoomLevel.value }}) !important;
    transform-origin: center !important;
    transition: transform 0.3s ease !important;
    overflow: auto !important;
  }
}

The .retool-grid part ensures we are within Retool's canvas.
Additionally, as long as your images have the word image in the name, as they do by default, they will be selected. Also, this example is specifically selecting images in a container with the word image_container in it's name. So it will only select images in a container that you have specifically named that, rather than all images in your app or images in other containers.

Also, credit where credit is due, I just learned this from seeing a thread from @AJVancattenburch.

Note: There is no guarantee that using data-testid will remain stable between releases either. It has just historically been more stable than the other way.

2 Likes