![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Ok, so a while ago Franzeska was (warning: NSFW) trying to get DW to post image grids like tumblr does, but the spacing in between the cells was too big. Since I never say no to a challenge, here's what I managed to do:
So, the complicated part of doing this is that all the images were different sizes. When everything is the same size it's pretty straight forward, all you need to do is create a table with a determined width (in this case I used 540px), then for the lines that have two images make the cell width 50% and the image width 100%.
BUT. When the images are all different sizes, it's a bit complicated to get the sizes to match without using an enormous amount of actual code and calculating which image has the smallest height and cropping to that. So after a lot of research I came up with an (admittedly roundabout) solution. The easiest way to do this is putting the image as a background to the cell. The background image has a lot of different attributes that you can use to make sure that it covers the whole cell and stays centralised. The problem is that if the cell is empty (because the image is a background and not an actual item in the cell) then the cell doesn't know how to calculate its own height and you get a really thin strip of your image instead of the whole thing. Soooo... the solution I found was to put the image inside the cell, but not visible. That way the cell gets the height from the image, but uses the background image to make sure everything is cropped and centered and looking pretty. I know, it's a stupid way of doing it. If you can figure something else out, let me know!
The other option is, of course, just defining a size for the cells beforehand. Which is what I did in the next example. I just decided that I would put all the images in a 16:9 aspect ratio, and so I set the width and height for each cell accordingly (in this case, 270x150 for the lines with two images, and 540x300 for the lines with a single image). Then I just put the images as backgrounds and voila!
Personally I like the second option better, I think it looks cleaner with all the images the same aspect ratio. If you'd like the html code I used, just let me know! Of course, these images are from the 'net, as DW doesn't do image hosting yet. So you'd have to figure out a way of hosting your images somewhere. But it's a start!
(I swear I tried to use a cut but I don't remember how to do it anymore!)
So, the complicated part of doing this is that all the images were different sizes. When everything is the same size it's pretty straight forward, all you need to do is create a table with a determined width (in this case I used 540px), then for the lines that have two images make the cell width 50% and the image width 100%.
BUT. When the images are all different sizes, it's a bit complicated to get the sizes to match without using an enormous amount of actual code and calculating which image has the smallest height and cropping to that. So after a lot of research I came up with an (admittedly roundabout) solution. The easiest way to do this is putting the image as a background to the cell. The background image has a lot of different attributes that you can use to make sure that it covers the whole cell and stays centralised. The problem is that if the cell is empty (because the image is a background and not an actual item in the cell) then the cell doesn't know how to calculate its own height and you get a really thin strip of your image instead of the whole thing. Soooo... the solution I found was to put the image inside the cell, but not visible. That way the cell gets the height from the image, but uses the background image to make sure everything is cropped and centered and looking pretty. I know, it's a stupid way of doing it. If you can figure something else out, let me know!
The other option is, of course, just defining a size for the cells beforehand. Which is what I did in the next example. I just decided that I would put all the images in a 16:9 aspect ratio, and so I set the width and height for each cell accordingly (in this case, 270x150 for the lines with two images, and 540x300 for the lines with a single image). Then I just put the images as backgrounds and voila!
Personally I like the second option better, I think it looks cleaner with all the images the same aspect ratio. If you'd like the html code I used, just let me know! Of course, these images are from the 'net, as DW doesn't do image hosting yet. So you'd have to figure out a way of hosting your images somewhere. But it's a start!
(I swear I tried to use a cut but I don't remember how to do it anymore!)
