2.0 - Multi-Image - placing images in same height and width rows

[friarpat]

I have a collection of images that are different sizes, different aspect ratios, etc. I am trying to display my images in multiple rows that are the same width and the same height with equal distance between each image. I'm shooting for a "block" of images with the same border around each image - and not having much luck.

The number of images to be displayed will vary per call. The last row of images wouldn't need to be aligned on the left and right at this time, meaning, if there is one image on the last row, it's not expected to be stretched the entire width of the other rows.

I'm using viewer.addTiledImage to add images to my display. This method does not allow setting both the width and the height of each image. For my first pass, I'm setting the height to 1 which gives me equal height rows and that's doing a great job of calculating the associated width. I can set the images N pixels apart so I get the equidistant margin that I desire. I just have a jagged right side on the display. I can't seem to coax OpenSeaDragon into making the width work out so the rows are equal width and the images align on both the left and right.

Here's what I'm trying and my approach:

Displaying multiple images that have different sizes (width/height): Image1: 952/641 Image2: 10079/7559 Image3: 600/287 Image4: 1280/720 Image5: 620/388 Image6: 615/394

Using the aspect ratio for each image, total all aspect ratios - in essence, a total width. Calculate how many rows I want to display the images in - in this case 3. Average Row width = total aspect ratios/rows. Assign images per row - as long as the total aspect ratio per row < Average Row width, add another image to the row. This results in a jagged right side to the display. So - using the above images, row 1 has 2 images, row 2 has 3 images, and row 3 has 1 image.

Attempt 1 was to go back through and adjust the width of each image so they could be equidistant apart (a margin between images in a row, and between rows). Since Height is already set on the image, setting the width is not allowed.

Attempt 2 was to adjust the actual image width that is passed in the addTiledImage call, but that results in a different aspect ratio for the image, which causes OpenSeaDragon to expect different tiled images to be present in the DZI which not only causes errors when it attempts to access those tiles, but also changes the look of the image.

At this point, I'm thinking I have 2 options, either live with the jagged right edge, or change the spacing between images on a row.

Is there a way that I can tell OpenSeaDragon to display an image at X,Y and display it in a rectangle that is Width/Height and then zoom it from there without mangling the image's aspect ratio?

Thanks much!

[avandecreme]

I am not sure I understand how you are trying to lay out the images. Is it different from what we have in the last 2 examples in this page: http://openseadragon.github.io/examples/tilesource-collection/

[friarpat]

It's similar to that, except I think what I want to do is control the viewport size for each image, not use a single viewport size for all images.

When I set the height to 1 for the addTiledImage call, OpenSeaDragon calculates the width for the viewport, which gives me a view that looks like:

---

| | | | | |

---

---

| | | | | |

---

What I would like to do is keep those rows all with the same height, like they are now, but "stretch" the images in the first row so they align on the left and right with the images on the second row - and still maintain the equal margin between images.

I believe in the example that you mentioned, all of my images would be presented in the same sized viewport, but wouldn't necessarily fill the viewport completely? I think that since the image is centered within that viewport, some images would have margins within the tile and others would fill it due to their aspect ratio. I would like the image to completely fill the viewport regardless of the aspect ratio of the image.

Does that make it clearer? If not - I can try again!

[friarpat]

Well that didn't go well! I'll use the preview button next time!

[friarpat]

Here's an example of what I am trying to do.

[avandecreme]

Ha thanks, much clearer with an example :+1:

You are definitely on good tracks by setting a fixed height of 1. For the width, I suppose that in the provided example, the images are reorganized in a magic order letting them fit approximately (compensating by varying the margins a little). Finding the best order is definitely not an easy algorithm but sounds feasible as it looks similar to the knapsack problem https://en.wikipedia.org/wiki/Knapsack_problem

The other option is to distort the images which would probably looks ugly and is currently not supported by OpenSeadragon.

[Pin0]

I created a plugin for that: https://github.com/Pin0/openseadragon-justified-collection