Image width and height on-the-fly

[hasnatbabur]

Is there any way to get the desired image height and width before sending html response? We need this feature for image gallery section. Thanks

[sherwinski]

Hi @hasnatbabur, could you elaborate a bit more about what you are looking for? Or possibly provide an example of the feature that you're describing. Thanks

[hasnatbabur]

@sherwinski
Let's consider the following html ...

I am using following libraries:
https://github.com/imgix/imgix-php
https://github.com/Otisz/Laravel-Imgix

/! blade template file

// get imgix url
$imagePath = 'image/path/on/web';
$imgixUrl = imgix_url($imagePath); // we pass only h=300, and width should be auto

<div class="gallery">
    <img class="gallery__img" width="??" height="??" src="{{ $imgixUrl }}"/>
    <img class="gallery__img" width="??" height="??" src="{{ $imgixUrl }}"/>
    <img class="gallery__img" width="??" height="??" src="{{ $imgixUrl }}"/>
</div>

For the example above is there any way to get the width and height of the image from imgix so that we can use in the markup above? The grid will not work without proper image height and width attribute values.

Please have a look the gallery here:
https://tookapic.com/photos
They also use imgix and getting image height and width in PHP variable for using.

Can you help? Thanks.

[sherwinski]

Hi @hasnatbabur, thank you for providing more details.

Unfortunately, this is not a supported feature through imgix's service or this library. The best suggestion I can give is to use the fm=json parameter to extract the PixelWidth and PixelHeight metadata on the master image. This could possibly give you an idea of how to scale your width and height to maintain the image aspect ratio. However, this would have to be done for each image ahead of time so it's probably not the exact solution you are looking for.

I am not sure how tookapic is determining the width and height of their images. I would imagine that they are somehow extracting/storing the image dimensions separately.

I hope that helps you. Feel free to comment back if you have anymore questions.

[hasnatbabur]

@sherwinski Thanks a lot for your clarification. From your suggestion I think I should store main image dimension/meta in database then calculate modified dimensions.

Thanks for your help.