Existuje několik důvodů, proč použít vodoznak. Tím nejčastějším je umístění značky do fotografie (typicky loga, iniciál autora, webové adresy, apod.), zejména jako prezentačního prvku. Obvykle se jedná o malý symbol, umístěný u okraje, který v celku nijak nenarušuje motiv hlavního obrázku. Druhým důvodem je pak ochrana zdrojového obrázku před zcizením, resp. jeho neoprávněným užitím (odtud nakonec název tohoto článku). Zde již dochází k záměrné degradaci původního motivu hlavního obrázku, obvykle jeho kompletním překrytím opakovaným motivem vodoznaku, který má v těchto případech často i výrazné kontury, které znemožňují užití obrázku. Spíše pro doplnění lze zmínit i možnost, že prostřednictvím vodoznaku můžeme obrázek doplnit i dekorativními prvky, např. rámečky.
Obsah
Ať již jsou důvody k umísťování vodoznaku do obrázků jakékoliv, určitě je žádoucí, aby to bylo prováděno automatizovaně a současně, aby nebyly poškozeny původní obrázky, což znamená, že výstupem musí být modifikovaný obrázek vzniklý sloučením vodoznaku a zdrojového obrázku. Přesně to dělá akce watermark.
Akce watermark je mocný nástroj pro automatizovanou modifikaci obrázků, jejímž výstupem jsou upravené kopie zdrojových obrázků opatřených vodoznakem. Je však nezbytné upozornit na skutečnost, že pokud chceme uživatelům poskytnout pouze obrázky opatřené vodoznakem, je třeba, aby zdrojové obrázky byly umístěné v nějaké neveřejné složce. Je totiž zcela zbytečné je opatřovat vodoznakem, pokud se nacházejí ve shodné složce jako je stránka a z názvu modifikovaného obrázku se dá snadno dovodit název zdrojového obrázku.
Před časem jsem napsal článek Grav v1.7.24 bude obsahovat podporu vodoznaku, ve kterém jsem upozornil na novou funkcionalitu Gravu, kterou obsahuje přímo ve svém jádru. Jelikož k akci watermark neexistuje ani s odstupem více jak 6 měsíců žádná oficiální dokumentace, přináším ji v tomto článku. Jedná se o poměrně komplexní popis funkcí, včetně všech objevených záludností, potencionálních chyb a jejich možných řešení. Přesto není zdaleka úplný a nepochybně existují další způsoby nastavení. Pokud objevíte nějaké originální řešení, o něž se budete chtít podělit s ostatními, pak jej pošlete zpracované v Markdownu a můžeme se dohodnout na zveřejnění.
Současně jsem vytvořil i stručný popis, který jsem poskytl do oficiální anglické dokumentace. Ta podléhá validaci textů ze strany editorů, takže může nějakou dobu trvat, než se objeví.
Níže uvedený návod byl testován v Gravu v1.7.33, ale měl by být bez problémů funkční i v nižších verzích, a to včetně Gravu v1.7.24. Ve vyšších verzích se mohu vyskytovat odlišnosti, v závislosti na dalším vývoji.
Akce watermark
Ve výchozím nastavení má akce watermark následující parametry, které jsou uloženy v /system/config/system.yaml:
images:
watermark:
image: 'system://images/watermark.png' # Path to a watermark image
position_y: 'center' # top|center|bottom
position_x: 'center' # left|center|right
scale: 33 # percentage of watermark scale
watermark_all: false # automatically watermark all imagesTyto parametry nelze (prozatím) změnit přes Admin Panel, protože neobsahuje příslušná pole ve formuláři, a je otázkou, zda je někdy bude obsahovat. Chcete-li je z jakéhokoliv důvodu upravit, pak tak učiňte v souboru /user/config/system.yaml, kam potřebné údaje nejprve překopírujte. Prakticky jediný parametr, který má význam měnit, je watermark_all, který – po nastavení na hodnotu true – ovlivňuje označování všech obrázků na webu výchozím vodoznakem, uvedeným v parametru image. Na druhou stranu to není příliš praktické, protože se vodoznakem označí skutečně všechny obrázky, tedy i ty, u kterých to primárně neočekáváme, resp. nechceme.
Častěji budeme chtít vodoznakem označit pouze konkrétní obrázek, popř. obrázky.
V článku dochází k přizpůsobení větších obrázků šířce sloupce, neodpovídají tedy původní velikosti. Uvedené bude výhledově napraveno, prozatím lze vyřešit zobrazení v plné velikosti přes Otevřít obrázek na nové kartě. Na mobilních zařízení jsou obrázky pochopitelně zcela ilustrativní.
To lze provést velmi jednoduše, prostřednictvím parametrů v Markdownu, které mají následující vzor:
Na úrovni Twigu pak tento vzor:
{{ page.media['sample-image.jpg'].watermark('image','position',scale).html()|raw }}V Twigu je nezbytné umístit všechny řetězce mezi apostrofy, jinak dojde k chybě!
Parametry jsou nepovinné, pokud je však použijeme, pak musí být jejich pořadí striktně dodrženo. Pro označení obrázku vodoznakem stačí uvést název akce watermark a použijí se všechny výchozí hodnoty ze souboru system.yaml:
Obrázek s originálním vodoznakem Gravu umístěným na střed obrázku (je opravdu velmi slabě viditelný, ale je tam):
Parametr image
Chceme-li použít vlastní obrázek vodoznaku, musíme na něj odkázat v rámci prvního parametru, tedy image. Pokud máte obrázek s vodoznakem uložen jako médium stránky, pak asi budete překvapeni, že nefunguje pouhé uvedení názvu souboru jako parametru, jako je tomu např. v případě zdrojového obrázku. Akce watermark vyžaduje cesty zadané formou streamů, tedy např. system://images/watermark.png, theme://images/watermark.png nebo user://pages/images/watermark.png. Pokud tedy chceme odkázat na obrázek uložený na úrovni stránky, pak musíme použít stream user://pages/my-page/watermark.png, resp. page://my-page/watermark.png.
Doporučuji používat některý ze sdílených streamů, např. theme://images/watermark.png nebo user://pages/images/watermark.png, resp. page://images/watermark.png, kdy ve druhém případě nesmí být stránka/složka tříděná, resp. opatřená prefixem, tj. musí být pouze /images. Pokud používáme vodoznak ze stránky, která sama, resp. některá z jí nadřízených stránek, prefix obsahuje, pak je nezbytné uvádět stream i s tímto prefixem, např. page://02.blog/my-post/watermark.png.
Obrázek vodoznaku může být v jakémkoliv podporovaném formátu, nicméně doporučuji používat pouze formát png, a to z několika důvodů. Jednak nemá ztrátovou kompresi a především podporuje průhlednost, jak úplnou, např. pro vypuštěné pozadí, tak částečnou přes Alfa kanál, ať již pro celý obrázek nebo pouze jeho jednotlivé části na úrovni pixelů:
Obrázek s vlastním vodoznakem uloženým na úrovni stránky (ostatní parametry zůstaly ve výchozích hodnotách):
Parametr position
Pokud chceme změnit pozici vodoznaku v obrázku, upravíme parametr position, který sestává ze dvou částí, a to position_y-position_x. První část může nabývat hodnot top, center a bottom, druhá část pak hodnot left, center a right. Chceme-li tedy, aby byl vodoznak vpravo dole, použijeme parametr bottom-right.
Důležité je dodržet pořadí souřadnic svislá-vodorovná, jinak parametr nebude funkční. Použijeme-li např. right-bottom, pak Grav místo obrázku zobrazí chybovou hlášku Error.
Je rovněž nezbytné dodržovat pořadí parametrů, jinak Grav místo obrázku zobrazí chybovou hlášku Error. Pokud tedy potřebujeme upravit pozici na úrovni Markdownu, musí parametru position předcházet parametr image, a to i tehdy, když ten se nemění:
Obrázek s vlastním vodoznakem uloženým na úrovni stránky a umístěným vlevo nahoru (parametr scale je ve výchozí hodnotě 33):
Parametr scale
Na řadu přichází poslední parametr scale, který vyžaduje nejpodrobnější popis. Jeho název je poněkud zavádějící, neboť navozuje představu, že ovlivňuje velikost vodoznaku. Ve skutečnosti upřesňuje jeho umístění v obrázku definovaného procentuální škálou a jedná se vlastně o doplňující funkcionalitu parametru position.
Pro bližší pochopení je třeba si představit obrázek tak, že výchozí roh obrázku definovaný parametrem position představuje v procentuální škále 0 % a střed obrázku 100 %. Pokud zadáme hodnotu vyšší než 100, pak pokračujeme po diagonále dále k protějšímu rohu, přičemž protější roh obrázku odpovídá 200 %. Je tedy třeba si uvědomit, že rozsah diagonály celého obrázku není 0-100 % se středem s hodnotou 50 %, což může být pro někoho matoucí. Středová hodnota 100 % má ale svoji logiku, zejména z pohledu jednotlivých kvadrantů.
Pokud má parametr position hodnotu center-center, pak je parametr scale zcela ignorován, resp. vodoznak se bez ohledu na jeho hodnotu umístí vždy do středu obrázku. Pokud nabývá hodnoty center pouze jedna z hodnot parametru position, pak dochází posunu pouze ve vertikálním, resp. horizontálním směru.
Např. výchozí hodnota scale 33 zajistí v případě parametru position s hodnotou top-left umístění středu vodoznaku do 1/6 diagonály (vlevo nahoře) zdrojového obrázku. Pokud ji změníme na hodnotu 100, pak dojde k umístění středu vodoznaku do 1/2 diagonály (uprostřed) zdrojového obrázku, což je zcela totožné, jako když parametr position obsahuje hodnotu center-center. A pro úplnost, ji změníme na hodnotu 167, pak dojde k umístění středu vodoznaku do 5/6 diagonály (vpravo dole) zdrojového obrázku. Z logiky shora uvedených kvadrantů a maximální hodnoty 100 % je pak poslední příklad lepší upravit tak, že parametr positon bude mít hodnotu bottom-right a parametr scale bude nabývat hodnoty 33.
Kompletní Markdown kód s použitím obrázku ze stránky pak může vypadat následovně:
Obrázek s vlastním vodoznakem uloženým na úrovni stránky, umístěným vlevo nahoru a posunutým do 1/4 diagonály obrázku (což vypadá určitě lépe, než pokud byl vodoznak u levého okraje):
Zde je alternativa v Twigu:
{{ page.media['sample-image.jpg'].watermark('page://my-page/watermark-image.png','top-left',50).html()|raw }}Chyby a jejich možná řešení
Pro komplexnost uvádím potencionální chyby, které jsem objevil a jejich možná řešení.
Nízké hodnoty parametru scale
V rámci nižších hodnot parametru scale, konkrétně tehdy, pokud se vodoznak nevejde do určeného místa, dojde k jeho zmenšení, aby se vešel do obrázku (levá, resp. horní strana vodoznaku se dotýká okraje obrázku). Velmi zjednodušeně řečeno – k uvedenému dochází tehdy, pokud je 1/2 šířky vodoznaku větší než vzdálenost od okraje obrázku k diagonále v místě, kde se nachází střed vodoznaku. Obdobně to platí i pro svislý směr. Pokud tedy chcete umístit vodoznak k okraji, aniž by došlo ke změně jeho velikosti, použijte postup uvedený výše, tj. v parametru position uveďte opositní hodnotu a hodnotu scale nastavte na 200-x, kde x je požadovaný posun. Uvedené chování asi není chyba v pravém slova smyslu, ale spíše záměr autora, nicméně je dobré o něm vědět. Možná právě z tohoto sekundárního chování pramení i název parametru scale, ale to je pouze moje nepodložená úvaha.
Minimální hodnota parametru scale
Pokud uvedete parametr scale s hodnotou 0, pak dojde k chybě a Grav místo obrázku zobrazí chybovou hlášku Error. Minimální hodnota parametru tedy musí být 1. Pokud chceme mít z jakéhokoliv důvodu střed vodoznaku v konkrétním rohu, pak použijeme opositní hodnotu parametru position a hodnotu parametru scale nastavíme na 200.
Kombinace s jinými akcemi
Akci watermark lze pochopitelně kombinovat s jinými akcemi, resp. filtry, pro příklad si ukážeme filtr resize. Výhodou Gravu je, že umožňuje zpracovávat prostřednictvím akcí originální obrázek do neomezeného počtu modifikovaných kopií a s těmito dále pracovat, aniž by to mělo jakýkoliv vliv na originální obrázek.
Kombinace s akcí resize
Jednou z nejčastěji používaných akcí je právě resize, která originální obrázek upraví, nejčastěji pak zmenší na požadovanou velikost. Vycházejme ze skutečnosti, že máme obrázek o rozměrech 832 x 624 px. Na 50 % původní velikosti jej zmenšíme následovně:
Do obrázku chceme vložit vodoznak o rozměrech 238 x 36 px. Jednoduše tedy použijeme akci watermark. Máme ji ale dát před a nebo až za akci resize? A má pořadí vůbec nějaký vliv na výsledek? Skutečnost je taková, že v případě více akcí je Grav zpracovává v pořadí, v jakém jsou uvedeny. Každá akce v pořadí již zpracovává výsledek akce předchozí (ačkoli i zde můžeme narazit na specifika, viz níže). Tedy ano, pořadí má vliv na výsledek. Ukažme si tedy, čím se výstupy konkrétně liší a jaké jsou potřeba případné modifikace parametrů, aby byl dosažen očekávaný výstup.
Nejprve si ukážeme vložení vodoznaku a následné zmenšení obrázku:
Z obrázku je patrné, že vše proběhlo jak má a vodoznak je na svém místě, avšak zmenšil se rovněž na polovinu své velikosti. Uvedený výstup může být ve většině případů požadovaným výsledkem, nicméně v některých případech budeme chtít zajistit, aby vodoznak ve všech obrázcích měl stejnou, resp. originální velikost. Pokud tedy chceme vodoznak ponechat v původní velikosti, musíme použít vložení vodoznaku až po úpravě velikosti obrázku:
Z obrázku je patrné, že vše proběhlo jak má a vodoznak má požadovanou velikost, avšak nachází se na jiném místě, než jsme očekávali, konkrétně na středu obrázku. Je to z toho důvodu, že ačkoliv se obrázek zmenšil na polovinu, tak watermark z neznámých důvodů používá škálu původní velikosti obrázku, tj. umístil vodoznak do místa, které původně odpovídalo 50 %. Uvedené tedy mírně odporuje shora uvedenému tvrzení o průběhu zpracování obrázku jednotlivými akcemi/filtry. Pokud tedy chceme vodoznak umístit do 1/4 diagonály, pak musíme změnit parametr na hodnotu 25 (obrázek je nyní na správném místě, ale s ohledem na nedostatek prostoru se proporčně zmenšil a dotýká se levého okraje, jak je uvedeno výše v tipech):
Pokud narazíme na problém se zmenšováním vodoznaku, použijeme opositní hodnoty podle shora uvedeného tipu (nyní má originální velikost, ale přesahuje přes okraj):
Zde je korektní výstup s posunutím vodoznaku do korektní vzdálenosti od okraje:
Co watermark (prozatím) neumí, ale jde vyřešit jinak
Alfa kanál
Aktuálně nelze u vodoznaku nastavit částečnou průhlednost přes Alfa kanál prostřednictvím parametrů, nicméně můžeme použít vodoznak, který Alfa průhlednost obsahuje (viz ukázka v tomto článku, kdy vodoznak obsahuje 50% průhlednost).
Opakování motivu
Aktuálně nelze vodoznak použít v rámci obrázku opakovaně, např. z důvodu kompletního překrytí, nicméně můžeme použít vodoznak, který opakovaný motiv obsahuje (viz výchozí vodoznak Gravu).
Přesné umístění
Aktuálně nelze vodoznak umístit na přesné místo v obrázku, např. 20 px shora a 20 px zleva, popř. alespoň provést ve shodných hodnotách odsazení v obou směrech, neboť umístění po diagonále má za následek jiné vertikální a horizontální odsazení (v závislosti na rozměrech vodoznaku a zdrojového obrázku), což nemusí být žádoucí. Jednou z možností je, že vodoznak bude mít stejný poměr stran jako zdrojový obrázek, kdy se jejich diagonály budou překrývat a posun v obou směrech bude tedy vždy shodný. Uvedeného lze však v praxi málokdy dosáhnout. Pak nezbývá, než jednu z uvedených souřadnic umístit na střed a řešit pouze odsazení druhé, avšak opět pouze v rámci procentuální škály. Nicméně, pokud chceme umístit logo s přesností pixelu, lze v rámci hodnoty parametru scale namísto celého čísla použít desetinné číslo, které nám zajistí příslušnou variabilitu. Desetinné číslo musí být zadáno s desetinnou tečkou, tedy např. 123.4.
Vlastní text
Aktuálně nelze generovat vodoznak s vlastním textem, který by byl např. uveden prostřednictvím parametru, popř. přes formulář. Na druhou stranu variabilita vodoznaků připravených v profesionálním grafickém programu má své výhody, a to včetně typografických úprav textů, kterých by touto volbou nešlo nikdy docílit.
Nalezli jste v článku chybu, ať již gramatickou nebo faktickou? Článek prošel pouze autorskou korekturou a drobné nedostatky, jako překlepy nebo chybný slovosled, se v něm mohou vyskytovat. Pokud je objevíte, pomozte příspěvek upravit oznámením přes kontaktní formulář nebo na e-mail. Budou vám vděčni nejen autoři, ale zejména ostatní čtenáři.
Pomozte Grav.cz prolinkovat. Projekt Grav.cz se za dva roky provozu rozrostl a ve starších příspěvcích na Blogu mohou být uvedeny pasáže, které by stálo za to prolinkovat na konkrétní související řešení, která jsou uvedena v následujících příspěvcích. Pokud takové objevíte, pošlete informaci přes komunikační kanály uvedené v předchozím nebo následujícím odstavci.
Diskuze k článku není k dispozici. Pokud ale máte k tématu článku podněty, připomínky nebo dotazy, je možné je sdělit ve skupině na Facebooku, kde se k nim vyjádří nejen autor, ale případně i další diskutující.