Jak vytvořit vlastní velikosti obrázků a jejich ořezů ve WordPressu?

WordPress ve své základní instalaci generuje náhledové obrázky v přednastavených velikostech a podle nastavení v šabloně, což pro některé situace nemusí být dostačující. Pokud na webu pravidelně využíváte obrázky v určitých rozměrech, je lepší jejich generování automatizovat a vyhnout se tak zdlouhavému ořezu v editoru na PC. Jak postupovat, pokud chcete automatizovat generování ořezů a náhledů jednotlivých obrázků?
 

Redakční systém WordPress v základním nastavení generuje náhledy a ořezy obrázků pouze v následujících rozměrech:

  • Náhled (150 px, čtvercový ořez);
  • Střední velikost (maximálně 300 px na šířku i výšku);
  • Velký obrázek (maximálně 1024 px na šířku i výšku);
  • Původní obrázek (původní rozměry).

nastaveni

Jak si lze všimnout, výběr není zrovna veliký. Níže si ukážeme, jak přidat vlastní ořezy a velikosti obrázků bez nutnosti upravovat zdrojový kód stránek.

Proč je důležité generovat náhledy obrázků v různých velikostech? Pokud byste všude využívali původní rozměry obrázku, který jste nahráli (řekněme např. 1920×1080 pixelů), znamenalo by to, že i na místě, kde se obrázek zobrazí na ploše 640×360, bude na pozadí načítán původní velký rozměr. Až po načtení totiž prohlížeč obrázek pro návštěvníka zmenší. Stránka a její načítání je tak zbytečně pomalejší, uživatel zbytečně stáhl více dat a dochází k vyšší zátěži serveru. Toho si může všimnout nejen návštěvník webu, ale i vyhledávače, které již nějakou dobu pomalé weby penalizují horšími pozicemi ve vyhledávání.

  • Simple Image Sizes – přidání vlastních rozměrů obrázků během několika kliknutí

Bezplatný plugin Simple Image Sizes je elegantním řešením, jak vytvořit vlastní velikosti obrázků a ořezů. Vedle jejich vytvoření nabízí přehledné nastavení toho, jaké vygenerované rozměry uživatel uvidí v editoru, i které slouží pouze pro využití v šabloně stránky.

simpleimage

Při instalaci a nastavení pluginu postupujte následovně:

  1. Přejděte do administrace stránek využívajících redakční systém WordPress a zvolte „Pluginy“> „Instalace Pluginů“.
  2. Vyhledejte „Simple Image Sizes“.
  3. Zvolte „Instalovat“ a plugin obratem aktivujte kliknutím na tlačítko „Aktivovat“.
  4. Přejděte do „Nastavení“ > „Média“, kde se vám zobrazí přehled definovaných velikostí obrázků.
  5. Sjeďte níže a klikněte na nenápadné tlačítko „Add a new size of thumbnail“ sloužící pro přidání nové velikosti náhledu. dvaobrazky
  6. Po kliknutí zvolte název a potvrďte jej kliknutím na „Validate image size name“.
  7. Ve výpisu přibude nový řádek se zvoleným názvem. Nyní můžete zvolit šířku (width) a výšku (height) podle toho, jak vám to vyhovuje. Okénko „Public name“ slouží k volbě názvu, který následně uvidíte v editoru.vzhled
  8. Velmi důležitou položkou je „Crop“ neboli ořez. Ten definuje, jak se bude v případě výřezu obrázek ořezávat, tedy odkud bude uříznuto a co bude zachováno. Nejčastější volbou je „Center center“ značící vyříznutí středu obrázku. Záleží však čistě na vás, jaký ořez zvolíte. Pokud např. víte, že se důležitá část obrázku ve vašem případě pravidelně nachází v jeho pravém dolním rohu, zvolíte „Right bottom“.
  9. Poslední volbou je, zda se bude nová velikost zobrazovat v editoru, tedy pokud ji budete vkládat do stránek a článků. V našem případě jsme položku zaškrtnuli a můžeme kliknout na finální tlačítko „Validate“. voice
  10. Nyní stačí nahrát nový obrázek a v editoru byste již měli vidět možnost vložit jej v novém rozměru. U starších obrázků tato volba zatím nebude. Jak to napravit si ukážeme níže.

Na obrázku můžete vidět, že k původní čtveřici velikostí obrázků přibyla čtveřice dalších, které lépe zapadají do obsahu a odpovídají šabloně webu.

  • Jak zpětně vygenerovat ořezy obrázků?

Po vytvoření nové velikosti obrázků a jejich ořezů si lze v editoru všimnout, že mediální soubory nahrané před vytvořením rozměru nelze do článku či stránky vložit v nové velikosti. Důvodem je, že k vygenerování všech rozměrů a ořezů obrázků dochází v okamžiku jejich nahrání. I na to však tvůrci pluginu mysleli a zahrnuli proto funkci zpětného vygenerování náhledů „Thumbnail regeneration“.

Nalézt ji lze na stejné stránce jako nastavení rozměrů velikostí obrázků v menu „Nastavení“ > “Média“. V dolní části stránky lze zaškrtnutím vybrat, které rozměry obrázků se mají zpětně vygenerovat. Jako první věc doporučujeme zrušit zaškrtnutí všech rozměrů kliknutím na první box. Následně stačí vybrat nově přidané rozměry vytvořené v úvodu a kliknout na tlačítko „Regenerate Thumbnails“.

regenerate

Proběhne výpočet doby potřebné k vygenerování nových náhledů a poté už jen stačí vyčkat, až se vše dokončí. Po úspěšném vygenerování náhledů již v editoru přibude možnost vložit nový rozměr u všech obrázků, tedy i u těch nahraných před vytvořením vlastního rozměru náhledu.

Hodnocení článku

Průměrné hodnocení: 4.5/5

Počet hlasů: 148