jan-xyz / hugo-module-img-srcset Goto Github PK

Based on some recent research I found that I am incorrectly using the srcsets. I will review and improve upon it.

[1] https://html.com/attributes/img-srcset/
[2] https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015

This is a great example in showing how powerful Hugo can be. It'd like to suggest to add a conditional check to prevent errors when the .Destination is a fully formed external URL or miss-typed. Image processing will complain if no resource is matched.

See for related checks a partial I have been working on towards a similar purpose: https://github.com/Arty2/onion/blob/master/layouts/partials/render-image.html

Hi there,

it would be nice to add support for webp images, as it brings real improvements. A fallback must be provided though

I'm using this little module for my blog, but I feel like using .PlainText makes more sense than using .Text. .Text will always output HTML, so quotes will end up as HTML escape sequences, whereas .PlainText will keep everything as text, which in my opinion makes more sense for captions.

I can open a PR if you want to stick to "the process" but it's only five characters, so ... 😄

Hi,
thanks for this great module, seems like this could be really useful.
Do you think this could also be used inside a template?

Currently my code looks something like this:

    <div class="card-img-wrapper startpage-card">
      {{$original := resources.Get .Params.bg_image }}
      {{$image := $original.Resize "600x"}}
      <img class="card-img-top rounded-0" src="{{ $image.RelPermalink }}" alt="service-image"> >
    </div>

I am using the resource.Resize function to scale all my images to the right size, but this is a hardcoded size for all different device types which is not optimal.
Could you also create a srcset/ figure with your module inside the templates?