danielfdickinson / image-handling-mod-hugo-dfd Goto Github PK

The LFS images in the exampleSite causes high (for a free plan) usage of bandwidth when the main reason for pulls is module usage.

Therefore the LFS images and demo site should be separated out.

Currently it is not possible to require getting back absolute links in all cases. In some cases (like a 404 page that doesn't live in the main hierarchy on the server with some hosting), we need absolute links for everything to make sure pages don't break.

We've had a WIP 'duct tape and bailer twine' demo site, so during refactor let's make it more beautiful to show off the image handling.

Instead of overloading 'image-handling' with copies of metadata module code in order to make the auto-generated 'social cards' and microformats images work, it would be better to create a new repo that imports both image-handling and metadata, and adds it's own logic.

This would make make image-handling more purely about image-handling without adding dependency on another module.

Nowadays Lighthouse checks against 2ddpx so Best Practises will get < 100% due to images being served at single density (i.e. not double the size to be displayed on a double density display).

The main reason we had this was to support the now dead IE11. Need to review whether picture has any function to serve in this module. If not remove, if yes, update for the use cases we identify.

Was wondering if lazysizes support could make it into your module — I'm especially interested in the LQIP/blurry image placeholder/Blur up image technique?

When using frontmatter imageConvertMethod the conversion errors out due to lack of knowledge of the new size. Internal use (not param) works.

The parameter-based usage needs fixing.

A lot of development and hacking on things has happened; it's time to refactor, and clean up, and document so that the code base is easier to follow and use.

Hello, my hugo repo was depending on link-handling-mod-hugo-dfd.

I you don't wish to maintain the project, could I get a copy to keep my code base running?

First off, thanks for this well thought out and set up module. Absolutely brilliant!

Could supporting base64 images make it to your module?

So that, for example:

![alt attribute][src-attribute]

[src-attribute]:data:image/png;base64,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

Gets converted to something like;

<img src="data:image/png;base64,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" alt="alt attribute">

And displays as:

Note, Hugo supports this conversion out of the box — so, without a render-image.html override

And update shortcode, partials, and README appropriately.

We use a parameter because want this feature for Markdown, but it can be counterproductive to have an extraneous caption with featured images and site logos. For that reason we need to let partials (and while we're at it, shortcodes) only fallback to the imageAltAsCaption Params setting if it is not set in the partial or shortcode call.

Hi all, I've chose this repo to process images for my hobby Hugo-based site, as it seemed for me as most feature-rich amongst all others similar mods. I've found it to be rather convenient to use, but I am missing some more options, which could help to add images to Hugo site without never ever using any image editor except Hugo's image processing. I tried adding those options and used them - and managed to get a perfect result with raw unedited shots from smartphone transformed into compressed, rotated, resized web images with a few code lines, which are faster to write to markdown, than to manually do in image editor.

Thanks for such a handy module! It seems like just what I'm looking for. Unfortunately I'm running into trouble when following the install instructions. I'm very new to Hugo so I'm sure I'm doing something dumb though.

We left the option of no alt text for drop-in compatibility with the default Hugo figure shortcode and featured image handling. Let's rename things so that if people want the old (not good enough IMO) behaviour they can just use the built-ins, but when they want this module, they can specify 'our' shortcode and frontmatter.

The docs currently advertise a parameter for this, but it wasn't actually implemented. Fix that.

This awesome module lacks 1 modern option - LQIP background generation for images. There are two ways of implementing this - either adding Base64-encoded low quality image (seems best option for now is blurred x20 webp with quality 30) as background by style, or with newly implemented Hugo image processing option - .Colors, which will find image's most frequently used colors, so a background gradient could be added to image style (less bytes will go to html and processing should also be faster, but the background could differ more from the image, than Base64 webp will bring). So I would like to start a bit of discussion, which way is better, which part of the module should process this (thumbnail-or-full-picture for adding style/class and generate-images for actual processing? or a separate partial, quite similar to generate-images, but doing just one job - producing LQIP?). Should this option go as default for lazy-loaded images, or should user decide, if he wants to use that function?