Les 6

Drupalversie: 
Drupal 7

Inleiding

We bespreken vandaag een zeer boeiende module: Panels. Panels is een relatief complexe module omdat ze op zeer veel manieren kan worden benaderd. Ook zit ze zodanig ingeweven in Drupal dat je ze overal tegenkomt. Door het bos de bomen blijven zien wordt hier een uitdaging. Ik ga proberen om jullie hier een efficiënte werkwijze aan te leren.

Panels bestaat ondertussen voor Drupal 8 maar door de vele submodules en bijkomende probleempjes werk ik deze les uit in Drupal 7.

Voorbereidend werk

  • Zorg dat de site up to date is!
  • Voer de cron uit
  • Zorg voor de nodige inhoud en inhoudstypes door onderstaande link als module te installeren
  • inhoudstypes en inhoud les 6
  • (Indien je geen melding krijgt dat er ook inhoud is toegevoegd dan dien je de module opnieuw uit te zetten, cron uit te voeren en de module opnieuw aan te zetten)
  • Installeer en/of activeer de volgende modules:
  • Panels

  • Page manager (is aanwezig in de kern, gewoon aanzetten)

  • Views content panes (is aanwezig in de kern, gewoon aanzetten)

Panels gekoppeld aan een inhoudstype

Een mogelijkheid van panels is de samenwerking met ‘pages’ (=pagina’s).  Hiermee kan je de normale weergave van de inhoud ordenen in een paneel. Als je bij Drupal inhoud hebt gemaakt bvb persoonlijke gegevens, dan komen die allemaal onder elkaar tevoorschijn. Je kunt via de weergave van het inhoudstype wel de volgorden en het tonen van een label instellen, maar meer niet. Kunnen we niet het adres, tel,… enz naast de foto tonen? Een paneel op veld niveau…Jawel.

In ons geval zien we in de normale weergave alle foto's onder elkaar staan., Maar zou het niet mooier zijn om de foto's per 3 naast elkaar te krijgen en de laatste 4 naast elkaar. Ook geven we ze een eigen stijl.

Variant aanmaken

Het eerste dat we moeten doen is het aanmaken van een variant. Dat is een soort sjabloon dat we vervolgens koppelen aan een inhoudstype. In deze oefening koppelen we dit aan het inhoudstype 'les 5'. Alle nodes van dit type zullen dus automatisch mee veranderen.

  • Ga naar Structuur en klik op Pagina's
  • Zoek naar de lijn node_view en schakel deze in

  • De knop inschakelen past zich aan naar Bewerken, deze mag je aanklikken

  • We voegen vervolgens een nieuwe variant toe:

BELANGRIJK: klik niet op opslaan voor alle stappen zijn doorlopen!

  • In het eerste beeld geven we onze variant een naam: Gallery

  • Klik Variant aanmaken. Vervolgens kiezen we een 'paneelsoort'

  • Klik op doorgaan. In het volgende venster dienen we enkel de In-Place Editor in te schakelen. Straks zal je zien dat dit een groot voordeel heeft!

  • Klik op doorgaan en bevestig met Variant aanmaken. Nu mag je ook opslaan

Op dit moment wordt deze variant op alle inhoudstypes toegepast, we hebben namelijk nog niet bepaald dat dit enkel op Les 5 moet worden toegepast:

  • Klik op Selectieregels en kies bij Context bestaat voor Node:type

  • Klik nu op Toevoegen en vink in het volgende pop-up venster het juiste inhoudstype aan:

  • Sla alles op

Node bewerken

Nu we de variant hebben kunnen we via de In-Place editor een node naar keuze aanpassen. Dit zal automatisch invloed hebben op alle nodes van hetzelfde type.

  • Open via Inhoud een eerste node, bijvoorbeeld natuurfotografie
  • De kans is groot dat je niets te zien krijgt, opvallen zijn wel de twee knoppen onderaan, klik op Deze pagina aanpassen

  • Wanneer je nu in de eerste header iets wil plaatsen moet je op de bijhorende + drukken

  • Voeg een eerste afbeelding toe:

  • Vergeet niet om nu onderaan op te slaan!

Voor we verdergaan maken we twee nieuwe afbeeldingsstijlen aan, op die manier zal ons resultaat nog aangenamer overkomen:

  • AFBEELDINGSSTIJL 1:

  • AFBEELDINGSSTIJL 2:

       

  • Open opnieuw de node 'Natuurfotografie'
  • Bewerk de eerste foto

  • Pas zodanig aan dat hier geen label te zien is, dat het formaat een afbeelding is en de stijl afgeronde hoeken krijgt
  • Plaats nu de volgende vijf foto's op de pagina
  • De laatste vier foto's plaats je onderaan waar je plaats hebt voor vier foto's naast elkaar, dit keer kies je de stijl tekst
  • Uiteindelijk krijg je bij natuurfotografie en portretfotografie telkens volgend resultaat:

      

Views content panes

Een andere mogelijkheid om Panes te gebruiken is de integratie in Views. Zo kan je zonder veel problemen zelf bepalen waar bepaalde velden moeten worden geplaatst. We werken een voorbeeld uit:

  • Maak een nieuw overzicht aan:

  • Voeg velden toe:
    • body --> geen label
    • Image 2, 3 en 4 --> geen label, afbeeldingsstijl: tekst
    • Image 1--> geen label, miniatuur (100x100)
  • Zorg voor volgende volgorde:

  • In plaats van velden kiezen we bij weergeven voor paneelvelden:

  • Kies voor het type bruin

  • Plaats de velden op de juiste plaats:

  • Pas nu de HTML van het veld aan bij stijlinstellingen van onderstaande velden aan:
    • Titel --> H1
    • Body --> H2
  • Maak bij de CSS injector een nieuwe regel aan: CSS Panel View
  • Kopieer en plak onderstaande code:

.views-row-odd
{
background: #DCEDF2;
border-top:solid 2px;
padding:10px;
}
.views-row-even
{
background:#EEEEEE;
border-top:solid 2px;
padding:10px;
}

  • Zorg dat deze regel en toegepast word op de net gemaakte view!

Stylizer

Stylizer is een alternatieve manier om stijlen te gaan maken. Deze gaan verder dan de afbeeldingstijlen daar ze ook op tekst kunnen worden toegepast. Wij bekijken onderstaand voorbeeld:

  • Ga naar Structuur - Stylizer en Voeg toe

  • Geef een titel: Grijze rand en ga door
  • Kies al type een Paneelvenster en ga door:

  • Kies als basisstijl een Rounded shadow box

  • Pas de achtergrond aan:

  • Rechts kan je de voorbeeldweergave oproepen:

  • Helemaal onderdaan kan je voltooien

  • Open de node Portretfotografie
  • Gebruik onderaan de knop Deze pagina aanpassen
  • Klik nu bij elke foto op het penseel en kies voor grijze rand

    

  • Om alles perfect af te werken dien je bij de afbeeldingsstijl ronde hoeken nog een bewerking toe te voegen: change file format
  • Ook de kleur van de Difine Canvas moet dezelfde zijn als de grijze rand bij de stylizer