Afbeeldingen zijn vaak niet in een passend formaat voor je website. Foto’s komen met een breedte van 5184 pixels uit mijn camera, terwijl ik ze maar 635 pixels breed op Bits+Bites toon. De foto’s in origineel formaat gebruiken zou de laadtijden onnodig vertragen en ook erg veel bandbreedte gebruiken. Ook screenshots en afbeeldingen van internet zijn over het algemeen niet in het juiste formaat. Een optie zou zijn om alle afbeeldingen die ik op mijn website plaats handmatig voor te bewerken en te verkleinen naar het juiste formaat. Gelukkig zijn er voldoende opties om dit proces te automatiseren.

Ik gebruik daar twee verschillende manieren voor: de mogelijkheden van Hugo zelf voor het transformeren van afbeeldingen in de tekst, en Apple Shortcuts voor het transformeren van de hoofdafbeelding.

Hugo

Hugo heeft verschillende Image Processing Methods ingebouwd, waaronder het aanpassen van het formaat. Deze methoden kun je op twee manieren aanroepen, via Render hooks of via Shortcodes.

Een Render hook wordt tijdens het parsen van Markdown aangeroepen op het moment dat Hugo een afbeelding tegenkomt:

![Alt text](afbeelding.jpg "Afbeelding titel")

Shortcodes daarentegen, zijn kleine stukjes code in de Markdown die een groter stuk code aanroepen. Terwijl je bij Render hooks “pure” Markdown kunt blijven gebruiken, voeg je bij Shortcodes Hugo-specifieke code toe aan je Markdown. Dit was voor mij de reden om Render hooks te gebruiken, maar bij een eventuele overstap naar een ander platform is het goed mogelijk de shortcode met een script om te zetten naar Markdown.

Een groot voordeel van automatisch afbeeldingen transformeren in Hugo is dat bij eventuele wijzigingen, deze op de hele website worden toegepast. Dit betekent dat ook alle afbeeldingen van oudere posts opnieuw worden getransformeerd. Zoals je iets verderop zult zien genereer ik op dit moment bijvoorbeeld nog geen responsive HTML voor afbeeldingen. Op het moment dat ik ervoor kies dit wel te implementeren, wordt dit voor alle posts op mijn websites toegepast, zonder dat ik handmatige handelingen rond het aanpassen van mijn afbeeldingen hoef uit te voeren.

Render hooks

De Render hooks worden gedefinieerd in layouts -> _default -> _markup, waar _default vervangen kan worden met een ander type layout indien nodig. Dit betekent dat je voor elk type layout voor op je website (in mijn geval bijvoorbeeld bits en bites) afbeeldingen op een andere manier kunt verwerken. Als een Render hook wel aanwezig is in de map _default, maar niet in de map specifiek voor het type layout, wordt de _default gebruikt. Hierdoor is het niet nodig om voor elk type layout een Render hook te specificeren.

Er zijn verschillende voorbeelden van Render hooks online te vinden, maar in eerste instantie heb ik ervoor gekozen om het zo simpel mogelijk te houden:

<p class="md__image">
    {{ $data := newScratch }}
    {{ if .Page.Parent.IsPage }}
        {{ $data.Set "image" (.Page.Parent.Resources.GetMatch .Destination) }}
    {{ else }}
        {{ $data.Set "image" (.Page.Resources.GetMatch .Destination) }}
    {{ end }}

    {{ if $image := $data.Get "image" }}
        {{ $image = $image.Resize "1270x" }}
        <div>
            <img src="{{ $image.RelPermalink }}" alt="{{ .Text }}" width="635px" class="dark:border dark:border-black">
            {{- if .Title -}}<p class="italic text-center -mt-6">{{ .Title }}</p>{{- end -}}
        </div>
    {{ end }}
</p>

Informatie over de afbeelding wordt meegegeven in .Destination. Het eerste stuk in de code zorgt ervoor dat de afbeelding van de juiste plek wordt gehaald, afhankelijk van of de pagina onderdeel is van een Page Bundle of niet. Vervolgens wordt het formaat van de afbeelding aangepast naar 1270 pixels in de breedte. De hoogte wordt aan de hand daarvan automatisch bepaald. Vervolgens wordt de HTML met de benodigde informatie gegenereerd. Doordat ik Tailwind CSS gebruik, wordt er ook een stukje styling meegegeven.

Dit voorbeeld genereert nog geen responsive HTML, zoals Adam Wills bijvoorbeeld wel doet. Hij kiest er overigens niet voor om het transformeren van de afbeeldingen in Hugo te doen, maar tijdens het bouwproces in Gulp.

Shortcodes

Hugo heeft een standaard shortcode voor afbeeldingen, maar daarmee worden afbeeldingen alleen in een stukje HTML gezet en niet automatisch getransformeerd. Het is ook mogelijk om zelf shortcodes te maken. Net als bij Render hooks kun je dit zo ingewikkeld maken als je zelf wilt, en zijn er veel voorbeelden van op internet te vinden. Deze post geeft een mooi voorbeeld van hoe je afbeeldingen automatisch kunt verkleinen op basis van een Shortcode. Net als het voorbeeld van Adam Wills, genereert Alex Lakatos hier responsive HTML.

Een voordeel van Shortcodes ten opzichte van Render hooks is dat je parameters mee kunt geven. Zo kun je bijvoorbeeld het gewenste formaat meegeven, waardoor niet alle afbeeldingen dezelfde breedte krijgen zoals bij Render hooks.

Apple Shortcuts

Een nadeel van de mogelijkheden in Hugo om je afbeeldingen te transformeren is dat in de bestandsnaam van de getransformeerde afbeelding een hash wordt toegevoegd. Nu lijkt dat in eerste opzicht niet zo interessant, maar het zorgt ervoor dat de afbeeldingen minder geoptimaliseerd zijn voor zoekmachines:

Create good URL structure for your images: Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.

Voor de afbeeldingen in de tekst zelf vind ik dat niet heel erg, maar ik wil wel graag dat de hoofdafbeelding goed gevonden kan worden. Daarnaast is er nog een andere reden op het gebied van zoekmachineoptimalisatie. Ik schreef in mijn vorige post al over het recepten Markup voor Google Structured Data. In de specificaties wordt aangegeven dat de afbeelding bij voorkeur in 3 formaten wordt toegevoegd: 1x1, 16x9 en 4x3.

Een handige tool om afbeeldingen automatisch te transformeren is ImageMagick. Dit werkt echter niet op de iPad, terwijl ik daar wel nieuwe posts op wil kunnen maken. Daarom heb ik gebruikgemaakt van Apple Shortcuts. Hiermee kun je ontzettend veel acties waarvoor je normaal een app zou moeten openen automatiseren, zoals de robotstofzuiger opdracht geven tot het stofzuigen van de keuken.

In dit geval gebruik ik Shortcuts voor het opzetten van het template voor een nieuw recept. Een onderdeel daarvan is het transformeren (en hernoemen) van de hoofdafbeelding, waarvoor ik een aparte Shortcut heb gemaakt. Deze is vooral bedoeld om afbeeldingen in landschapsformaat om te zetten. Het werkt ook voor afbeeldingen in portretformaat, al houd je er in dat geval niet zoveel van over. De Shortcut om automatisch het formaat van een afbeelding om te zetten naar 1x1, 16x9 en 4x3 vind je hier.