How to make rows aligned

[marko911]

Hi, I'm having a problem with using this component. I basically used the same code as the example just to see if I can get a basic gallery to show but this is what happens:
screenshot

Now the thing is , I don't have a sourcset for each image and I assume that's the problem. What I need to know is , what exactly do these images need to have in terms of dimensions in order to get them to line up properly like in your demo?

[neptunian]

Were you able to get the demo working locally? You do not need an srcset for it to work. You can see what is needed by looking at the documentation. Anything that says required is needed.

[marko911]

Demo works perfectly locally...I want to know if the images need to have some common dimensions? And also the documentation doesn't say how you can do some images to be wider than others in a given row etc, unless that's done automatically?

I see you assign the width based on aspect ratio but it looks like all my images get the same width assigned to them, which is probably why the images dont line up nicely.

[neptunian]

No they dont need to have common dimensions. It is being calculated so that they can all fit in a row and scale together. It's calculated in the library. If your widths are off at all, it will not work. If you have some css that is interfering and putting padding or margin on any of the elements, it will not work. 1 extra pixel will throw off everything. Don't forget you need to explicitly pass in the exact width and height of your images.

[marko911]

I figured out what it is. You must provide the width and height on the images. I was just trying to plug and play images. It works now once I added each image's dimensions. Perhaps I will look into a method of programmatically calculating this. If I can find a way, I will PR.