Wordpress

Jak vytvořit dynamické galerie obrázků WordPress a posuvníky s bloky sady nástrojů

Hledáte flexibilnější způsob práce s obrázky v novém editoru bloků WordPress?

V tomto příspěvku vám ukážeme, jak můžete použít bloky sady nástrojů k vytvoření vlastních posuvníků a galerií statických nebo dynamických obrázků v editoru bloků.

Pokud sadu nástrojů neznáte, je to sada nástrojů, které vám pomohou pracovat s vlastním obsahem a dynamickými weby WordPress.

Může vám pomoci přidávat a zobrazovat vlastní typy příspěvků, vlastní pole a další. A s bloky sady nástrojů to vše můžete udělat pomocí nativního editoru bloků WordPress.

Čtenáři WP Mayor mohou získat exkluzivní 20% slevu při nákupu sady nástrojů.

Níže se zaměříme na jednu konkrétní část bloků sady nástrojů – obrázky.

Pokračujte ve čtení, abyste se dozvěděli, jak to funguje a jak vám může pomoci vytvořit lepší weby WordPress.

Jak bloky sady nástrojů pomáhají s obrázky WordPress?

Toolset Blocks vám pomůže zobrazit obsah vašeho webu WordPress pomocí nativního editoru bloků WordPress – není potřeba žádný kód.

O blocích sady nástrojů jsme dříve psali zde.

Možná si říkáte: „Coline, editor bloků ti už umožňuje zobrazovat obsah – to je celý smysl!“.

Rozdíl s bloky sady nástrojů je v tom, že vám také pomáhá zobrazovat vlastní obsah, jako jsou vlastní pole a taxonomie, které jste přidali pomocí sady nástrojů. Můžete dokonce použít editor bloků k návrhu šablon pro jakékoli vlastní typy příspěvků, které jste vytvořili.

Trochu jsem ale odbočil od cesty, protože tento příspěvek je o obrázcích.

S Toolset Blocks v. 1.3 získáte přístup ke dvěma blokům zaměřeným na obraz:

  • Galerie – vytvářet mřížkové, zděné nebo kolážové galerie.
  • Image Slider – vytvářejte posuvníky a karusely s různými rozvrženími, titulky a dalšími.

Oba tyto bloky vám umožňují vytvářet galerie nebo posuvníky ze statické sady obrázků spolu se spoustou možností pro ovládání stylu a rozvržení vašich galerií/posuvníků.

Kde jsou však tyto bloky užitečnější a kde se odlišují od ostatních pluginů galerií a posuvných bloků, je to, že můžete také dynamicky vkládat obrázky do svých galerií a posuvníků odkudkoli na vašem webu.

Obrázky můžete nahrát pomocí vlastního pole, které jste přidali pomocí sady nástrojů, a poté tyto obrázky automaticky vložit do galerie. Můžete dokonce vytvořit šablonu pro vlastní typ příspěvku, který jste přidali, a poté automaticky vyplnit galerii tímto způsobem.

Například na webu s nemovitostmi můžete vytvořit vlastní typ příspěvku „Dům“ s polem pro opakování obrázků a nahrát obrázky interiéru každého domu. Poté můžete tyto obrázky použít k dynamickému naplnění galerie, která se objeví jako součást nabídky každého domu.

V pohodě, že? V další části vám ukážu, jak to funguje.

Jak používat sadu nástrojů Obrazové bloky se statickým obsahem

Nyní vám krok za krokem ukážu, jak používat novou galerii sady nástrojů a posuvné bloky.

U každého bloku začnu tím, že vám ukážu, jak jej používat se statickou sadou obrázků. To vám dá dobrou představu o schopnostech každého bloku.

V další části vám pak ukážu, jak funguje dynamické naplňování galerií a posuvníků.

Blokovat galerii

Když vložíte nový Galerie bloku, budete si moci vybrat ze tří různých rozvržení:

  1. Mřížka
  2. Zdivo
  3. Koláž
