naturalatlas / image-layout Goto Github PK

Sometimes images are 2x higher than the idealElementHeight.
I don't really like the fact, because some images are really too big and pixelated.

I've been looking into the source and found the calculation for the number of needed rows.
https://github.com/naturalatlas/image-layout/blob/master/layouts/fixed-partition.js#L43

I've played with the calculation by changing it to:

var rowsNeeded = Math.round(summedWidth / containerWidth * 0.75)

Images can't now be that big anymore and they can be a little smaller, but that's perfect.

It could be an addition to the option object that defaults to 1.
I'm just not sure how to name it, weight seems to broad.

Thanks.

With the following set up, the algorithm yield the results display below:

import layout from 'image-layout/layouts/fixed-partition'

const elements = [
  {"width":800,"height":536},
  {"width":708,"height":800},
  {"width":800,"height":536}
]

const result = layout(elements, {
  containerWidth: 1200,
  idealElementHeight: 280,
  spacing: 40
})

{
  "width": 1200,
  "height": 310,
  "positions": [
    {
      "y": 0,
      "x": 0,
      "width": 432,
      "height": 310
    },
    {
      "y": 0,
      "x": 472,
      "width": 256,
      "height": 310
    },
    {
      "y": 0,
      "x": 768,
      "width": 432,
      "height": 310
    }
  ]
}

Given the aspect ratio of the images, I'd expect the row to have a height of 290px instead of 310px. When spacing is set to 0 I get results that respect the aspect ratio. Do I miss something?

Hi,

What I basically want to achieve, is make it horizontally scrollable, using fixed-partition layout.
How would I go about adding maximum rows to display, or "cut" it up to different segments?

I've tried filtering and sorting the images into multiple layout "instances", to render separate, based on maximum X/Y, but no luck so far.

Any help would be much appreciated, thanks in regards.