Obrázky a galerie ve WordPress

V našem dalším článku o redakčním systému WordPress se zaměříme na práci s médii, a to konkrétně na nahrávání obrázků na web a vkládání do příspěvků. Dále se zaměříme na užití náhledových obrázků a také na dva pluginy pro tvorbu galerie a optimalizaci obrázků.

Do WordPress médií můžete nahrávat kromě obrázků (jpg, jpeg, png, gif) také  dokumenty, video a audio soubory. Konkrétní povolené typy souboru, které lze nahrát do WordPress najdete ve WordPress kodexu. Video soubory v dnešní době spíše nahrajeme na YouTube a následně do stránek vložíte pouze kód z YouTube, který umožní pustit video na vašem webu. Podobně je to s audio soubory. Dokumenty můžete sice nahrát do WordPress, ale nelze je zobrazit přímo v článku, pokud nepoužijete opět nějakou službu třetí strany, jako je SlideShare. Proto, když se bavíme o médiích ve WordPress, většinou se to týká obrázků.

Jak pracovat s WordPress
Série článků základy práce s WordPress

Nahrávání obrázků

Obrázky se spravují v administraci v sekci Média, ale nahrát obrázek můžete přímo ze stránky, kde píšete nový příspěvek. Obrázky (a jiná média) se v sekci Média nahrávají pomocí tlačítka Nahrát soubory vedle nadpisu Knihovna médií. Nahrávat můžete i několik souborů najednou, jako je tomu na obrázku. Pokud nahrajete obrázky přímo do Knihovny médií, obrázky potom můžete do příspěvku vložit později přímo ze stránky, kde píšete příspěvek.

Na obrázku vidíte Média se zobrazenou možností nahrávání a 3 položky, které jsou na web právě nahrávány.
Na obrázku vidíte Média se zobrazenou možností nahrávání a 3 položky, které jsou na web právě nahrávány.

Knihovna médií

Nahrané obrázky vidíte v seznamu ihned, případně si je můžete kdykoli zobrazit kliknutím na Média. Pokud jste nahráli více druhů souborů, můžete si obrázky vyfiltrovat (rolovací menu Všechny mediální soubory > Obrázky). Zvolit si můžete ze dvou druhů zobrazení mřížky nebo seznamu, níže vidíte příklad zobrazení obou módů.

Úprava obrázku v Knihovně médií

Každý obrázek si můžete prohlédnout zvlášť a upravit jeho popisky:

  • název = jméno souboru zobrazený např. na stránce souboru (je ukázáno níže);
  • alternativní název = popisek zejména pro vyhledávače;
  • titulek = text zobrazovaný přímo u obrázku v příspěvku.

Stránka s úpravou obrázku vypadá trochu jinak, podle toho jestli máte nastaven typ zobrazení seznam nebo mřížka. Níže vidíte obě možnosti, jak stránka s úpravou obrázku vypadá.

Obrázky v článcích

Základy práce s obrázky v rámci psaní článku (vložení obrázku do článku, náhledový obrázek) jsme si popsali v předchozím příspěvku vše o psaní příspěvku ve WordPress. Nyní se podíváme podrobněji na práci s obrázky.

Vkládání obrázků z příspěvku

S médii ve článcích (a rovněž i na stránkách) se pracuje pomocí tlačítka Mediální soubory pod názvem příspěvku. Knihovna médií v článcích zobrazuje všechny nahrané soubory, které je možné filtrovat podle typu nebo podle měsíce nahrání. Při kliknutí na každý jednotlivý obrázek se vám zobrazí popisky (více v článku o psaní příspěvku) a možnosti vložení.

Tip: Více obrázků volíte pomocí CTRL. Je však třeba upravit každý zvlášť.

Zarovnání, velikost a odkaz obrázku

Nahraný obrázek můžete upravit pomocí zarovnání a velikosti obrázku tak, jak potřebujete v příspěvku či na dané stránce. Obrázek navíc může vyvolat akci. Pokud na obrázek kliknete, podívejte se na možnosti úpravy obrázku:

Zarovnání – zarovnání obrázku umožňuje nastavit obtékání obrázku textem (vpravo, vlevo), nebo zarovnání na střed, případně nastavit žádné a obrázek se zobrazí na novém řádku vlevo bez obtékání.

Odkaz obrázku – u obrázku nastavujete, co se má stát, pokud čtenář klikne na obrázek. Můžete nastavit následující:

  • Žádné – nic se nestane
  • Mediální soubor – zobrazí se obrázek ve větší velikosti s černým pozadím
  • Stránka se souborem – prokliknete se na stránku webu, kde bude zobrazený obrázek
  • Vlastní – zde můžete vložit jakoukoli URL adresu, na kterou chcete čtenáře po kliknutí přesměrovat.

Velikost obrázku – poté co nahrajete obrázek do knihovny médií, WordPress automaticky vytvoří (zmenšením) tři další velikosti toho samého obrázku pro další možná využití. Tyto níže vyjmenované velikosti si můžete individuálně změnit v Administraci > Nastavení > Média. Po nahrání jednoho obrázku vzniknou tedy čtyři verze obrázku:

  • Velikost náhledu – zmenší obrázek na 150 x 150px, využívá se často pro náhledové obrázky a galerie obrázků. Tato velikost obrázek zmenší a často navíc ještě ořízne.
  • Střední velikost – zmenší obrázek na 300 x 300px, využívá se často v článku pokud chcete, aby obrázek obtékal text. Toto se také používá do galerie, kde je vidět větší detail než základní velikosti
  • Velký obrázek – zmenší obrázek na 1024 x 1024px, hodí se, pokud nahráváte větší obrázek, WordPress za vás obrázek zmenší a provede mírnou kompresi na 80% původní kvality. Díky tomu má obrázek menší velikost a načítá se rychleji
  • Originál – tohle je vámi nahraný obrázek a jeho původní velikost
wordpress-clanek-s-obrazky
Příklady velikostí obrázků a jejich zarovnání

Pokročilé úpravy obrázku v administraci WordPress

WordPress umí i „pokročilejší“ úpravy obrázků, jako jsou změna obrázku na individuální velikost, oříznutí, otočení nebo převrácení obrázku. Navíc si můžete zvolit, jestli chcete upravit: Všechny velikosti obrázku, Náhled nebo Všechny velikosti obrázku kromě náhledu. Na toto nastavení se dostanete jak z knihovny médií, tak i z editace příspěvku, kde kliknete na obrázek > pak upravit (symbol tužky) > Upravit původní obrázek.

wordpress-pokrocila-editace-obrazku

Vložení obrázku z internetu

WordPress samozřejmě umožňuje i vkládání obrázků z URL adresy, tedy z jiného webu. Zde je třeba dát si pozor na právní stránku věci. Tedy zda tím neporušujete něčí autorská práva. Obrázek lze přidat přes URL ve vizuálním editoru přes Knihovnu médií, v HTML editoru přes ikonku img. V prvním případě se doplní původní velikost obrázku, v tom druhém nikoli. Ani v jednom případě není možné rozměry obrázku během vkládání upravit, to lze až v HTML editoru ručně.

Vkládání obrázku přes URL za pomoci vizuálního editoru
Vkládání obrázku přes URL za pomoci vizuálního editoru

Tvorba galerie

Pokud potřebujete vložit více jak jeden obrázek vedle sebe, pomůže vám galerie obrázků.  Galerii vytvoříte pomocí knihovny médií, kam nahrajete více obrázků, případně označíte již nahrané a kliknete na: vytvořit galerii (viz obrázek níže). V následujícím kroku můžete obrázky popsat, vyberete velikost obrázků, počet sloupců (obrázků vedle sebe), pořadí zobrazení a další nastavení galerie. Nakonec kliknete vlevo dole na vytvořit galerii.

 

