Ako vytvoriť ďalšie veľkosti obrázkov v

Minulý mesiac sa v skripte na zmenu veľkosti obrázka známom ako TimThumb objavila veľká zraniteľnosť. Odvtedy komunita tieto problémy spolupracovala a opravila. Aj keď TimThumb je realizovateľnou možnosťou, veríme, že vývojári tém WordPress by sa mali zamerať skôr na používanie základných funkcií než na spoliehanie sa na skripty tretích strán. V tomto článku vám ukážeme, ako pridať ďalšie veľkosti obrázkov v programe WordPress.


WordPress má vstavanú funkciu Post Thumbnails aka Featured Images. K dispozícii je tiež vstavaná funkcia add_image_size (), ktorá vám umožňuje určiť veľkosť obrázka a dá vám možnosť orezania. Použitie týchto základných funkcií vo vašej téme môže vo väčšine prípadov eliminovať potrebu skriptu tretej strany, ako je TimThumb.

Registrácia ďalších veľkostí obrázkov pre vaše tému

Budete musieť začať pridaním podpory miniatúr príspevkov vložením nasledujúceho kódu do súboru function.php vášho motívu:

add_theme_support (‘post-miniatúry’);

Po povolení podpory pre miniatúry príspevkov môžete teraz používať funkciu registrácie ďalších veľkostí obrázkov pomocou funkcie add_image_size (). Použitie funkcie add_image_size je takéto: add_image_size (‘meno-veľkosť’, šírka, výška, režim orezania);

Príklad kódu môže vyzerať takto:

add_image_size (‘sidebar-thumb’, 120, 120, true); // Režim tvrdého orezania
add_image_size (‘homepage-thumb’, 220, 180); // Režim mäkkých plodín
add_image_size (‘singlepost-thumb’, 590, 9999); // Neobmedzený výškový režim

Ak si to teraz všimnete, určili sme tri rôzne veľkosti obrázkov. Každý z nich má rôzne režimy, ako je tvrdá plodina, mäkká plodina a neobmedzená výška. Tak si ukážeme každý príklad a ako ich môžete použiť vo svoj prospech.

Režim tvrdého orezania – Ako si všimnete, za výšku sa pridá hodnota „true“. Táto skutočná hodnota hovorí systému WordPress, aby obrázok orezal na veľkosť, ktorú sme definovali (v tomto prípade 120 x 120 pixlov). Toto je metóda, ktorú v našich tematických návrhoch často používame, aby sme sa ubezpečili, že je všetko primerané a náš návrh sa nezlomí. Táto funkcia automaticky oreže obrázok zo strán alebo zhora a zdola v závislosti od veľkosti. Nevýhodou tvrdého orezania je to, že nemôžete určiť, ktorá časť obrázka sa zobrazí.

Oprava od Mike Little – Keď ste nahrali obrázok a predtým, ako vložíte príspevok, môžete kliknúť na ‘upraviť obrázok’ a odtiaľ zmeniť miniatúru alebo celý obrázok, zmeniť mierku, otočiť alebo prevrátiť obrázok a pre miniatúru vyberte presnú časť obrázka, ktorý chcete.

Režim mäkkých plodín – V predvolenom nastavení je režim mäkkého orezania zapnutý, preto sa po výške nezobrazuje žiadna pridaná hodnota. Táto metóda proporcionálne zmení veľkosť obrázka bez jeho skreslenia. Možno nebudete mať požadované rozmery. Zvyčajne sa zhoduje s rozmerom šírky a výšky sa líšia v závislosti od proporcie každého obrázka. Príklad zobrazenia by mohol vyzerať takto:

Príklad mäkkých plodín

