Drupal Paragraphs: jak jednoduše sestavovat tělo stránky z komponent přímo v administraci

Tento návod pro Drupal 8 bude po delší době trochu komplexnější, neboť vám jeho prostřednictvím ukážu hned několik základních i doplňkových modulů pro Drupal. Práci s políčky jistě znáte. Pro každý typ obsahu si nadefinujete vyplňovaná pole, ve správě zobrazení nastavení, jak budou vypadat po vykreslení a web nakrmíte obsahem.

Jenže něco podobného postačí pro designově jednodušší web. V případě, kdy uživatel chce na jedné stránce vložit text, pod něj na dva sloupce text s obrázkem, pod ně text v jednom sloupci, pak třeba pás galerie a následně text ve dvou sloupcích, máte problém. Jistě, dají se pro tyto případy nachystat políčka, uživatel je vyplní a vy je v tématu vzhledu vykreslíte v uvedené podobě.

Ale tento kreativní uživatel bude chtít na jiné stránce poskládat její obsah v jiném pořadí. Někdy možná vynechá galerii. Jindy naopak přidá text na tři sloupečky. Jindy bude chtít vložit několik komponent s textem a obrázkem vedle něj.

A právě pro tyto účely je v Drupalu připraven doplňkový modul nazvaný Paragraphs. S jeho pomocí si připravíte oddíly stránky s definovanými políčky a necháte pak zcela v režii uživatele, jak si s jejich pomocí obsah stránky poskládá.

V Drupalu 7 a starších jsem podobné požadavky řešil s využitím modulů nabízejících šablony do textového editoru v administraci. Nebylo to nejlepší řešení. Uživatelé mazali DIVy na pozadí, nedrželi se přednastavených tříd a celý připravený layout v editoru rozbili. Ostatně nebyla to jejich vina. Těžko chtít po laikovi dodržování nějaké HTML struktury.

Co budeme potřebovat:

1. Drupal 8 (ovšem Paragraphs fungují i v sedmičce)
   
   
2. Doplňkový modul Paragraphs
   
3. Zapnutí experimentálních modulů Layout Discovery a Field Layout. Jsou součástí jádra Drupalu 8, ale nejsou po instalaci aktivní.

Pokud jste ještě experimentální moduly Layout Discovery a Field Layout nevyzkoušeli, napravte to. My si je ukážeme v praxi s použitím Paragraphs, ale stejně tak poslouží v případě, že jen chcete vytvořit pevně dané rozložení nějakého obsahu na dva, tři sloupce.

Field Layout můžete brát i jako zjednodušenou podobu modulu Display Suite. Pokud jej znáte, můžete jej v následujícím návodu aplikovat. Pro zjednodušení a zaměření se na práci s modulem Paragraphs se držím jen toho, co je v jádře Drupalu. Přestože v praxi dávám přednost právě Display Suite.

Připravte si oddíly

Řekněme tedy, že uživateli pracujícímu s webem, který pohání Drupal 8, budeme chtít umožnit přidat do obsahu typu Stránka libovolný počet oddílů s textem na jeden sloupec, na dva sloupce a s možností vložit ve dvou sloupcích text a obrázek. Jdeme na to:

