Les 11

Drupalversie: 
Drupal 8

Trusted Host Settings

Een fout die we al een tijdje zien staan bij de statusrapportage is die van de Trusted host settings. We lossen dit even op in dit eerste deel.

  1. Log voor de zekerheid eerst even uit op jouw site.
  2. Log in op de server via het cpanel.
  3. Open vervolgens de file manager

  1. Open de map van jouw sub domein.
  2. Open nu de map sites.
  3. Pas de schrijfrechten aan van de map default naar 0755

  1. Open de map default
  2. Pas de schrijfrechten aan van het bestand settings.php naar 0755
  3. Zorg dat het bestand settings.php geselecteerd staat en kies bovenaan de Code editor, klik dan in de pop-up op Edit

  

  1. Het bestand settings.php gaat open!
  2. Ga op zoek naar de trusted host settings (Ctrl + F)

  1. Je merkt dat de code in een groene kleur staat, dit wil zeggen dat deze niet wordt toegepast. Verder is dit ook een voorbeeld dat we nu dienen om te vormen voor onze site. Wanneer ik dat zou doen voor www.drupalacht.drupallearning.be dan zou de code er als volgt uitzien:

  1. Pas de code aan, toegepast op jouw site. Sla dit vervolgens op nadat je alles een tweede keer hebt gecheckt!

  1. Wat ons nu nog rest is het opnieuw aanpassen van de schrijfrechten. Dit voor settings.php maar ook voor de map Default. Pas aan naar 0555 / 0444

  1. Sluit voorlopig niets af. Keer terug naar jouw site en bekijk de statusrapportage:

Achtergrond op overzichtspagina

In een les op Drupal 7 bespraken we reeds de module Background Formatter. De tool om een foto als achtergrond mee te geven op de site. Dit kunnen we reeds op een node door een veld toe te voegen met die specifieke eigenschappen. Wat we nu gaan doen is hetzelfde maar dan een achtergrondfoto op een overzichtspagina, een pagina waar dus geen node wordt getoond.

Installeer eerst de module Background Images Formatter

We gaan voor deze toepassing een nieuw soort blok toevoegen. Op dit moment hebben we één standaardblok dat we hebben gekregen bij de installatie van Drupal. Dit blok bevat een simpel body-veld. Wij willen nu een blok toevoegen met een afbeeldingsveld. Dus los van de achtergrond foto kan deze mogelijkheid nog veel meer deuren openen.

  1. Navigeer naar de juiste plaats om dit allemaal te regelen: Structuur - Blok-layout - Soorten

  1. Voeg een nieuw soort blok toe:

  1. Geef dat nieuw soort blok nu een titel en eventueel een beschrijving

  1. In het volgende beeld kan je bijna het verschil niet zien tussen het maken van een inhoudstype of dat van een bloktype. Voeg dus op de gekende wijze het veld afbeelding toe.

  1. Pas bij de weergave het formaat van dit veld aan naar Background Image. Kijk hieronder voor de instellingen

  1. Sla alles op. De nieuwe bloksoort is een feit. Nu nog wat inhoud toevoegen: zoek eerst een foto die je graag wil gebruiken (tip: pixabay.com). Maak de foto op voorhand iets doorzichtiger.
  2. Voeg een nieuw blok toe. Je zal merken dat je dit keer moet kiezen welke soort blok je wil toevoegen:

  1. Geef het blok een naam, upload de foto, geef het blok een plaats bij inhoud en zorg dat deze enkel op de front te zien is.

Hovereffect Bis

  1. Maak eerst een nieuwe afbeeldingsstijl

  1. Maak een nieuw overzicht aan met de volgende kenmerken:
    1. Naam: Fotospecial Hover I
    2. Blok maken, geen pagina
    3. Inhoud van het type Fotospecial
    4. Onopgemaakte lijst van velden
    5. Aantal elementen: 6
  2. Voeg velden toe:
    1. Afbeelding: uitsluiten van weergave, afbeeldingsstijl Focal Point 150 x 150, meervoudige veldinstellingen: 1 van 0
    2. Afbeelding: afbeeldingsstijl Focal Point 150 x 150, meervoudige veldinstellingen: 1 van 1
  3. Herschrijf nu de resultaten van het twee afbeeldingsveld. Plaats onderstaande HTML in het tekstvak:

Belangrijk! Controleer bij de vervanginspatronen of je dezelfde tokens hanteert zoals in dit voorbeeld!

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
 {{ field_image }}
  </div>
  <div class="back face center">
{{ field_image_1}}
  </div>
</div>
</div>

  1. Sla alles op
  2. Geef het blok nu een plaats op de site: Footer First Widget, enkel op de front
  3. Download hier de nodige css
  4. Maak een nieuwe CSS-regel aan: 'CSS hovereffecten front'
  5. Kopieer de CSS regel uit het Word-document naar de nieuwe regel op de site.
  6. Zorg ervoor dat de CSS wordt toegepast op het overzicht:

  1. Maak opnieuw een overzicht met de volgende kenmerken:
    1. Naam: Fotospecial Hover II
    2. Blok maken, geen pagina
    3. Inhoud van het type Fotospecial
    4. Onopgemaakte lijst van velden
    5. Aantal elementen: 6
  2. Voeg velden toe:
    1. Titel: uitsluiten van weergave
    2. Pad: uitsluiten van weergave
    3. Afbeelding: afbeeldingsstijl Focal Point 150 x 150, linken naar inhoud, meervoudige veldinstellingen 1 van 0, resultaten herschrijven: linken naar het pad (token gebruiken)
  3. Sla alles op
  4. Geef het blok nu een plaats op de site: Footer Second Widget
  5. Download hier de nodige CSS
  6. Kopieer de CSS uit het Word-document en plak dit bij de eerder gemaakte regel 'CSS hovereffecten front'
  7. Zorg ervoor dat de CSS wordt toegepast op het overzicht:

Oefening

Zorg ervoor dat er op de frontpage een blok komt te staan die de 6 categorieën weergeeft door telkens één foto per categorie in een rij weer te geven. Gebruik onderstaande om dit te realiseren:

  1. Installeer de module Views Flipped Table
  2. Maak een nieuw overzicht aan (inhoud van type fotospecial, blok maken, flipped table van velden)
  3. Voeg het veld afbeelding toe Focal Point 150 x 150
  4. Zorg ervoor dat je de tweede of derde foto neemt en niet de eerste.
  5. Plaats het blok op de site, enkel de frontpage
  6. Gebruik CSS voor het geheel wat op te maken.

Hieronder de code die ik gebruikte, maar laat je vooral gaan en maak iets uniek :)

table {
    border: solid 20px;
}
table img
{
  padding:20px;
  box-shadow:0 0 5px 5px #006400;
}