Display Suite deel 1

Leseenheid

Display Suite is de concurrent van Panels. Je kunt er dus je inhoud op een ordentelijke manier mee indelen. Display Suite gaat echter verder dan Panels. DS neemt de normale voorstelling van inhoud over (als je dit wenst natuurlijk). De instellingen zijn zeer gevorderd.

Ik heb in 2 lesdelen de 11 video's van Kristof De Jeager toegepast en hier de verkorte inhoud weergegeven.

1. Installatie en verkennende ronde

Installeer en activeer volgende onderdelen. De development functionaliteit is niet nodig.. Extra's zal toelaten om bvb ook views in DS te zetten. Zelfs de zoekpagina kan overgenomen worden.

We verkennen DS via structuur:

Er zijn 5 tabbladen met zelf nog onderverdelingen.

Bij weergave=> lijst zien we dat de inhoudstypes opgelijst staan en bij weergave beheren, komen we net zoals vroeger op de weergavemodus van het type.

door de installatie van DS kan je hier een indeling kiezen. Handig.

Als we verder gaan, zien we een aantal interessante mogelijkheden van DS. Je kunt vbv de paginatitel verbergen. Zet ook views displays aan, om straks view voor te stellen met DS.

Ook nog de zoekpagina..

2. DS op inhoudstypes

We maken een inhoudstype aan 'filmsterren'...altijd plezant. Maak dat je onbeperkt afbeeldingen en tags kunt toevoegen.

Als je nu bij de velden een layout kiest dan kan je ook de input van de gegevens ordenen:

We kiezen een fluid layout. Als er geen inhoud is zal de kolom verdwijnen.. Zo iets als communicerende vaten.

Kijk maar. Heeft dit zin op input niveau..? Ja, als je bvb het toevoegen van inhoud aan medewerkers overlaat. Dan wordt dit een soort formulier. Anders kan dit te veel van het goede zijn..

We doen nu hetzelfde voor de weergave van de full versie. Zet ook je afbeeldingen een beetje in een stijl. Test eens de fluid uit..

Het resultaat:

Als je nu de teaser versie bekijkt zie je dat die nog in de core versie staat. Via dupliceren kan je bij DS makkelijk de instellingen kopiëren.

Voor de teaser kiezen we maar 1 afbeelding. Knap dat dit kan.

Als je op je tag klikt kom je op de teaser voorstelling:

Nog dit..als je de storende blokken van drupal weg wilt (zoals hier onder getoond), , dan kan je dit met een simpel vinkje bij de weergave wegwerken. Weet dat je dit voor full en teaser moet doen.

 

Bij DS vind je het tabblad CSS klassen. Je kunt ze instellen voor gebieden (node layout) en velden (komt later aan bod). We geven het kind een naam.

bij de weergave kan je nu per gebied uit je klassen kiezen. Je moet natuurlijk nog de CSS schrijven en toepassen op je pagina's.

Ik heb me beperkt tot een simpele blauwe achtergrond en toegepast op de titel. Merk ook de correcte klassetoewijzing in de code.

Je kunt ook de velden zelf, in plaats van de gebieden, een CSS layout meegeven. Je moet er een vinkje voor aanzetten:

Daarna ga je een classe definiëren.

In het inhoudstype stel je de veld CSS in.

De instelling voor het gebied is in de algemene tabbladen te kiezen.

Hier heb ik het verschil tussen een gebied en een veld duidelijk gemaakt. De titel heeft een veldopmaak en het gebied, met de extra tekst heeft een regio opmaak. Tevens staat er een randje rond de volledige layout.

3. Velden

Als je bij het inhoudstype op velden klikt krijg je dit overzicht. We behandelen elk item.

A) een codeveld

Een codeveld is gewoon een stuk inhoud (tekst, afbeeldingen,..) die je toevoegt om straks in de de gebieden een plaats te geven. We koppelen het aan een node.

in de veldcode kan je meer dan html. DS code kan zelfs enkele variablelen gebruiken vanuit Drupal zelf. Bijvoorbeeld het inhoudstype kan je hier achterhalen.

We kiezen echter voor Full HTML en we zien onze CKeditor opspringen.

Daarna een plaats geven:

Bingo. Merk op dat het de CSS meeneemt van de header. Logisch.

B) Een blokveld

zoals de titel reeds laat vermoeden kan je hier mee een blok instellen. Het geeft een overzciht van de blokken die reeds beschikbaar zijn. We noemen ons blokje kalender en we gaan inderdaad de kalender blok mee invoeren:

Het resultaat.

Om dit gedrocht weer te verwijderen moeten we nu naar de velden gaan van DS.

Hier kan je bewerken en verwijderen.

C) Een Preprocess veld

kan variabelen van Drupal weergeven. vb het inhoudstype van de node. Wordt weinig gebruikt. We gaan er dan ook niet dieper op in.

D) Een dynamisch veld

Geef het veld een naam en voeg het toe aan de node in het inhoudstype. Geef het een plaats. Daarna moet je op het tandwieltje klikken om de inhoud toe te voegen.

Klik op inhoud selcteren.

Je komt op de interface die we kennen van Panels. Hiermee kan je zowat alles toevoegen. (op dit ogenblik zit ik echter met een bug, zal wel aan mij liggen)

Zo dit was onze eerste les over Display Suite. In een tweede deel gaan we er dieper op in.