Images' aspect ratios are not kept in grid list

[asiayeah]

The grid layout by default assumes that images are a 16:9 aspect ratio, or you can set the data-bb-style="square" attribute to make the images be scaled to a 1:1 aspect ratio.

Is there a way to display images which isn't square nor 16:9 in grid layout? Right now they are scaled without keeping their aspect ratio. Could we have an option to crop them while keep their aspect ratio?

[tneil]

Those are currently the only options for the grid layout. I've marked this as a feature request for a possible future enhancement.

[asiayeah]

The grid list will be much more useful with an option to keep the aspect ratio. Is it going to be a quick change? I would assume we can make use of HTML5 canvas to do the necessary image cropping.

[tneil]

I doubt it will be a "quick" change.. are you looking for cropping? or are you wanting to use the row height to be used to change the image height with proper scaling?

[asiayeah]

I haven't read or understand the grid list codes yet. However, I am thinking the "quicker" way is to crop the images so that it fits the original height & width, while keeping the aspect ratio.

[tneil]

Setting the implementation details aside, which would you rather have.. images somehow cropped, or sized to fit in the grid somehow?

[itamecodes]

Hi !am just jumping into blackberry development. Well am having the same issue of not being able to maintain aspect ratio of the images. The images I want to display in the grid are 180x266 and the 16:9 aspect ratio just stretched them too much and 1:1 is not a fit either.. Is this the default behavior in the case of imageList also?
By the way great job on bbui.js!

[tneil]

The grid list does either a 16:9 or a 1:1 stretching of images... The image list will stretch the image as a 1:1 to fit properly in the list.

There isn't a grid/list layout in bbUI that presents images in an arbitrary size and aspect ratio. You would need to create your own custom layout for these types of displays at the moment

[asiayeah]

Setting the implementation details aside, which would you rather have.. images somehow cropped, or sized to fit in
the grid somehow?

Thanks, Tim, for clarifying.

I think that depends on the application, and either option will be a valid use case. I don't really know at this moment I'm afraid. How about the native Cascades' GridListLayout? Ideally we should get bbUI's grid list to have similar functionality.

In Cascades, it looks like they have defined ScalingMethod (e.g. AspectFit, AspectFill, Fill and AspectCrop).

[tneil]

I'll look at the cascades image grid further and see what can be done

[asiayeah]

Let's say I am displaying a grid of square images in 3 columns, if my last row has 1 or 2 images only, they will be scratched to the full width of the grid and thus look much bigger than others. I don't think this is the most common use case.

However, the documentation does mention: "If a row has only one item in it, it's width will be the full width of the size of the grid. A row with 2 items will be 1/6, and 3 items will be 1/9 the height of the screen. All images are currently set to be stretched to the size of their container."

1. Is there a good suggestion to achieve what I want? I assume if I don't have enough images on the last row, the remaining items will simply appear empty. One way is perhaps support adding dummy grid items as placeholder.

2. Is there a way to support scrolling down to the bottom of the grid to fetch more items? (is it possible via iScroll?)

Thank you.

[gcsantiago]

Following this topic... because now, we have useful carousel...

If we take a picture with bb10 phone in portrait mode the aspect ratio is 9:16

I wish to make a grid list carousel mode but the photos don't scale very well (on square are the closest mode but looks squashed), then i wish to propose a third mode available to the grid

data-bb-style="portrait"