Getting Image Width/Height from Large Media

I have a site that is mostly a photo gallery (built with Eleventy) that I am using Large Media with and transforms to use the correct size image. I would like to get the image’s width and height to use in the img tag where used in the template. Since I am using Git LFS for Netlify Large Media, Eleventy just sees the small pointer file, which isn’t really useful for this use case.

A few ideas I am considering:

  • Have Eleventy/Node grab the image from the public URL and get the width and height that way. This would make the build time slower and just seems awkward.
  • Could Netlify CMS’s image widget be used to get the width and height?
  • Clone the repo I am working off of including the original files from Git LFS instead of the pointers. I would get the actual files, but would Netlify need do the same on it’s side?
  • Is there something with Git LFS that I am missing where I could read the actual file? I am kinda new to LFS.
  • Or something I am completely off target with?

Thanks!
-scott

Hmm, I don’t know a good way to handle that, to be honest. How do you add images to your site? Maybe the image addition process could include a “input image metadata in a file that your site uses” step? That’s pretty unwieldy too, but as you point out, the images aren’t available locally during build and that won’t change anytime soon. Not sure how many files and how large you’re talking to know if it might make sense to include them in your normal repo AND in LFS? You would have to keep them in sync, but maybe that’s less annoying than the alternatives?

Yeah, this particular site has almost 500 high quality jpegs. This site was originally migrated from WordPress and I was able to get an export that matched the file name into the posts’ YAML data. I am kinda thinking Git LFS isn’t the best solution for this.

I should mention too that the image aspect ratio is not going to be the same across the board, so I can’t assume the width and height ahead of time.

Hmm. It’s hard to say for sure but I think it would be easier to just host your images on something like cloudinary and point to them from your site, specially if you’d need to do image transformations on an image by image basis. Would that work for you?