Drupal 2

Display Suite deel 2

Weergavemodi

In dit tweede deel starten we met de weergavemodi. Je kent al de standaard (full) en de teaser weergaven van de inhoud. De teaser weergave verschijnt op de frontpagina, de taxonomietermen en als je wilt in een view. Via DS gaan we een nieuwe weergave bijmaken. Deze zal via een view te zien zijn. Ik geef het hier de naam DS, maar je kunt natuurlijk ook een zinvolle naam zaols intro, demo, overzicht,... geven.

Koppel het aan de node.

In het inhoudstype is er dan een mogelijkheid bijgekomen:

Je kunt dit zien in de rechter hoek.

We gaan voor deze nieuwe weergave de teaser dupliceren. Dit bespaart ons werk.

Nu gaan we wijzigingen aanbrengen. Enkel de titel, links en de afbeelding op 480px.

We maken nu een view en kiezen Disply suite bij weergeven. De standaardweergavemodus zetten we op onze nieuwe DS.

Resultaat:

 

Er is meer.. je kunt nu item per item inzetten. Je hebt bvb een paginering met 5 items. Je kunt ze alle 5 anders instellen. Hier zet ik het eerste item op DS, de andere op teaser.

Resultaat... Dit opent perspectieven. Vergeet niet het vinkje aan te zetten bij use the changing view.  Als je het tweede vinkje aan zet dan zal op elke volgende pagina ook de weergave zo zijn.

We zijn dus nu in staat om onze view zo te tunen dat we bvb een eerste item als full voorbeeld tonen, de rest als teaser en desnoods nog andere weergavemodi.

Er bestaat ook een view mode switch die je in staat stelt om van mode te wisselen:

De switch komt als item te voorschijn in het inhoudstype. (niet in de standaard, maar wel in de andere modes) Zet de switch op de juiste plaats.

Bij de instellingen ga je verfijnen. Zo kan je bij elke mode een soort navigatie zetten.

Het voorbeeld bij de teaser vorm. Je ziet dat de 'beknopt' niet actief is. De mode schakelt dan zelf de link uit.

De full versie:

Tenslotte kan je met deze tool, elke node apart instellen als je dat wilt. Je overruled daarmee de normale weergave van de node. Wil je bvb dat een bepaald onderwerp niet als teaser maar als full versie getoond wordt, zelfs in teaservorm, dan moet je beslist dit aanvinken... Hiermee kan je dus overzichtspagina's toch in full versie tonen zonder de knoppen lees meer...

Ik laat het aan jullie creativiteit om met deze prachtige mogelijkheden van modes, toepassingen te maken.

Zoekpagina instellen via Display Suite

Als de module Display Search Search geactiveerd staat, dan kan je de zoekpagina van de core van Drupal overrulen en zelf bepaalde instellingen doen. Eerst bij de gewone zoekinstellingen de volgende zaken aanvinken. We gaan ook niet zoken naar gebruikers.

Daarna gaan we naar de zoek instellingen bij DS.

Ik neem de highlighted input:

Je kunt ook een andere output kiezen. Zelfs onze eigen DS viewmode kan je inschakelen.

Je kunt ook per inhoudstype groeperen. Ik stel het hier zo in dat enkel het inhoudstype 'filmsterren' als groep wordt weergegeven. Alle andere zoekresultaten van de andere inhoudstypes worden dan gebundeld in 'andere inhoudstypes'. Let op. Dit is geen filter. Om inhoudstypes uit te sluiten van de zoekresultaten heb je een ander module nodig (Search Configuration)

Het resultaat. Ik had ook een basic page aangemaakt met in de body het woordje acteur.. Let wel op dat je site met een cron de index aanpast, anders ziet hij de nieuwe inhoud niet. Merk de highlight op.

Regio naar Blok

een handige tool zorgt er voor dat je delen van je inhoud, als blok kunt tonen. Bij extra => andere vink je de mogleijkheid aan.

Vanaf dan is blokgebieden zichtbaar.

't is te zeggen... de standaard weergave heeft die mogelijkheid niet. Je moet eerst de standaard weergave overzetten naar 'volldige inhoud'.

Je krijgt dit:

daarna kan je het toekomstig blokje een naam geven en verschijnt het bij de velden van het inhoudstype. Wat je daar naar toe sleept of nieuw instelt komt niet in een gebied maar in het blokje.

een voorbeeldje

Vergeet niet de drupal core blokken te tonen!

Nu is het blokje beschikbaar.

Blokken zijn responsive en kunnen zich dan ook aanpassen aan de plaats die nog beschikbaar is.

Panels in Display Suite

Jawel. als de Panels module werd geactiveerd, kan je in DS ook switchen van instelling van DS naar Panels en terug. Ik hou de twee liever gescheiden, maar het kan.

Views versus Display suite

Maak een view aan op de gewone manier. Kies echter voor Display Suite velden.

Voeg velden toe:

Als je kijkt zal je teleurgesteld zijn.. Je moet inderdaad nu de view omzetten naar de layout van DS.

Voeg de view toe:

Kies wel de juiste..

Kies daarna de layout. Hier gaan we voor drie kolommen fluid.

Je krijgt nu de mogleijkheid om de velden een plaats te geven in je gekozen layout:

Ik heb ook nog gegroepeerd op acteurs en actrices. Bij de velden heb ik de afbeeding op 1 gezet. (werkte niet met bovenstaande print. ik heb het met de oude meervoudige instellingen moeten doen)

Nu  je DS kent zal je hoogst waarschijnlijk je site herwerken...straf hé. Je behoort nu tot de gevorderden...

Opmaak met figuren

We kunnen reeds goed werken met figuren in onze inhoud. Figuren worden echter ook gebruikt in de opmaak. Een logo bijvoorbeeld of een achtergrond figuur. In deze les gaan we een figuur een transparante achtergrond geven en een achtergrondafbeelding maken met kleurverloop. Ik haal van Google deze figuur: ooievaar8.jpg (trefwoord= ooievaars)

We openen pixlr.com, een online gratis app om afbeeldingen naar je hand te zetten. Heb je Photoshop of Photoshop Elements, ga je gang..

We gaan naar de afbeelding die we reeds hebben opgeslagen:

Eerst een beetje bijsnijden. 2X klikken en het is in orde..

Daarna kiezen we het toverstafje. Dit selecteert alle pixels binnen een bepaald bereik. Dit kan je dus aanpassen en scherper zetten als je wil.

Je ziet dat alle blauwe tinten werden geselcteerd.

Als we een transparante laag willen maken moet we een laag dupliceren:

Nu hebben we er 2. Dubbelklik op het slotje om het bewerkbaar te maken.

Druk nu op delete op je toetsenbord om de blauwe kleur te verwijderen.

Als je nu de achtergrond wegvinkt heb je de typische blokjesvoorstelling van een transparante laag.

De figuur is nog te groot

Aanpassen naar wens. Ik heb 300 X 150 px genomen.

Opslaan als png is het best.

Het resultaat na uploaden op de site.

Nu gaan we een figuur maken om aan de linker zijkant te zetten. We gaan daarvoor de kleuren gebruiken die reeds op de site gebruikt worden door het thema. Maak een print van de site en sla deze op. Open het in pixlr.com.

maak nu een nieuwe afbeelding met de gewenste afmetingen:

Schik je venster..

De verloop tool ziet er zo uit:

Ik kies voor 3 kleuren.

Klik telkens op zo'n huisje en daarna op het kleurvlakje:

Je krijgt een pipetje waarmee je de kleur kunt halen vanuit je afbeelding van het thema. Zo kan je de kleuren instellen. In deze oefening moet de rechtse kleur overeenkomen met de achtergrond van je body kleur. Sleep tenslotte met d emuis van links naar rechts over de nieuwe afbeeldingen en het wonder geschiedt... Nu akn je dit gebruiken als zijkant in je CSS.

Pagina's