1. Přejděte do nastavení Struktura > Paragraph types. Toto je místo, kde se definují jednotlivé typy oddílů přidávaných do obsahu. Pokračujte tlačítkem Add paragraph type pro přidání prvního typu oddílu.
2. Do formuláře zadejte jako název typu oddílu „Text v jednom sloupci“. Všimněte si, že volitelně lze přidat také symbol v podobě ikonky. Ten by se poté objevil v administraci při výběru oddílů. Stejně tak je možné doplnit popisek pro uživatele, kde mu vysvětlíte, co do stránky přidává. Pokračujte klepnutím na tlačítko Uložit a spravovat pole.
3. Dostanete se do definice políček, která se budou v tomto typu oddílu vyplňovat. V případě jednosloupcového textu je to jasné, přidejte jen nové pole typu Text (formátovaný, dlouhý) a nazvěte jej prostě Text do jednoho sloupce.
4. Tímto je první oddíl připraven z hlediska zadávání. Přepněte se ještě na kartu Správa zobrazení a odeberte z jeho zobrazení popisek políčka (tj. aby na stránce pro čtenáře nebylo napsáno Text do jednoho sloupce a teprve poté onen text).
5. Podobně připravte oddíl pro zadávání dvousloupcového textu. Tedy přejděte do Struktura > Paragraph types a klepněte na tlačítko Add paragraph type. Nazvěte jej Dvousloupcový text a uložte.
6. Pro tento oddíl přidáme dvě políčka. Obě budou typu Text (formátovaný, dlouhý). První políčko nazvěte Text vlevo, druhé políčko nazvěte Text vpravo.
7. Přepněte se do Správy zobrazení, kde je nutné nastavit, že textová políčka budou vedle sebe. Rozklepněte položku Layout Settings, kterou sem přidal experimentální modul Field Layout a vyberte v ní rozvržení Two columns.
8. Nastavení takto uložte a všimněte si, že ve správě zobrazení přibyla možnost přesunout políčka mezi regiony Top, First, Second a Bottom. V regionu First tedy ponechejte pole Text vlevo, do regionu Second přesuňte pole Text vpravo. U obou vypněte zobrazení popisků, formát nechejte jako Výchozí a nastavení uložte.
9. A stejným způsobem nyní přidejte třetí typ oddílu. Tedy v sekci Struktura > Paragraph types přidejte nový oddíl nazvaný Obrázek a text, přidejte mu pole Obrázek a pole Text vedle obrázku. Ve správě zobrazení opět zapněte rozvržení na dva sloupce, tato dvě políčka do nich rozmístěte a uložte.

Napojení oddílů Paragraphs ke stránce v Drupal 8

Oddíly jsou připraveny, zbývá je připojit k editaci stránky.

1. Přejděte do administrační části Struktura > Typy obsahu > Základní stránka > Správa polí. Klepněte na tlačítko Přidat pole. Z nabídky vyberte Reference revisions > Paragraph a pole nazvěte Oddíl stránky. V dalším kroku ponechejte neomezený počet hodnot a pokračujte dále.
2. V upřesňujícím nastavení je možnost specifikovat jen některé typy připravených oddílů, které by bylo možné k danému typu obsahu připojovat. U stránky však chceme využít všechny připravené typy oddílů, takže nebudeme žádný konkrétní specifikovat a nastavení potvrdíme.
3. Ve Správě zobrazení vypněte zobrazení popisku nad políčkem s oddíly a to je vše.
   
   

Nyní se podívejte do editace libovolné stránky na webu, kde vám pod výchozím textovým políčkem přibude možnost výběru typu oddílu a jeho přidání do stránky. Šipkou vedle tlačítka si rozbalíte nabízené možnosti.

Výchozí textové pole nedoporučuji rušit, protože sem obvykle píšete text, který se přes tokeny a modul Metatag propíše do vyhledávačů a sociálních sítí.

Možnostem se meze nekladou

Vše, co jste schopni pomocí modulu Paragraphs sestrojit a umožnit uživateli do webu vkládat, je dáno jen mírou vaší kreativity a doplňkovými či výchozími moduly. Zkombinujte textová pole s obrázky.

S doplňkovým modulem zkuste zapojit do hry vkládání mapových podkladů. Využijte možnosti vytvářet referenční seznamy s Views a vkládat je do stránek. Vytvořte si galerie vkládané mezi textové prvky. Pohodlně a bez bastlení všeho v jednom editačním poli s editorem.

Pokud je váš web postaven na Bootstrapu, mrkněte také na modul Bootstrap Paragraphs, který vám do Drupalu automaticky přidá oddíly odpovídající různým komponentám z tohoto frontendového frameworku. Složitější komponenty do stránky připravíte i bez toho, že byste jejich vizuální zobrazení museli pracně dotvářet v CSS.

Videonávod pro modul Paragraphs a Drupal 8.4

Vzhledem k tomu, že tento návod je trochu rozsáhlejší, myslím, že nebude od věci také video. Najdete v něm totéž, co popisuji na výše uvedených řádcích. Pokud se v administraci Drupalu 8 stále ještě plně neorientujete, měl by vám videonávod ukazující přesný postup pomoci.