How to resize image height base on the actual image size

I am actually using repeater to show the list of different width and height images. However, i would like to know how I can resize the image base on the actual image height?

Hi bernice!

You can have your repeater rows dynamically resize to the size of your image by placing your images in dynamic panel states and having your repeater rows load in the different states. To do this, you would create a dynamic panel that uses Fit To Content styling. You would want to place an image widget in each panel state, and then import the varying images into the different states.

Then, you would want to create repeater data that tracks the name of the dynamic panel state that contains that row’s image. If this repeater data is identical to the name of the dynamic panel state, you can use an OnItemLoad action to set the dynamic panel to the state of the repeater data. For example:

Because the dynamic panel is set to fit to content, and the images are of varying sizes, changing the panel state OnItemLoad loads in the differently sized images.

Please feel free to take a look at this sample file as well.

Repeater Set State sample.rp (52.3 KB)

I hope this helps!

Hi Chelsea,

I am actually not trying to resize the dynamic panel because i want the overflow of the image to be scrollable. Furthermore, i just want the image to be resized base on the actual image size (because the image is a very long image and the image height varies a lot from one to the other while using repeater). However, I need the width of the image to fit the screen as well.

Are you able to post your .rp file here? Or perhaps post some screenshots or sketches of what you are trying to do? It is difficult to understand exactly what you’re trying to achieve without seeing it.

Also, if you could describe your process in more detail and the step by step behavior you would like to create in your prototype it could help. For instance, are you changing the image sizes when you place or load them in the repeater, or do you need to change the size dynamically for some reason? Or, is it that you have a sample image in your repeater cell and you need to load images with varying dimensions such that they all get squashed or stretched when you use the Set Image action? That can be a tricky issue because if you have an image in your repeater that is say, 100x100 px then it forces every instance (repeated row) to have an image that is 100x100 px regardless of the original size and dimensions of the image file you load into it. You can use the Set Size action to change the width and/or height, but unfortunately, when you load an image with the Set Image action, the original image dimensions are not available.

If this is your issue, some workarounds would include setting up a dynamic panel with multiple states, as Chelsea describes above. Each with a placeholder image of the same dimensions as the image you are loading. This would work well if you have a very limited set of differences, like 3 or 4 different sizes only. If you have many different sizes, then you could set up columns in your repeater for width and height values, then enter in the original file dimensions alongside your image references in the repeater sheet. In the OnItemLoad event, set the image then use the Set Size action and refer to your Width and Height column values to get the image to its original size. If you need to scale it and keep the aspect the same, you can also use the Set Size action with a scalar value. For example, [[Target.width * 0.5]] and [[Target.height * 0.5]] to shrink it to 50% original size.

All of this is easier to demonstrate if we can start with your .rp file :slightly_smiling_face:


I managed to get it working by manually adding the image height and width to the dataset