Rozvržení galerie

Jakmile si vyberete rozvržení, budete moci přidávat obrázky:

  • Nahrávání nových obrázků
  • Výběr existujících obrázků z knihovny médií
  • Dynamicky je vyplňovat z vlastních polí přidaných do tohoto příspěvku (nebo jakéhokoli jiného příspěvku)

Uložím dynamický obsah pro další sekci, takže nahrajte nějaké nové obrázky pro tento příklad:

Zdroje obrázků

A voila – máte galerii. Poté můžete použít postranní panel bloku vpravo ke konfiguraci:

  • Styly pro vaše rozvržení, například kolik sloupců použít v mřížce nebo galerii zdiva.
  • Popisky ke každému obrázku.
  • Zda otevírat obrázky v lightboxu.
Příklad galerie zdiva

Rozvržení mřížky a zdiva jsou docela samozřejmé, ale rozvržení koláže obsahuje úhlednou funkci, která vám umožní vybrat si z předem připravených rozvržení koláže nebo si navrhnout vlastní:

Rozvržení koláže

Pokud si navrhnete vlastní rozvržení, můžete pomocí mřížkového systému nakonfigurovat velikost a umístění každé položky galerie, což je opravdu skvělé:

Vlastní koláž
Software: Snipaste

Blok posuvníku obrázku

Blok Image Slider funguje podobně jako blok Galerie. 

Když vytvoříte nový posuvník obrázku, budete si moci vybrat ze stejných tří zdrojů:

  • Nahrát
  • Knihovna médií
  • Dynamické zdroje

Poté můžete pomocí možností na straně:

  • Změňte počet sloupců. Jeden sloupec by byl tradiční posuvník, zatímco můžete vytvořit karusely přidáním více sloupců.
  • Vyberte různé styly posuvníku.
  • Styly ovládání.
Příklad jezdce obrázku

Nyní, když znáte základy, pojďme se pustit do pokročilejšího použití těchto dvou widgetů a ukážu vám, jak můžete dynamicky plnit své galerie a posuvníky.

Jak používat sadu nástrojů Obrazové bloky s dynamickým obsahem

Zatímco nové bloky sady nástrojů jsou užitečné se statickými obrázky, existuje již spousta bloků, které vám mohou pomoci vytvořit statické galerie a obrázky.

Kde jsou nové obrazové bloky Toolset skutečně výkonné (a jedinečné), je dynamický obsah.

Obsah galerie nebo posuvníku můžete dynamicky naplnit obrázky z vlastního pole Obrázek, které jste přidali pomocí sady nástrojů. Můžete také použít a opakování pole obrázku, které vám umožní přidat do vlastního pole tolik obrázků, kolik potřebujete.

Jak by to tedy mohlo fungovat v praxi?

Aby byl tento příklad trochu konkrétnější, použil jsem sadu nástrojů k vytvoření vlastního typu příspěvku „Dům“. Potom jsem přidal opakující se obrázkové pole, kam mohu nahrát fotografie interiéru tohoto domu.

Zde je příklad toho, jak vypadá běžné opakující se pole obrázku, když vytvořím nový „dům“:

Příklad vlastního pole
Software: Snipaste

Nyní vám ukážu, jak tyto obrázky dynamicky stáhnout do galerie nebo posuvníku.

Galerie

Když přidáte blok Galerie, stále si budete moci vybrat své vlastní rozvržení a použít všechna ostatní nastavení, která jsem vám ukázal dříve.

Až teď, když uvidíte výzvu k přidání obrázků, si vyberete Dynamické zdroje:

Dynamické zdroje

Poté si jako zdroj budete moci vybrat vlastní pole opakujícího se obrázku:

Vyberte vlastní pole

Jakmile tento zdroj vyberete, uvidíte náhled své galerie pomocí obrázků z vlastního pole, které jsem vám ukázal dříve:

