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.