Repeater - how do I show images in their original dimensions

Hey all. Does anyone know if there is a way to preview/show images added to a repeater in their original width and length? In my repeater I have added an image widget and set its width x length to be 30x30px (just a random size I picked), and imported the images. When I preview the page every image is displayed as 30x30px, so some images are skewed (re: chevrons, anything rectangular), which I obviously don’t want.

I should say that each image will have different dimensions, they are not the same size.

The images look fine in the repeater widget in Axure RP, but totally skewed when rendered in the preview. My project is attached if you want to take a look and tweak. I’m sure its something small I’ve not set properly. Thanks in advance!

Repeater Resize Image Issue.rp (67.3 KB)

Repeaters are just that–repeated. So the size and location of the widgets in your repeater cell are repeated identically in each row. There are a few options to deal with this.

  • Make all your images with the same dimensions in your source graphics app by adding transparent padding as needed.

  • Or, make your images in a limited set of sizes, e.g., A = 30x30, B = 40x50, C = 124x73. Create a dynamic panel in your repeater cell with placeholder images in those same dimensions, one per state. Create a column in your repeater dataset to assign an image category (A, B, or C) and set the image and change the panel state in the Item Loaded event based on this. Ensure the “Fit to Content in HTML” checkbox is checked in the repeater’s Style panel (or make your repeater cell large enough to show all image sizes with a background widget.)

  • Or, create a dynamic panel with a state for each of your images. Load your actual images in the panel, one per state. Create a column in your repeater dataset and assign a name for the image, matching the name of a dynamic panel state. In the Item Loaded event, add an action to “set panel state to [[Item.MyImage]]” where MyImage is the name of your column. (I’ve done this with 15 different images and it worked pretty well. the more images and the larger they are, the slower the repeater will load.)

  • Or, keep track of your image dimensions and create a column for width and a column for height in your repeater’s dataset, as well as a column for the image itself. In the Item Loaded event, set the image then set the size, using the values in the width and height columns. Ensure the “Fit to Content in HTML” checkbox is checked in the repeater’s Style panel (or make your repeater cell large enough to show all image sizes with a background widget.)

(I can’t quite apply any of these to your .rp file as I don’t know the original image dimensions.)

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.