Natívne 'lenivé' načítanie obrázkov a definovanie šírky + výšky

Hľadal som ľahkú cestu k tomu, čo som sa snažil dosiahnuť .. ale nenašiel som to, tak som sa rozhodol, že si sám vytvorím hugo ‘pipeline’ (tak sa im hovorí, či ? :D).

V podstate som sa snažil dosiahnuť dve veci:

• Pridanie ‘lenivého’ načítania obrázka html, ktoré teraz podporuje väčšina prehliadačov
• Pridanie šírky / výšky obrázka, aby v prípade načítania stránky neskákali ako bláznivé

^ tieto veci by taktiež mali v niektorých prípadoch trochu vylepšiť hodnotenie rýchlosti stránok.

Toto je každopádne kúsok kódu, ktorý by ste mali vložiť do layouts/_default/_markup/render-image.html, toto funguje pre obrázky, ktoré majú nastavenú relatívnu cestu k adresárom static alebo content.

<!-- layouts/_default/_markup/render-image.html -->

{{ $img := "" }}
{{ $source := ( .Destination | safeURL ) }}
{{ $imgPath := add "/content" $source }}
{{ if fileExists $imgPath }}
    {{ $img = imageConfig $imgPath }}
{{ else }}
    {{ $imgPath := add "/static" $source }}
    {{ if fileExists $imgPath }}
        {{ $img = imageConfig $imgPath }}
    {{ end }}
{{ end }}

{{ if $img }}
  <img
  src="{{ $source }}"
  alt="{{ htmlUnescape .Text }}"
  loading="lazy"
  width="{{ $img.Width }}"
  height="{{ $img.Height }}"
  />
{{ end }}

A tu je ako vyzerá generovaný kód:

Poznámka: Je potrebné použiť css img {height: auto; max-width: 100%}, aby sa potom obrázky na vašej stránke správne automaticky naškálovali.