Neobmedzený výškový režim – Sú chvíle, keď máte veľmi dlhé obrázky, ktoré chcete použiť pri návrhu, ale chcete zabezpečiť, aby bola šírka obmedzená. Hlavné použitie, ktoré nájdeme pre tento druh veľkosti obrázka, je na infographic príspevkoch. Infografika býva veľmi dlhá a plná informácií. Tvrdé orezanie takéhoto obrázka na jednej stránke s príspevkom nie je dobrý nápad. Ale od prírody sú infografiky širšie ako šírka obsahu. Čo môžete urobiť, je špecifikovať šírku, ktorá nezlomí váš dizajn a zároveň ponechá výšku neobmedzenú, takže všetky infographic môžu byť zobrazené bez skreslenia. Príklad zobrazenia by mohol vyzerať takto:

Príklad režimu neobmedzeného výšky

Zobrazenie ďalších veľkostí obrázkov v téme WordPress

Teraz, keď ste pridali funkcie pre požadované veľkosti obrázkov, sa môžete pozrieť na ich zobrazenie v téme WordPress. Otvorte súbor s témou, kde chcete zobraziť obrázok, a prilepte nasledujúci kód:

<?php the_post_thumbnail (‘vaša-zadaná-image-size’); ?>

Poznámka: Tento kúsok kódu sa musí vložiť do poštovej slučky.

To je všetko, čo musíte urobiť, aby sa v téme WordPress zobrazili ďalšie veľkosti obrázkov. Pravdepodobne by ste to mali zabaliť do štýlu, ktorý vyhovuje vašim potrebám.

Regenerácia ďalších veľkostí obrázkov

Ak to nerobíte na úplne nových stránkach, pravdepodobne budete musieť vygenerovať miniatúry. Spôsob fungovania funkcie add_image_size () je taký, že generuje veľkosti iba od bodu, ktorý bol pridaný do témy. Takže žiadne obrázky, ktoré boli pridané pred zahrnutím tejto funkcie, nebudú mať novú veľkosť. Musíme teda znovu vygenerovať novú veľkosť obrázka pre staršie obrázky. Uľahčí to doplnok s názvom Regenerovať miniatúry. Po inštalácii a aktivácii tohto doplnku sa do ponuky pridá nová možnosť: Nástroje »Obnoviť. náhľady

Znova vygenerujte obrazovku doplnku miniatúry

Kliknite na ikonu Regenerovať miniatúru a nechajte doplnok, aby vykonal svoju prácu.

Ďalším doplnkom, ktorý dokáže túto úlohu, sú Simple Image Sizes.

Povolenie ďalších veľkostí obrázkov pre váš príspevok

Aj keď ste vo svojom motíve povolili veľkosť obrázkov, použitie je obmedzené iba na tému, ktorá nedáva zmysel. Všetky veľkosti obrázkov sa generujú bez ohľadu na to, tak prečo nesprístupniť autorovi príspevku, aby ho použil v obsahu príspevku. Môžete to urobiť pomocou doplnku s názvom Simple Image Sizes.

Po inštalácii a aktivácii tohto doplnku sa na stránku Nastavenia »Médiá pridajú nové možnosti. Uvidíte zoznam veľkostí, ktoré ste definovali vo svojom motíve. Všetko, čo musíte urobiť, je začiarknuť políčko „Zobraziť po vložení“.

Dodatočné vloženie pre ďalšie veľkosti obrázkov

Po začiarknutí tohto políčka budú mať autor k dispozícii ďalšie veľkosti, ktoré bude môcť použiť v obsahu príspevku.

Ďalšie veľkosti obrázkov pre príspevky

Všimnite si na obrázku vyššie, máme všetky veľkosti obrázkov, ktoré sme v našej téme definovali, aby sme ich mohli autori použiť v obsahu príspevku, ak si to želajú..

Plugin Simple Image Sizes vám tiež umožňuje vytvárať vlastné veľkosti obrázkov priamo z ovládacieho panela WordPress.

Veríme, že táto metóda by sa mala pridať podľa osvedčených postupov pre všetkých vývojárov tém WordPress. Co si o tom myslis?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me