0

I have an issue with a site I'm building which contains a gallery page. The layout they require is to have a variable amount of images per row (maximum 4 or less), and for all these images to fit the entire width of the container element (for this case I'll go with 1100px), but all have the same height and aspect ratio, and to not crop the images.

Here is an example of what I mean (where the coloured blocks represent the images): https://i.stack.imgur.com/oHHMj.jpg

I'd appreciate any help with creating a php function which could take the dimensions of 4 given images, and calculate the width and height values for each image to enable them to fit snuggly into the container, which I can apply with some inline css.

I can manage getting the image dimensions and applying the inline css, but I'm stumped on the calculations I'd need to perform to actually work out what their respective sizes should be.

Many thanks!

tldr_baz
  • 78
  • 6

2 Answers2

0

You could use the HTML style element.

<img src="..." style="max-height:1100px" /> this would make them all that height, and the aspect ratio would stay the same as the larger version, however you may not be able to make 4/row without cropping.

user3648062
  • 1
  • 3
  • If you ran this on an image that was, lets say, 5000x5000, you wouldnt save bandwidth at all...but its one solution. – Ingwie Phoenix Oct 04 '14 at 02:02
  • Thanks for the answers, but I don't think this is something that css alone can solve. Here's a site which has the layout I'm after: https://paddle8.com/work/aime-jules-dalou/39388-moissonneur-affutant-sa-faux-reaper-sharpening-his-scythe (Scroll down the page and you'll see what I mean) – tldr_baz Oct 04 '14 at 02:15
  • @IngwiePhoenix You're absolutely correct, and I know this because I'm currently working on something for an artist who gives me photos that are 5000x5000 – user3648062 Oct 04 '14 at 02:23
0

If you dont mind spending some lines of code, then look here: http://php.net/manual/en/function.imagecopyresized.php

Using this function with something like this, would give you a pretty nice result. The following is pseudo-code:

<?php
// From the manual
function resizeImage(...) {...}

function getImage($imageName, $width, $height) {
    $dir = dirname($imageName);
    $bImgName = basename($imageName);
    $newName = "{$dir}/{$width}x{$height}.{$bImgName}";
    if(!file_exists($newName)) {
        resizeImage($newName, $width, $height);
    }
    return $newName;
}
?>

Then, in your HTML...

<div id="myDiv"> <!-- #myDiv { width: 400px; } -->
    <img src="<?=getImage('img/myCoolPicture.jpeg', 400,400)?>">
</div>

That basically turns

img/myCoolPicture.jpeg

into

img/400x400.myCoolPicture.jpeg

and even reusing that, too!

I did not write an implementation for resizeImage, this should be your task, since I dont know with what formats and the like you are working. But the one given from the manual page should help you get started there.

The idea for this comes from caching. You basically are caching the resized versions, by keeping them on the filesystem, and reusing them. Effectively reducing the sent amount of data.

Hope it helps. :)

Ingwie Phoenix
  • 2,703
  • 2
  • 24
  • 33
  • Thanks for the reply! Unfortunately, it's the actions of the resizeimage function, or rather working out what those dimensions should be, that I'm stuck on. I probably could have phrased the question better too, but the issue itself isn't about resizing an oversized image (they're unlikely to be that large, and I can put safeguards in place for that anyways), it's more about working out what size they should be so they fit exactly in a line from edge to edge, and all have the same height – tldr_baz Oct 04 '14 at 02:28