Werk met de garagedeur open

In de laatste nieuwsbrief maakte ik er al een opmerking over, ik vind het enorm interessant om andermans werkwijze te zien. Om te zien hoe iets wordt gemaakt, om de werkplaats van een maker te bekijken. Ik ben zelf echt niet handig en mijn schuur is een puinzooi. Ik zoek me altijd een ongeluk naar steeksleutel nr 8 of 10 en elke kruiskopschroevedraaier is bot. Ook digitaal klooi ik maar wat aan. Soms laat ik op de site wel wat work in progress zien. Zo vertelde ik in het verleden over de 72 regels code (Deel 1 en deel 2) die ik maakte om een eigen probleem op te lossen. Ik leg uit hoe je al je Twitter volgers kunt verwijderen opnieuw begint. Jaren geleden zochten we publiekelijk uit hoe je met een community een boek kunt publiceren. In korte notities die ik in de trein schrijf probeer ik webmentions werkend te krijgen. Een Raspberry Pi ombouwen tot een timelapse-machine om een sneeuwstorm vast te leggen.

Zo zijn er talloze voorbeelden die ik door de jaren heen hier deel. Stukjes van ideeën die nog niet af zijn, waar ik iets mee zou willen doen. Wat ik uiteindelijk ook ga gebruiken. Of niet. Maar dat maakt niet zoveel uit.

Frustratie over filesizes

Zo heb ik deze zaterdag zitten puzzelen met ImageMagick. De reden was wederom frustratie. In de nieuwsbrief directory Thanks for Subscribing maak ik gebruik van headerbeelden. Het geeft wat kleur en afwisseling in een verder best kale omgeving. In het begin vond ik het niet zo erg om zelf headerbeelden te maken van nieuwsbrieven. Soms plukte ik iets van de site van de maker, soms een voorbeeld van een nieuwsbrief. Op gegeven moment heb ik bij het aanmeldformulier een veld toegevoegd voor de maker om zijn eigen headerbeeld op te geven. Via een URL. Je moet weten, vanaf de eerste dag heb ik de onderliggende Airtable database zo gemaakt, dat ik er alleen URL’s in opsla en geen daadwerkelijke afbeeldingen. Daarom vraag ik om een URL van de afbeelding. Bij voorkeur heeft de afbeelding een specifiek formaat 600 x 400 pixels. Helaas kan ik door de achterliggende database dat niet checken, dus ik hoopte dat de maker zelf slim genoeg is om een directe URL naar een afbeelding te geven en om deze het juiste formaat te geven.

Je voelt al waar dit heen gaat…

Ik krijg heel veel variaties op het thema “juiste URL en juiste afmetingen”. Zo kom ik tegen:

• Een link naar de homepage, ofwel, zoek het zelf maar uit
• Een link naar een Dropbox pagina, waar ik zelf weer de afbeelding uit moet vissen. Veelal in een verkeerde hoogte x breedte
• Een link naar Google Drive
• Links naar imagedumps zoals imgur en vergelijkbare sites
• Headers die te lang zijn
• Headers die te kort zijn
• Header die te klein zijn, lees: een icoon

Kortom, gedoe. Ik wilde dat oplossen. Want het zelf maken van de headers houdt me nu tegen om nieuwe titels toe te voegen aan de site. Het is steeds een paar minuten werk, maar met een gemiddelde backlog van 40 – 60 titels die ik nog moet checken, telt dat flink op.

4 uur werk, 2 regels code

Ik had al vaker van ImageMagick gehoord maar had me er nog niet eerder in verdiept. Ik wilde eens uitzoeken of ik van een opgegeven URL automatisch een headerbeeld kan maken in de juiste dimensies. Mijn uitgangspunt was: Kan ik van een te breed en te kort headerbeeld een juiste uitsnede maken? Ofwel, kan ik van dit

Naar dit formaat gaan?

Vanuit het midden gecropt en op de achtergrond een geblurde versie van hetzelfde beeld. Want dat is een versie die vaak voorkomt. Na een middag puzzelen met de verouderde documentatie en wat voorbeelden uit diverse fora kwam ik langzaam maar zeker ergens. Uiteindelijk kon ik met slechts 2 regels code in een Bash script dit mogelijk maken.

convert $file_name -resize '600x400^' -gravity center -crop 600x400+0+0 -gaussian-blur 20x10 +repage tmp-$file_name

magick composite -gravity center $file_name tmp-$file_name ~/Documents/ThanksForSubscribing/Headers/header.jpg

Als je niet bekend bent met ImageMagick dan zegt bovenstaande je niet veel. Zie het als een conclusie van een denk- en leerproces wat me zeker 4 – 5 uur heeft gekost. Van de eerste stappen in ImageMagick tot het snappen van de documentatie. Vervolgens het uitzoeken van de logica in code en bedenken of dit altijd mijn problemen gaat oplossen.

Want wat er toen gebeurde…

Nee. Het zal niet altijd een oplossing voor mijn probleem zijn. Toen ik bovenstaande regels in een script had gezet om een URL van een header op te halen en het wilde testen, ging het (natuurlijk) direct mis. De header in kwestie in deze

Een te gekke site met bijbehorende nieuwsbrief. Maar een transparante png van een tekstuele header. Daar had ik natuurlijk nog niet over nagedacht. Want als ik die header door dit script laat bewerken dan krijg ik deze header

Niet heel smakelijk om te bekijken… Eigenlijk wil ik met transparante png bestanden weer een andere header maken. Namelijk een witte achtergrond, niet uitgeknipt maar juist geschaald. En dan heb ik het nog niet gehad over headers die hoger dan breed zijn. Of die eigenlijk te klein zijn om te vergroten. Maar goed, de dag zat er wel op en ik was de documentatie van ImageMagick wel even beu. Plus mijn kennis van Bash scripts is zo minimaal dat dit soort als/dan logica me nog even te veel was.

Zo zie je maar, in deze garage staat de deur nog wel even open. Aan de andere kant, de nieuwsbrief directory verhuist hopelijk deze maand naar een nieuwe server met WordPress aan de achterkant. Dan wordt het uploaden en controleren van headerbeelden al een stuk eenvoudiger door de vele plugins die bestaan. Maar ik heb dan toch wel geleerd hoe een mooi gereedschap als ImageMagick werkt.