Tilføjelse af Moving GIFs til Ordnet.dk med Hugo Site Generator
Optagelse af Screencast #
Eftersom videoen kører i en løkke, fungerer det bedste hvis den starter og slutter cirka det samme sted
Mac #
- Åbn QuickTime Player.
- Gå til File > New Screen Recording.
- Justér browservinduets størrelse, så det fokuserer på det relevante indhold. Sørg for at undgå unødvendig plads omkring det vigtigste område.
- Klik på den røde optageknap og vælg det ønskede område, der skal optages.
Windows #
-
Åbn Xbox Game Bar ved at trykke på Win + G
.
-
Klik på optageknappen (cirklen) i widgeten.
-
Justér browservinduets størrelse på samme måde som på Mac for at centrere det relevante indhold.
Konvertering til GIF #
Brug shellscriptet convert_to_gif.sh
i tools/
mappen til at konvertere screencasten til GIFs.
./tools/convert_to_gif.sh FILNAVN.mov
Dette vil generere to GIF-filer: FILNAVN-stor.gif
og FILNAVN-lille.gif
.
Placering af GIF-filer #
Placer de genererede GIF-filer i mappen static/images/gifs
.
Rediger data/tips.json
for at tilføje metadata for den nye GIF.
Eksempel på metadata struktur:
{ "tip": [ "Brug tab for at aktivere søgefeltet uden at bruge musen" ],
"vids":
{ "ddo": [
{
"name": "Lydskrift",
"description": "Se en forklaring på lydskriften når placerer musen over en lydskrift",
"alt": "En beskrivelse til synshandikappede...",
"file": "lydskrift" } ,
...
]
}
}
- name: En kort titel for videoen.
- description: En beskrivelse af hvad GIF’en viser.
- file: Navnet på filen uden
-stor
og -lille
suffix.
Tilføj disse oplysninger under sektionen "vids"
, "ddo"
for at sikre korrekt integration.
Tilføjelse af en videobox til en side #
Video guides tilføjes til en side med shortcode’en video-guides.html. Eksempel:
{{ < box header="Tips og tricks" > }}
{{ < video-guides "ddo" > }}
{{ < /box > }}
“ddo” ovenfor styrer hvilken gruppe i tips.json der vælges under “vids”.