Les 7

Drupalversie: 
Drupal 7

Update van de kern

(overgenomen van Drupal Basis, dit als extra info)

Modules updaten hebben we ondertussen geleerd in een vorige les. Naast deze updates die eenvoudig uit te voeren zijn heb je ook nog de updates van de kern. Dit wil zeggen dat we bijvoorbeeld van Drupal 8.2.6 naar Drupal 8.2.7 overgaan. Dat laatste is nu ook het geval. In dit onderdeel leg ik even uit hoe je die kern moet updaten.

Kijk op de site even bij Rapporten - Statusrapportage. Merk op dat er inderdaad een core-update moet gebeuren

Je hebt hiervoor nodig:

  • Een nieuwe versie van Drupal (KLIK HIER)
  • FileZilla waar je inlogt op jouw site

Step 1:

  • Pak de nieuwe versie van Drupal uit op de computer
  • Open die uitgepakte map, verwijder hier alle mappen behalve Core en Vendor, zorg dat onderstaande niet verwijderd wordt:

Step 2:

  • Open FileZilla en verbind met de server. Zorg ervoor dat je links in beeld de map Drupal 8.2.7 hebt openstaan en rechts in beeld jouw site:

  • Zorg dat links in beeld alles geselecteerd wordt (Ctrl + A). Klik vervolgens rechts op de selectie en kies uploaden

(het mapje met de drie puntjes is eigenlijk geen map, maar een sneltoets om een verdiep hoger in de structuur te springen)

  • Het uploaden van deze bestanden neemt serieus wat tijd in beslag. Een klein beetje geduld is nodig. Ook raad ik u aan om ondertussen niet te werken op de site, wacht tot alles klaar is.

Step 3:

  • Wanneer de update klaar is, keer je terug naar de site. We voeren eerst het database-updatescript uit. Dit wil zeggen dat de site connectie maakt met de databank en ook daar alles in orde zet (lees: update). Dit doe je door achter jouw URL update.php te typen:

  • Doorloop vervolgens de stappen (meestal op Doorgaan klikken)
  • Keer terug naar de frontpage en bekijk nu even de statusrapportage. Normaal is alles nu in orde.

Panels: oefening

We maken een oefening. Gebruik de kennis van de vorige les. We willen een nieuwe pagina maken met daarop een paneelvoorstelling van The Rolling Stones.

Doorloop hiervoor onderstaand stappenplan om dit tot een goed einde te brengen:

  1. Download de nodige bestanden, zorg dat deze uitgepakt aanwezig zijn op de harde schijf van de computer
  2. Maak een nieuw inhoudstype aan: Oefening Panels
  3. Voeg volgende velden toe: (Bij alle afbeeldingsvelden moet je de optie titel aanvinken!)

  1. Voeg inhoud toe van het type Oefening Panels (Titel: The Rolling Stones). Gebruik de gedownloade bestanden voor de inhoud aan te vullen
  2. Maak een menulink
  3. Maak drie afbeeldingsstijlen:

STIJL 1

STIJL 2

         

STIJL 3

  1. Maak op de gekende wijze een nieuwe variant aan. Hou rekening met volgende eigenschappen:
    1. Titel: Oefening Panels
    2. Layout: Adaptive: 3x3-4x4
    3. Selectieregels - Node:Type - Oefening Panels

BELANGRIJK: Open een andere browser op de computer en surf naar jouw site, log niet in. Gebruik vanaf nu deze site om het resultaat te bekijken. Het is namelijk zo dat het uiteindelijke resultaat van een paneel bekeken moet worden wanneer je niet bent ingelogd.

  1. Voeg nu de velden toe aan de verschillende panes van het paneel:
    1. Header left: body
    2. Header center: groepsfoto
      1. Geen label
      2. Afbeeldingsstijl: Groepsfoto paneel
    3. Middle below top left: naam_member1
    4. Middle below top center left: naam_member2
    5. Middle below top center right: naam_member3
    6. Middle below top right: naam_member4
    7. Middle below bottom left: member1
      1. Instellingen: zie foto
    8. Middle below bottom center left: member2
      1. Instellingen: zie foto
    9. Middle below bottom center right: member3
      1. Instellingen: zie foto
    10. Middle below bottom right: member4
      1. Instellingen: zie foto
    11. Linksonder: muziekvideo
      1. Instellingen: zie foto
    12. Linksonder: titel film
    13. Linksonder: uitleg film

INSTELLINGEN FOTO'S BANDLEDEN

INSTELLINGEN FILM:

  1. Maak met stylizer een nieuwe stijl aan, deze wordt gebruikt voor de tekst. Kies zelf een passende naam en de kleuren. Neem gerust onderstaande instellingen over:

Achtergrond: #a50603
Tekst: #fa8f8f

  1. Maak een nieuwe css regel aan voor de namen van de bandleden en de titel van het filmpje. Gebruik onderstaande code, pas aan naar believen

.naam
{
    border:2px solid rgb(251, 90, 2);
    border-radius:15px;
    text-align:center;
    padding: 15px;
    margin: 0 0 10px 0;
    background-color: #A9A9A9;
    font-size:1.5em;
    color:#F0FFFF;
}

  1. Zorg er nu natuurlijk voor dat deze css wordt toegepast op de juiste velden (tip: weergave beheren)

Panels (deel 2)

Landingspagina

  • Kies Structuur - Panels
  • Klik op Landingspagina

  • We geven onze landingspagina een naam, pad en kiezen een lay-out

  • We voegen nu in de eerste kolom bestaande inhoud toe: natuurfotografie

  • Alle instellingen laat je staan en je bevestigt. Je kan opmerken dat we hier kiezen voor de teaser. Dat is de ideale manier om een landingspagina op te stellen. Je kan op die manier een homepage maken met een variatie van zaken zoals stukjes van een node, een overzicht en ga zo maar verder. De eerste kolom is nu opgevuld. We vullen ook de drie andere op:
    • Tweede kolom: natuurfotografie (2)
    • Derde kolom: Portretfotografie
    • Vierde kolom: Portretfotografie (2)
  • Wanneer je op voorbeeldweergave klikt dan zal je de foto's niet te zien krijgen. We moeten ons inhoudstype (les 5) aanpassen:

  • Zet de eerste afbeelding zichtbaar en geef deze de afbeeldingsstijl 'Les 5 ronde hoeken'

  • Keer via structuur - pagina's terug naar de landingspagina en bekijk, je kan natuurlijk ook de URL gebruiken /portfolio
  • We verwijderen eerst de titels:
  • Klik op inhoud

  • Klik op het tandwiel bij de eerste kolom en kies instellingen

  • Zet een vink bij titel overschrijven, laat het invulveld vervolgens leeg en sla op. Herhaal dit voor de andere kolommen
  • Ga naar de instellingen van het inhoudstype Les 5 en vink de Weergave-instellingen 'Auteur en datum tonen.' uit

  • Voor het gemak van werken voeg je nu eerst een menulink toe. Dit keer dien je dit handmatig te doen. Structuur - menu's - main menu - link toevoegen
    • Geef een naam aan de link: Portfolio
    • Geef het pad op: portfolio
    • Kies het bovenliggend onderdeel
  • Open nu via het tandwiel de instellingen van het paneel
  • Bij elke kolom open je de instellingen en je haalt de vink weg bij 'Include node links for "add...'

Minipanels

Voorbereiding

  • Installeer en activeer de module Entity view modes
  • Open vervolgens de instellingen van deze module
  • Voeg mij de node een weergavemodus toe:

  • Geef deze een titel: minivoorstelling en sla op

  • Maak nu eerst een afbeeldingsstijl voor deze minivoorstelling:

  • Kijk nu even bij de weergave van het inhoudstype Les 5, je zal merken dat daar naast de standaard en de teaser ook minivoorstelling is bijgekomen

  • De eerste vier afbeelding zijn zichtbaar, de rest verborgen, de eerste vier afbeeldingen krijgen afbeeldingsstijl minivoorstelling

Minipanel maken

  • Ga naar Structuur - minipanels - Toevoegen
  • We geven deze een titel:

  • Kies doorgaan en het volgende venster kan je opnieuw overslaan door op doorgaan te klikken
  • We kiezen als lay-out opnieuw voor Rolph (onder panopoly)

  • Voeg nu zoals eerder deze les in elke kolom een bestaande node toe. Let hierbij op het volgende:
    • Overschrijf de titel zonder deze te definiëren
    • Zet de vink uit bij de link van read more
    • Kies als bouwmodus dit keer: minivoorstelling

  • Sla het geheel op door te klikken op Voltooien

Minipanel toevoegen aan panel

  • Open de instellingen van ons eerder gemaakte paneel 'Portfolio'
  • In de voet voegen we nu inhoud toe door een klik op het tandwiel

  • Kies vervolgens voor Mini-panel --> minivoorstelling

  • Sla dit geheel op en bekijk het resultaat. Om de minivoorstelling correct uit te lijnen maak je een nieuwe CSS-regel die je enkel toepast op de portfolio, gebruik volgende code:

img
{
    display:block;
    margin: 0 auto;
}