Les 13

Voorbereiding

  1. Schakel de core-module Responsive Images in

  1. Schakel de modules Masonry API en Masonry Views in. Dit zijn geen core-modules maar vanwege redenen die straks duidelijk worden heb ik deze reeds geïnstalleerd voor jullie.

  1. Download, installeer en activeer volgende modules:
    1. Background Images Formatter
    2. @font-your-face

Achtergrond afbeelding

Met deze optie zal het mogelijk zijn om een achtergrondfoto op jouw site te plaatsten. Je kan deze op elke pagina verschillend maken of eentje voor gans de site.

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. Download de foto's. Deze heb ik namelijk op voorhand al een beetje doorzichtig gemaakt.
  2. 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.
  2. Oefening: Gebruik de eerder gedownloade bestanden om nu bij Pink Floyd, The Rolling Stones en The Beatles een passende achtergrond te voorzien.

Masonry

Masonry, een top module voor het weergeven van foto's in de gekste formaten zonder deze allemaal te moeten gaan bijsnijden en schalen. Masonry past de indeling zo aan dat alle afbeeldingen mooi in mekaar passen. Deze is ook volledig responsive. We combineren dit ook met Infinity Scroll. Mensen die Pinterest gebruiken kennen dat wel. Je srolt naar beneden, je komt aan de bodem en nieuwe items worden geladen.

Overzicht

  1. Maak een nieuw overzicht met de volgende kenmerken:
    1. Naam: Foto's
    2. Inhoud van het type Bandleden
    3. Masonry van velden
    4. Menulink in het hoofdmenu
  1. Velden:
    1. Titel: uitsluiten van weergave
    2. Afbeelding:

  1. Zorg dat alle items worden weergegeven, doe dit bij paginering:

  1. Test uit!

Opmerking! Deze module werkt eigenlijk niet tenzij je een patch uitvoert. Dit is relatief complex. Daarom heb ik dat reeds voor jullie in orde gebracht. Voor de volledigheid heb ik het idee hieronder wel even opgeschreven.

De patch

  1. Klik hier om de patch eens van naderbij te bekijken.
  2. Concreet komt het er op neer om alles met een - te verwijderen en alles met een + toe te voegen. Dit dienen we in twee bestanden te doen. Het eenvoudigste hier is het gebruik van het cpanel. Log dus even in op het cpanel van jouw site.
  3. Met de filebrowser zoek je nu het bestand masonry_views. Voor mijn site zou het pad daar naartoe zijn: drupalacht.drupallearning.be/modules/masonry_views

Verwijder:

$container = '.view-' . Html::cleanCssIdentifier($view->storage->id()) . '.view-display-id-' . $view->current_display . ' > .view-content';

Voeg toe:

//$container = '.view-' . Html::cleanCssIdentifier($view->storage->id()) . '.view-display-id-' . $view->current_display . ' > .view-content';

$container = '.masonry-layout';
  1. Open nu het volgende bestand: views-view-masonry.html.twig (zit in templates)

Verwijder:

{% if title and grouping %}
  <h3>{{ title }}</h3>
  <div class="{{grouping_class}}">
{% endif %}

Voeg toe:

<div class="masonry-layout">
  {% if title and grouping %}
    <h3>{{ title }}</h3>
    <div class="{{grouping_class}}">
  {% endif %}

Verwijder:

{% for row in rows %}
  {%
  set row_classes = [
  default_row_class ? 'views-row',
  ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
{% endfor %}

Voeg toe:

{% for row in rows %}
    {%
    set row_classes = [
    default_row_class ? 'views-row',
    ]
    %}
    <div{{ row.attributes.addClass(row_classes) }}>
      {{ row.content }}
    </div>
  {% endfor %}

Verwijder:

{% if grouping %}
  </div>
{% endif %}

Voeg toe:

{% if grouping %}
    </div>
  {% endif %}
</div>

(zorg dat je op het einde van dit bestand geen lege regel hebt)

  1. Sla op, ga naar de site, leeg de caches en test uit.

@font-your-face

Wil je graag afwijken van steeds diezelfde lettertypen dan heb je een probleem. Er zijn maar zoveel fonts als dat de browser er ondersteund. Met Font Your Face heb je wel alternatieven. Deze lettertypen worden meegestuurd met de website. Er zijn er een deel betalend maar de Google Fonts kan je zo gebruiken.

  1. Nadat je de module hebt geïnstalleerd krijg je bij het uiterlijk een nieuw menu-item. Klik daar even op.

  1. Eerst moeten we de fonts importeren. Het zijn er een hoop, meer dan 4000 we zullen hier dus wat geduld moeten hebben.

  1. Klik je nu bij Browse dan zie je de verschillende fonts. Klik er enkele aan die je wil gebruiken. Let op, niet te veel want alle ingeschakelde fonts worden geladen in de site. Een grote hoeveelheid zou dus de snelheid van de site kunnen beïnvloeden.

  1. Klik je nu op de titel van het lettertype dan verkrijg je de css-code.

  1. Met de CSS injector kan je deze nu gaan implementeren. Concreet passen wij het lettertype van onze menulinken aan.
  2. Kopieer (zie stap 4) de code van het lettertype dat je graag wil gebruiken.
  3. Ga naar de Asset injector en open de reeds bestaande regel die onze menu-balk aanpaste. Plak de code nu op de juiste plaats:

  1. Sla op en bekijk even het resultaat. Afhankelijk van het gekozen lettertype zal de tekst nu te goot of te klein zijn. Dit kan je aanpassen in de CSS. In mijn geval heb ik volgende toegevoegd:

font-size:1.5em ⇒ dit wil zeggen anderhalve keer zo groot zoals het nu is.

  1. Sla op en bekijk opnieuw het resultaat. Pas bij wijze van oefening het lettertype opnieuw aan, kies dus een andere bij @font-your-face.
  2. Om dit even in te oefenen passen we ook het lettertype van de website-naam aan.

Blok toevoegen

We zorgen voor een nieuw blok dat enkel verschijnt op de front-page en in de right sidebar. In het blok kan je op het logo van Facebook klikken om vervolgens te worden doorverwezen naar een site.

  1. Ga naar Structuur - Blok-layout - Aangepast blok toevoegen
  2. Kies voor een Standaard blok
  3. Titel: Social
  4. Zoek online het Facebook-logo en sla dit even op. Liefst .png
  5. Neem eerst de tekst over (zie voorbeeld hierboven)
  6. Voeg daaronder nu het logo toe dat je eerder hebt opgeslagen

  1. Op de foto plaatsten we nu de link, dit mag gerust naar Google zijn. Gebruik hier de volledige link (http://www.......)

  1. Selecteer het geheel (Ctrl + A) en plaats alles gecentreerd.
  2. 'Volg ons op Facebook' zet je vet gedrukt
  3. Switch naar de broncode en pas het woord 'Social' aan. We geven deze een kleur en maken de titel wat groter:

  1. Wanneer je opslaat krijg je vervolgens de concrete instellingen van het blok. Zorg dat de titel niet wordt getoond, enkel zichtbaar op front en in de Right Sidebar.

  1. Tot slot pas je de body van de node even aan: 'Members' op een nieuwe lijn, gecentreerd en verkleind naar "8".

Extra

We passen de achtergrond aan van de frontpage. Dit op een iets andere manier dan eerder deze les.

Gebruik deze afbeelding: