Display suite: naklikejte si layout článků v Drupalu bez úprav CSS

Kdo se nebojí sáhnout do šablon v Drupalu a ovládá CSS, ten určitě nemá s úpravami layoutu článků problém. Ale i zkušení Drupalisté možná ocení modul, který umožňuje naklikat layout článků a jiných typů obsahu i bez toho, že byste jej museli pracně definovat v šabloně a v CSS.

Standardní layout článku v Drupalu 7 vypadá takto: nadpis, pod ním úvodník, připojený obrázek, text článku. Pomocí kaskádových stylů můžete třeba úvodníky přeskládat tak, aby byl nadpis, pod ním jméno autora a datum, následně obrázek a vedle něj text.

Pokud byste chtěli, aby byl vedle obrázku zarovnán už i nadpis, museli byste vše pracně pozicovat pomocí stylů, případně obrázek ručně vypsat v šabloně ještě před nadpisem. Není to výrazně složité, jde jen o pár řádků kódu, ale pro někoho to může být naprosto nepředstavitelné.

Naštěstí zde existuje další možnost, jak vzhled článků, respektive jiných typů obsahu, upravit. Tou možností je modul Display suite. Tam, kde ve správě obsahu běžně upravujete vzhled políček připojených k článku v úvodníku, detailu a jiných typech zobrazení, si můžete nadefinovat nový layout a políčka přiřadit do jednotlivých částí takového layoutu.

V praxi tak můžete zvolit dvousloupcový layout pro úvodníky, do levého sloupce přesunout políčko s obrázkem a doprava pak nadpis a text. Během několika kliknutí tedy zrealizujete to, co byste jinak museli v šabloně kódovat nebo přinejmenším kopírovat z jiného projektu. Vygenerovaného kódu se to navíc nijak výrazně nedotkne - přibyde v něm pár dalších DIVů a k nim sada odpovídajících kaskádových stylů.

Jak na popsaný úkol pomocí modulu Display suite, tedy na úpravu zobrazení úvodníků článků, vám ukáže následující video.

Zde je rekapitulace zmíněných modulů:

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Super věcička, na tohle jsem opravdu čekal. Ovšem, jak používat display suite v Drupalu 6? Zatím jsem na to nepřišel...

Profile picture for user Jan Polzer

Já myslím, že podobně. Ale nezkoušel jsem to. Hledal bych po instalaci CCK v Správa obsahu > Typy obsahu > Správa polí.

návštěvník

Shodou okolností jsem na tento modul narazil před několika týdny a musím říci, že má u sebe přímo odkaz na screencast s návodem, asi nejlepším co jsem zatím u modulu pro drupal viděl. Lze pochopit i bez znalosti angličtiny.

PS: poslední videa na Maxiorlovi mi hrají hrozně potichu, je to vada u mne, nebo je to slabě nahráno? Starší, ale jedou ok.

Profile picture for user Jan Polzer

Pokusím se to vylepšit. Nahrávám nyní na jiném počítači, než dříve, nemám to asi ještě pořádně "ošéfováno".

návštěvník

dobrý den, můžete prosím prozradit jak jste vytvořil do pole číst dál? myslím, že je potřeba na to modul, protože normálně nastavit mi to nešlo. děkuji za odpověď.

Profile picture for user Jan Polzer

Odkaz Číst dál Drupal vytváří automaticky, pokud je úvodník kratší, než celý text. Anebo nechápu dotaz. V které části videa jej máte na mysli? (pošlete čas videa, kouknu se).

návštěvník

čas je 8,30 - je to tam uvedeno ve správě polí

Profile picture for user Jan Polzer

Aha. No v tomto případě se to jako samostatné políčko objeví v momentě, kdy aktivujete některý layout z Display Suite.

návštěvník

Moc prima věc, jen: po nějakém čase se změnilo chování a najednou se zobrazuje vše v jednom sloupci a v druhém nic - t.č. je v normálních prohlížečích vše v pořádku, dokonce v IE 8 je vše dle představ, v IE 7 se chyba objevuje. Nenapadá vás příčina či řešení? 

návštěvník

Dovolím si pootevřít tohle téma. Taky jsem narazil na tenhle modul, zajásal jsem, protože jsem si myslel, že si splním konečně přání a položky budou tam, kde bych chtěl být.

Nicméně, při vytváření layoutu tam nemám všechna potřebná pole (fields), prostě některé chybí. Především,  ty, které jsem si sám definoval, například mám možnost při zadávání příspěvku zadat zdroj článku (zvlášť název + zvlášť odkaz). Tyhle se mi tam třeba nezobrazí.

Je potřeba je někde zapnout? Předtím se mi to tiž normálně v příspěvku zobrazily, nyní je to samozřejmě pasé.

 

Díky za radu. Jinak web chválím, hodně jsem se od autora naučil.

Profile picture for user Jan Polzer

To máte definováno modulem Link? Přiznám se, že netuším, proč to není viditelné, zřejmě si to nerozumí. Ověřte, jestli máte akutální verze.

návštěvník

Takže v Drupal 6 - se to ovládá trošku jinak. To nastavení nenajdete u typy obsahu, ale přímo v nastavení modulu:  Display Suite (admin/build/ds/layout/) No a zde vidíte vaše typy obsahu a můžete si to tam naklikat.

návštěvník

Akorát v tom nevidím pole které jsem si sám definoval, takže je mi to k ničemu :-(

návštěvník

Zdravím,

když jsem upravil úvodník výše uvedeným způsobem, přestal se zobrazovat obrázek před "číst dál" - šipka. Šablona danland.

Náhodou, nevíte jak ji tam "šoupnout"?

díky za info

Profile picture for user Jan Polzer

Nevím, zda to bude po zapnutí v Danlandu správně nastylované, ale Display Suite nabízí políčko Číst dál. Stačí jej přetáhnout mezi ta zapnutá.

návštěvník

Vše funguje jak má - jen se nezobrazí obrázek u toho pole číst dál. V danlandu je tam taková zelená šipka. Tak by mě zajímalo jak tam zase ten obrázek dostat :)

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru