Is it possible to auto detect width and height?

[wzol]

I don't know the size (or aspect ratio) of the pictures when I'm adding them. Is it possible to make it responsive or auto detect or any other way to do this?

[henrygd]

Unfortunately, for zooming and the default entrance animation you really need to know width / height beforehand. Ideally you'd be pulling from a source (database / api) that would give you access to that info. If you're using webpack / rollup with local files, there may be a plugin that can process the images to give the dimensions. Or if you're loading thumbnails on a page in the correct aspect ratio you could grab those dimensions with javascript and multiply by 10 or something.

[rootsongjc]

I am using bigger-picture on my website jimmysong.io and it is really so useful. Because my site is generated using Hugo, Hugo has built-in image processing functions to get the size of local images, but it can't do anything about remote images. I don't know which site generation tool you are using, is there a similar function or plugin to get the dimensions of the image?

[wzol]

I don't really mind the entrance animation, that can be a compromise - at least the content could be nice. Could some trickery with obect-fit:contain; help?

[henrygd]

If you don't have the dimensions ahead of time, perhaps a better solution is to show an indicator while the asset loads, prior to opening in bigger-picture. The loading can be initiated as soon as a user hovers over a target, reducing the delay to almost nothing in many cases. When I have time I can make a small extension to do this.

One change I can make in the library itself is to update the dimensions after the image is loaded. That way the image will always display correctly as soon as we have access to the width / height, even if it isn't provided. This doesn't help at first open, but should generally work afterward because the library preloads the previous / next image.

I'm in the middle of driving 4,000 km and trying to find a place to live, so I don't have much time at the moment. I'll try to think of better ways to handle this over the next few days and many hours I have left to drive.

@rootsongjc Can you explain a bit more how you want to use remote images? Will there be a thumbnail loaded ahead of time on the page? Also, I like your site. I checked a few blog posts to see how you're using the library. One thing I want to mention is that the page shifts a bit when the image opens for users with old-school scrollbars like me (linux user). Not a huge deal, but you can stop that from happening with the css below. It's due to the style I added to lock scrolling, but obviously doesn't work on all sites. I'll look further into the cause and add an option to disable that behavior in the next release.

.bp-lock {
    overflow-y: auto;
}
.bp-lock body {
    overflow: auto;
}

[wzol]

Wow, that would be awesome, I'm looking forward to it, and drive safe!

[rootsongjc]

@henrygd Thanks for your advice. I want to insert an image with Markdown style like ![image](https://xxxxx.com/xxxx), I don't have the thumbnail of the image. Hugo will render the Markdown to HTML. See my image rendering code.

[henrygd]

Here's a quick example of how you can fetch a remote image's dimensions to feed them to bigger-picture:

https://codesandbox.io/s/morning-browser-prrf1c

You can use a library like nprogress to make the loading indication clearer.

This also only works for one image at a time currently.

Like I said, I'll probably release a little extension to make this easier in the future (or possibly build it into the library), but this should hopefully work for now.

[molnarm]

"One change I can make in the library itself is to update the dimensions after the image is loaded."

Is there any news on this? I'm looking for a good lightbox library for a project, and this one seems to be the best (thanks!), but it's missing this crucial feature (which is very common in others).

[henrygd]

Is there any news on this?

I want to get a solution implemented eventually, but don't have much time to put into personal projects until the latter half of February. That's the most likely timeline but I'll see if I can take a peek before then.

[molnarm]

Thanks!

FYI in the meantime, since I needed to decide now because it's for a work project, I quickly hacked it in there: https://github.com/henrygd/bigger-picture/compare/main...molnarm:bigger-picture:image-autosize

It works well enough for me; I didn't make a PR because I didn't change the default intro animation (I didn't even try to understand the transitions and I'm using fadeup anyway).