WordPress – tvorba šablony od A do Z – 12.díl – Práce s obrázky


Přicházím s dalším dílem našeho seriálu o tvorbě Wordpres šablony. Zatím jsme se zaměřovali na práci se samotným WordPressem. Jak se WordPress chová, kdy co volá, zobrazuje a jak mu předávat správně potřebné funkce a parametry. Naučili jsme se také, jak přidát příspěvkům nebo vlastním typům obsahu další parametry na úrvoni databáze. Co ale zatím náš seriál postrádá, je detailně práce s obrázky. Pojďme si tedy ukázat trochu toho, co nám WordPress nabízí.

WordPress a náhledový obrázek

WordPress nám nabízí takzvaný náhledový obrázek (thumbnail). Tato část je velmi jednoduše nastavitelná ze strany uživatele admin části. V případě, že máme podporu náhledových obrázků zapnutou, můžeme při editaci příspěvku vidět nový metabox (viz. obrázek). Tato funkce nám zajišťuje, že příspěvku, stránce nebo vlastnímu typu obsahu můžeme říct, že jeden z nahraných obrázků patří právě této stránce. náhledový-obrázek

 

K čemu všemu může náhledový obrázek sloužit?

Myslím, že běžné způsoby jako je úvodní obrázek článku, příspěvku, atd. nemusím asi zmiňovat. Mě postupem času přišla tato funkce velmi vhodná třeba pro – náhledový obrázek produktů, slideru, bannerů, reklamních spotů, atd… Využijete je všude tam, kde potřebujete říct, že tento obsah může být prezentován některým z obrázků.

Jak na práci s náhledovým obrázkem

Máme řadu funkcí, které nám s obrázky dovolí pracovat, já vám ale ukážu ty, které jsou pro nás nejdůležitější. Další pátrání bude už na vás pro dosažení mnohem větších efektů nebo programových částí.

  1. has_post_thumbnail() – funkce použitá v if podmínce, zda příspěvek má nebo nemá nějaký obrázek vybrán. (naprosto nepostradatelná funkce z důvodu čistoty kódu a vypisování chyb).
  2. the_post_thumbnail() – tato funkce nám již vypíše přímo obrázek (ne pouze src obrázku ale celý html tag) na základě předaného parametru a to hlavně v podobě velikosti. U funkce je důležité, že musí být použitá v Loopě.
  3. get_post_thumbnail() – Stejně jako předchozí funkce vrací (return) html string s img tagem. Tato funkce již nemusí být použitá v Loopě, ale lze jí předat parametr post_id, který říká, z kterého příspěvku chceme náhledový obrázek získat.
  4. get_post_thumbnail_id() – vrátí ID attachmentu, příslušného příspěvku. Funkci lze použít v loopě i mimo ni. V případě, že je použit mimo loop, předává se jí parametr post_id.
  5. wp_get_attachment_image_src() – tato funkce již vrací pouze string s url adresou obrázku. Lze předat několik parametrů, ale potřebný je attachment_id příspěvku, z kterého chcete url obrázku vrátit. Lze nastavit i velikost. Můžete použít například get_post_thumbnail_id() a v loopě máte vystaráno.

Pojďme si nyní ukázat několik kódových příkladů


<?php

//has_post_thumbnail()
if(have_post()) :
	while(have_post()) : the_post();
		if(has_post_thumbnail()){
			the_post_thumbnail('medium', array('alt' => $post->post_title)); // Zobraz obrázek o velikosti medium a jako alt dej název příspěvku
		}
	endwhile;
endif;

$nahledovy_obrazek = get_the_post_thumbnail( 1, 'large', array('alt' => 'Nějaký alt')); // vrat mi url obrázku o velikosti large u příspěvku s ID 1
echo $nahledovy_obrazek; // Vypíše html img tag s obrázkem

if(have_post()) :
	while(have_post()) : the_post();
		$id_obruzku_prispevku = get_post_thumbnail_id(); // získáme ID náhledového obrázku
	endwhile;
endif;

$url_obrazku = wp_get_attachment_image_src(10, 'thumbnail'); // vrátí url obrázku o velikosti thumbnail
echo '<img src="'. $url_obrazku .'" alt="Nějaký alt">';

?>

Zde vidíte ukázky používání výše popsaných funkcí. Nic složitého, že?

Připravené velikosti obrázků ve wordpressu

Protože potřebujeme pracovat s velikostí obrázků na webových stránkách, WordPress nám nabízí velmi užitečné řešení. Jistě víte, že byste neměli dávat na webové stránky obrázky v plné velikosti a zmenšovat je pomocí html nebo CSS. To je neefektivní a hlavně, prodlužujete načítání webových stránek.

WordPress má pro nás 4 základní velikosti obrázku, které do něj nahrajete:

  1. thumbnail – Náhledový obrázek, základní velikosti 150×150 px, přesný ořez
  2. medium – střední velikosti, základní nastavení 300x300px, bez ořezu, vždy se zmenšuje delší strana obrázku
  3. large – velká velikost, základní nastavení 1024x1024px, bez ořezu, vždy se zmenšuje delší strana obrázku
  4. orignial – bez zmenšení, bez ořezu, tak jak jste obrázek náhrali

Velikosti 1 – 3 lze nastavit v nastavení wordpressu a to v sekcie Nastavení -> média. Mnou popsané základní velikosti se také mohou postupem času měnit. Je to na vývojářích WordPressu. Starší verze měli large velikost 800x600px. V případě, že změníte velikosti tohoto nastavení, jistě zjistíte, že se nic nestalo. To proto, že musíme říct WordPressu, aby obrázky přegeneroval. Tuto část zatím WordPress vestavěnou nemá, ale velmi funkční je plugin – Regeneration thumbnail, který udělá přesně to co potřebujeme.