wordpress-galerie-vytvoreni

Plugin na tvorbu galerií

Jelikož toho základní galerie WordPress moc neumí, někdy budete potřebovat plugin. Pluginy často pomáhají s

  1. Tříděním obrázků do složek
  2. Kategorizací obrázků
  3. Lepší zobrazení obrázků a galerií v příspěvku

wordpress-nextgen-gallery

Pro tvorbu dokonalejší galerie si můžete vybrat z mnoha pluginů, zmíním zde několik pluginů, s kterými jsem pracoval:

  • Velmi oblíbený NextGen Gallery. Tento plugin umožňuje tvorbu pěkných moderních galerií i ve free verzi. Jeho drobnou nevýhodou je pouze to, že je ze začátku poměrně složitý na orientaci
  • Pokud využíváte Jetpack, zkuste rozšíření Tiled Galleries, které je součástí pluginu
  • Jednoduchý Galleries by Angie Makes  rozšíří možnosti nastavení galerie.

Náhledový obrázek

Náhledové obrázky ilustrují publikované příspěvky na vašem webu. Zobrazení náhledových obrázků na vašich stránkách závisí na tvůrci šablony.  Mohou se zobrazovat v článku samotném, ve výpisu článků nebo na obou místech v závislosti na použité šabloně. Často se takový obrázek zobrazuje nad nadpisem nebo vlevo. Některé šablony náhledové obrázky nezobrazují vůbec.

Náhledový obrázek připojíte k článku na stránce s editací příspěvku v pravém sloupci, nebo v knihovně médií vlevo nahoře za pomocí odkazu náhledový článek.

wordpress-clanek-nahledovy-obrazek
Výběr náhledového obrázku

Povšimněte si, že se u tohoto typu obrázků nevybírá z různých velikostí. Šablony zpravidla počítají s tím, že náhledové obrázky nahráváte ve vhodné velikosti. V dokumentaci každé šablony, která s náhledovými obrázky pracuje, by měly být uvedeny doporučené rozměry.

Komprese obrázků

Velikost obrázků má velký vliv na rychlé načtení stránek. Rychlost načtení stránek ovlivníte velikostí vloženého obrázku do příspěvku, už jsme si výše vysvětlili, že WordPress automaticky vytvoří další tři velikosti vámi nahraného obrázku. Výběrem menšího obrázku (byť jen o trochu) zvýšíte rychlost načtení stránek. Na rychlost načtení stránek v souvislosti s obrázky má vliv ještě komprese obrázků, jinak řečeno – snížení kvality obrázku. Zde WordPress automaticky komprimuje obrázek na 82% původní kvality, což by nemělo být znát lidským okem.

Zde můžeme kompresi obrázku ještě zvýšit a snížit tak velikost souboru obrázku a tím i zrychlit načítání stránek. Existují na to pluginy, které obrázek proženou přes své servery a komprimují velikost obrázku. Zde jsou dva typy komprese a to bezztrátová a ztrátová. U ztrátové komprese bude trochu znát snížení kvality obrázku, ale většinou se o hodně sníží velikost souboru.

Zde Vám doporučím šikovný pluginu na kompresi obrázků – Compress JPEG & PNG images.

Jwordpress plugin Compress jpeg a png imagesak jeho název napovídá, tento plugin vám pomůže zrychlit vaši stránku tím, že optimalizuje velikost obrázků. Děje se tak za pomoci služeb TinyJPG a TinyPNG, a to jak nově nahrávaných, tak již nahraných obrázků v knihovně médií. Dále umožňuje hromadné úpravy, nastavení maximálních rozměrů, zachování metadat (vlastnická práva, datum vytvoření, GPS souřadnice), kompresi animovaných PNG souborů a další. Každý měsíc můžete zdarma komprimovat 500 obrázků. Nezapomeňte na to, že jeden nahraný obrázek jsou vlastně čtyři obrázky často i více (pokud šablona vyžaduje více tvarů a velikostí).

Napsat komentář