Dynamická galerie

Pokud byste přidali nebo odstranili obrázky z tohoto vlastního pole, tyto změny by se automaticky vztahovaly na vaši galerii.

Image Slider

Úplně stejný přístup můžete použít pro posuvníky obrázků.

Když přidáte nový blok Image Slider, můžete si vybrat Dynamické zdroje pro vaše obrázky a poté vyberte opakující se pole obrázku, jak jsem vám ukázal s blokem Galerie:

Dynamický posuvník

Vyzkoušejte sadu nástrojů

Spojili jsme se s týmem za Toolset, tvůrcem stránek, který vám umožňuje vytvářet weby WordPress bez kódování, abychom vám nabídli exkluzivní 20% slevu.

20% sleva

Dynamický obsah můžete použít i v jiných příspěvcích/stránkách

Kromě dynamického vkládání obrázků pro příspěvek, se kterým právě pracujete, můžete také dynamicky naplnit galerii nebo posuvník jinde na vašem webu.

Řekněme například, že píšete příspěvek na blog, kde chcete uvádět obrázky domu, který jste právě přidali do vlastního typu příspěvku Dům.

Chcete-li začít, přidejte do příspěvku na blogu nový blok Galerie nebo Posuvník obrázků a vyberte si Dynamické zdroje stejně jako předtím.

Teprve nyní, v Zdroj příspěvku vyberte Jiný příspěvek. Poté můžete vyhledat příspěvek, který obsahuje obrázky, na které se chcete dotazovat. V tomto příkladu je to výpis „Dům“ pro „123 WP Mayor St“:

Vyberte jiný příspěvek

Poté můžete vybrat pole, na které se chcete dotazovat. A jakmile to uděláte, uvidíte svou dynamicky naplněnou galerii stejně jako předtím:

Dynamická galerie z jiného příspěvku

Pokud byste aktualizovali obrázky ve vlastním typu příspěvku „Dům“, tyto obrázky by se automaticky aktualizovaly ve vašem příspěvku na blogu.

Funguje to stejně pro blok Image Slider.

Můžete také použít bloky Galerie a Posuvník obrázků v šablonách, které vytvoříte pomocí sady nástrojů, což vám poskytuje další způsob, jak využít dynamický obsah. 

Můžete například navrhnout šablonu, kterou používáte pro vlastní typ příspěvku „Dům“, tak, aby automaticky vyplnil galerii z vlastních polí každého domu.

Začněte používat bloky sady nástrojů ještě dnes

Sada nástrojů vám dává možnost vytvářet vlastní dynamické weby WordPress, aniž byste se spoléhali na vlastní kód.

S bloky sady nástrojů můžete pracovat se svým dynamickým obsahem přímo z nativního editoru bloků WordPress.

V tomto příspěvku jsme zdůraznili, jak vám bloky sady nástrojů mohou pomoci pracovat s obrázky pomocí nových bloků Galerie a Posuvník obrázků.

Pokud jde o nastavení a možnosti stylu, bloky jsou již flexibilní a konkurenceschopné s jinými pluginy pro galerie a posuvníky.

To, co však bloky sady nástrojů skutečně odlišuje, je schopnost dynamicky plnit vaše galerie a posuvníky.

Pomocí sady nástrojů můžete vytvořit opakující se pole obrázků a poté tato pole použít k naplnění galerií a posuvníků kdekoli na vašem webu WordPress, včetně šablon, které vytvoříte pomocí sady nástrojů.

Chcete-li vidět některé příklady toho, co sada nástrojů umí, a dozvědět se, jak funguje, podívejte se na dokumentaci a referenční stránky sady nástrojů.

A pokud si chcete sadu nástrojů vyzkoušet sami, můžete začít pomocí odkazu níže.

Získejte sadu nástrojů

Související články

0 Komentáře
Vložené zpětné vazby
Zobrazit všechny komentáře
Tlačítko Nahoru