Vlastní velikosti a zapnutí podpory náhledového obrázku

Proto, abychom mohli náhledové obrázky ve WordPressu používat, musíme ve functions.php zavolat funkci: add_theme_support() s parametrem ‚post-thumbnail‘.


<?php

add_theme_support( 'post-thumbnails' );
add_theme_support( 'post-thumbnails', array( 'post' ) );          // pouze pro příspěvky
add_theme_support( 'post-thumbnails', array( 'page' ) );          // Pouze stránky
add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) ); // Příspěvek a vlastní typ obsahu movie

?>

Zdrojem tohoto kódu je codex.wordpress.org

Zde vidíte, jak lze jednoduše kontrolovat, které typy obsahu budou mít náhledový obrázek a které ne.

Pokud nám ale nestačí několik základních velikostí a nechcete je měnit a používat je, máte možnost založit si novou velikost obrázku. WordPress tak bude generovat další velikost obrázku, kterou lze volat. K tomu slouží funkce: add_image_size()


<?php

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'category-thumb', 300, 9999 ); //300 pixelů šířka (a neomezená výška)
	add_image_size( 'homepage-thumb', 220, 180, true ); //(pevný ořez)
}

?>

Zdrojem tohoto kódu je codex.wordpress.org

Zde můžete vidět, jak velmi jednoduše založit novou velikost. Velmi důležitý je poslední parametr $crop, který říká, zda má WordPress oříznout obrázek na přesně definovanou velikost. To je velmi užitečné, pokud potřebujete vždy přesný rozměr obrázku bez ohledu na to, jak se WordPress s ořezem popere.

Závěrem dílu

Dnes jsme si ukázali, jak velmi jednoduše a efektivně pracovat s obrázky. S obrázky se toho dá dělat ale mnohem více, ale to už nechám na vás a vaší touze udělat ze svých webových stránek nebo blogu lepší prostředí. Zkuste si třeba udělat vlastní fotogalerii ze všech obrázků, které jsou u příspěvku nahrány. Nemusíte pak neustále vyklikávat WordPress galerii, když chcete zobrazit vždy všechny obrázky, které k příspěvku nahrajete. A zároveň nemusíte používat nějaký plugin, který Vám dává na web reklamu nebo nedělá přesně to, co vy sami chcete.

Tomáš Kocifaj, KTStudio.cz

, , ,

  1. #1 dakarin 3.2.2014 - 09:22

    Návod je přehledný, pouze by to možná chtělo vždy jednu konkrétní ukázku aplikace – nejlépe na souborech prostředí z předchozích dílů ;-)
    jinak díky za seriál,

    Jirka ze Znojma

    • #2 Tomáš Kocifaj 3.2.2014 - 09:38

      Zdravím, díky za námět. Tento seriál budu brzo ukončovat – ještě dva díly. Následně mám pak připraveny další seriály z vývoje WordPressu, tak se případně poučím a soubory začnu přikládat. Díky za feedback a hodně zdaru s WordPressem :-)

  2. #3 SEID 27.5.2014 - 20:02

    Dobry den, ocenil by som navod ako vlozit do hlavicky nielen logo, menu ape aj slider kde si mozeme zvolit napriklad nejaku rubriku stiskom na obrazok, ako nieco take docielit? :-) dakujem

    ps super serial

    • #4 Tomáš Kocifaj 28.5.2014 - 05:34

      Zdravím, vytvořit slider pro rubriky a následně ještě s obrázky už není nic tak jednoduchého. WordPress jako takový nemá možnost přiřadit rubrikám obrázek ani pro ně nemá žádnou extra tabulku, kde by se jim dalo parametry rozšířit. Zde už to bohužel není moc o WordPressu ale o PhP. Slider pak už zase pouze o Javascriptu. Možná bych kouknul po pluginu, něco takového by mohlo být už někde hotové

  3. #5 SEID 28.5.2014 - 10:46

    Nejakym pluginom by to urcite , ale ako umistnit plugin do hlavicky? :-(
    alebo.aspon nad sider a blok s obsahom? Aby to bolo na celu sirku?

    • #6 Tomáš Kocifaj 23.7.2014 - 07:55

      To co popisuješ určitě bude – pluginy ale moc nepoužíváme, jen pár základních. Určitě jsem už viděl pluginy, které pro kategorie mají možnost udělat obrázky. Viděl bych to tak, použít plugin na přiřazení obrázku a pak udělat v PhP nějakou foreach, který kategorie proiteruje, obrázky vytáhne a pak to napojit na nějaké jQuery řešení, které z toho udělá slider. Ale z hlavy nějaký hotový nástroj nebo plugin bohužel neznám.

  4. #7 Juraj 1.10.2014 - 15:24

    Prosím vás, našiel by sa nejaký podobný spôsob na pridávanie videa?

    • #8 Tomáš Kocifaj 2.10.2014 - 07:12

      Zdravím, na videa je spoustu nástrojů a bude určitě i řada pluginů. Nejideálnější je použít zdroj YTB – poté si s tím už WordPress umí poradit sám jen tím, že přetáhneš URL adresu videa přímo do WP Editoru – od verze 4.0

    • #9 Dominika 22.4.2015 - 19:21

      Ja pridávama videa tak že pod youtube videom je kolonka zdieľať potom kliknete na vložiť a zobrazí sa vám html kód s youtube videom, kde si môžete aj nastaviť veľkosť videa a tento kod potom vložite do editoru vo wordpresse.

Komentáře jsou uzavřeny.