I’m trying to create a repeater that display images with a varying size / aspect ratio. So far, all of the images are size according to the image object I have defined in the repeater, which looks ugly for many pictures that are stretched or compressed according to the aspect ration of the image object.
So I was wondering if there’s any chance to have an auto-size image in the repeater (similar to the option ‘Auto size image’ if I import a single image into an image object).
I tried to put together an example for what you have attached, but I ran into a small snag. I want to set the width of my repeater item (set in a DP called ItemDP) based on the length of the new text (entered via a text form and newly populated).
On loading the repeater, I am trying to do “Set DP to Size” using the following for the width: [[toString(item.Name).length+10]]
…so if I enter “Shiraluk” (width of 8, I’d get DP of 18 pixels with), “Svet” (14 pixels), etc. etc.
My assumption is that the return type of item.Name is = String, but when I tried outputting this to a button shape it returns the same fX string. I also tried (item.Name).width but no luck. Do you have an idea what item.Name returns as a data structure? So far I have ruled out string and numeric values.
PS: the +10 is to allow for the “X” DP (used to pop out the rows from the repeater), which I will move dynamically e.g., [[ItemDP.width-5]]
I tried something similar and it didn’t work for me either.
I would also assume that item.Name should return a type of string. Maybe something else is broken, perhaps the .length or .width functions.
In other projects I was able to treat item.Name as string with no problem, and applying javascript functions on it.
See herefor example.
BTW, from what I’ve seen so far with the repeater, I think any solution will require manually moving the panels to adapt to the new width.
You bring up an interesting point about .length and .width functions being broken. Didn’t think of that!
Currently, I am trying to get the basic concept working, hence the 1-column vertical alignment (see attached Work-In-Progress file). After I get the basics working, I am thinking of experimenting with pagination.
By the way, @gejoreni had a conceptual design that may work for you. It does not use repeaters, but instead it uses dynamic panels in programmatic fashion. The file was called “Move Box”. I am trying to locate the thread!
Let me know what you think about my approach! I am still trying to figure out why I can’t get the length of item.Name. Thanks for any additional insights and/or comments!
I spoke to Joseph Reni (aka gejoreni), and on his behalf I am sharing the file (and thus the approach) I told you about earlier. All the credit for this work goes to Joseph!
I had some time to play around with this, and here’s what I came up with: Untitled Document
I combined both your approaches
Here is the RP file:
For the horizontal repeater, we still need to move the items to account for the size differences, I think it’s doable in a pretty generic way. Hopefully I’ll have time to work on it soon - you are more than welcom to pick up where I left )
PS - I think there IS a bug in the .length function… I was able to get it to work, but not on all cases
Your intuition was right, and it seems there is a bug with the .length function. I am working with Ben from Axure on getting it resolved. Stay tuned for more!
Hi light_forger,
Nice to know that you’re working on a fix, good luck!
In the mean time, I’ve got a chance to add some improvements to the previous solution: Dynamic Size Tags
So now the items are in the right place, no gaps. yay!
Also - deletion works nicely. (though once in a while there’s a strange re-ordering bug, I don’t know why…)
It still needs some work and clean up: (I left the “debug” widgets and variables there on purpose)
wrapping is currently done by number of items, I think its better to do it according to repeater width.
All the numbers are “hard coded”. I can probably get rid of most of them elegantly once the .length function starts working.
I like how you are using the Offset and Counter to eliminate the spacing between the individual items per row (since the default item entry or the DP has constant width) by tracking the total combined actual width and not the item default width.
Using the length function to determine the total width will eliminate some of the boundary conditions thus simplifying the logic, but we will still be confronted by an interesting problem.
Any solutions we come up with will result in jagged lines on the right due to the width being determined by the number of items per row. Ideally we should be able to specify a pixel width for the entire repeater passed as a variable in the grid options, instead of # of items per row, then reflow all items based on their total width (read summary of all items .length as compared to this repeater width): we may still have some jagged lines if the total width of the # of items per row have slightly more/less value-wise than the repeater width.
At least we will be able to fit more items per row, ending with some rows of 6, others of 10, etc.etc. I wonder if there is a way to force wrapping a repeater to a new line based on a given number of items or even maxWidth (a variable value that can be predetermined). I was not able to find an action that does this. It seems repeaters are very symmetric in nature currently!
For the sake of the prototype, I think we can get away by not addressing the jaggedness as long as the items are based on their content’s length. It is a compromise I can live with.
Pardon the long reply, but I wanted to address this last point in interaction. We are close!
I agree - the ideal solution for the jaggedness is a built in feature of the repeater that allows wrapping according to a predefined width, rather than number of times. This should go side by side with allowing a dynamic ‘fit to content’ mechanism.
If these two features were available, we could easily achieve what we’re trying to build here, with almost no additional actions.
Until then, we’ll have to rely on workarounds - maintaining variables, checking conditions, and manually shifting stuff around. Its not ideal, but hey, remember Axure 6.5? You couldn’t even dream of such capabilities!
P.s - I learned the the offset technique from @Gregor, so the credit goes to him
Kudos to Gregor for the tip I can certainly see myself using it. It can also come in handy if we decide to push the text input field below the horizontal based repeater (e.g., calculate # of rows -> determine repeater height).
So Ben sent me a file (see the attached) with the length working correctly. I tried removing all items in his repeater, and Axure crashed.
Similarly, thinking my file was corrupted (as per Ben’s suggestion), I copied his and recreated my work there. Right after I add [[item.Name.length*5+25]] (Ben’s idea for the string) to the dp_NameText (button shape for text in Repeater), Axure crashes again.
Could you please test Ben’s file which I am attaching by removing all items in the repeater and see if it throws an error? This will help me determine if my 3120 installation is corrupting all repeater-related files. Thanks in advance!
Yep, it crashed for me too… But I actually I’ve seen such crashes on previous versions as well. Maybe its a general bug with the repeater that happens when you start with an empty list…
Here’s the error I’m getting (first time I’ve seen this text )
Home (Axure:Page) > (Repeater) (Repeater) : does not have paint node
Thanks for looking into this for me, Shira This is very strange. I don’t remember ever encountering that error before.
At this point, I really don’t think it is a corrupt install, but as you said, general problem with the repeater. I did reinstally 7 3120 and still noticed the same problems.
Ben thinks that the [[item.Name.length*5+25]] problem could be a bug. I will keep you posted with any other updates!
Seems that there has been a lot of discussion around a slightly different issue here. Has anyone solved Muensterberg’s original question about auto-sizing images in the repeater? I would love to see this feature as well. Anyone from Axure?
by the way there is of course a way to autosize images in repeater…
javascript:void($(’.ax_repeater img’).css(‘height’,‘auto’).css(‘width’,‘auto’))
or
javascript:void($(’[data-label=yourRepeater] img’).css(‘height’,‘auto’).css(‘width’,‘auto’))
somehow @axQuery with the img does not work… for sure there is a way too…
