Návod pro srovnání výšek náhledů
Velmi často se na webech setkáváme s tím, že se vám nepodaří vyrovnat náhledové obrázky ve sloupcích nebo boxech do stejné výšky. Není to závažná chyba, mnoho návštěvníků to ani neregistruje, ale pokud se dá něco vylepšit a zdokonalit, proč to neudělat. Bohužel, nemáme žádný automatický systém, který by vyrovnání velikostí udělal za vás, ale zkusíme vám v tomto návodu ukázat, že se to dá udělat ručně s běžnými nástroji v CMS. Návod sice vypadá dlouhý a složitý, ale pokud si osvojíte logiku a pochopíte jednotlivé kroky a jejich návaznost, budete jednotlivé obrázky upravovat za dvě tři minuty. S ohledem na malý počet náhledů, které budete muset na celém webu upravit, nebude určitě celková časová investice příliš vysoká.
Nejprve je potřeba uvést, proč dochází k situaci, kterou máme zde v ukázce. Je to tím, že do jednotlivých obrázků vkládáte fotografie s různými poměry stran. Pokud byste do všech tří boxů vložili obrázky se stejným poměrem stran, k problému nedojde a není potřeba dál nic dělat. Jenže fotografie mohou být focené na výšku, na šířku, můžou být čtvercové, širokoúhlé, mohou to být výřezy nebo koláže apod. Nejčastěji se fotografuje na šířku, ale i takové fotografie mohou být focené v různých poměrech stran, nejčastěji 16:9, 4:3, 3:2, nicméně nejsou výjimkou ani další. Proto ke kombinaci různých rozměrů na jedné stránce dochází velmi často.
Algoritmus náhledů v CMS pracuje s logikou, že maximální velikost fotografie je 1200x1200 pixelů. Ukážeme si to na konkrétním příkladu: červený rámeček reprezentuje maximální velikost náhledu a má 1200 x 1200 px, ale první fotografie má rozměr 2000 x 1127 px. Fotografie se tedy musí zmenšit na šířku z 2000 na 1200 px. Aby obrázek nebyl deformovaný, musí se výška zmenšit v poměru šířky k výšce z původních 1127 na 676 px. Matematicky k tomu dojdeme jednoduše tak, že šířku fotografie vydělíme výškou, tedy 2000/1127, což je zaokrouhleně 1,775 (a to je zhruba i klasický poměr 16:9). Když pak vydělíme 1200 (tedy novou šířku) tímto číslem, získáme číslo 676,2. Pixely jsou celočíselné jednotky, takže zaokrouhlujeme na 676. Není to nic jiného než trojčlenka: šířka náhledu / (šířka originálu / výška originálu) = nová výška náhledu
První a třetí obrázek jsou ve stejném poměru, ale druhý obrázek má výraznější poměr stran, proto je i mnohem užší. Nyní se můžete rozhodnout, zda zúžíte první a třetí obrázek nebo upravíte výšku jen toho prostředního, což je logičtější.
Jsou pouze dvě možnosti, jak změnit výšku obrázku při zachování jeho šířky:
- Roztažením - tím ale dojde k jeho deformaci, v tomto případě k protažení obličejů. Takže neakceptovatelná varianta.
- Výřezem – tím sice přijdeme o okraje fotografie, ale na nich většinou není to podstatné. Takže zvolíme tuto metodu.
Celý tento příklad řešíme v boxu typu „Tři boxíky“, ale je aplikovatelný na jakýkoli jiný typ boxů a šablon.
Dost teorie, pojďme si ukázat úpravu náhledu v praxi.
Co potřebujeme znát před ořezem?
Potřebujeme znát poměr stran jednoho z okolních obrázků. Tu zjistíte tak, že v archivu souborů (kam se dostanete i přímo z editace boxíků) kliknete na daný obrázek a ikonu náhledů.
V seznamu náhledů hledejte řádek s názvem „velký“. Na začátku řádku je rozměr. V tomto případě je to 1200 x 676. Abychom získali koeficient, vypočítáme 1200 / 676, což je 1,7746. Toto číslo si uložte, budeme ho potřebovat v další části.
Postup ořezu náhledu v krocích:
CMS používá pro obrázky v boxících náhled typu „velký“, který budeme teď upravovat ořezem. Proto upozorňujeme, že pokud tento obrázek v kombinaci s tímto typem náhledu používáte i jinde na webu, udělejte si nejdříve jeho kopii a upravujte až ji!
- Klikněte pro výběr obrázku:
- U vybraného obrázku klikněte na práci s náhledy:
- Na řádku s náhledem typu „velký“ Klikněte na ikonu [Oříznout]:
- Zrušte zámek poměru stran.
- Roztáhněte navrhovaný výřez fotografie na maximální výšku (od horního okraje až k dolnímu okraji).
- Zjistěte maximální výšku z dole uvedených rozměrů (zde je výška 490 px). Nyní vypočítejte šířku, tedy výška krát koeficient, viz předchozí kapitola, tj. 490 x 1,7746 = 870 px.
- Roztáhněte výběr tak, aby byla šířka 870 a výška 490 px. A samozřejmě si ještě vyberte pozici výřezu víc vlevo, na střed nebo vpravo, jak se vám to líbí.
- Klikněte na Oříznout.
Hotovo. Zde si můžete prohlédnout výsledek:
A ještě porovnání s tím, jak to vypadalo před srovnáním: