Les 13

Drupalversie: 
Drupal 8

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.

Voorbereiding:

  1. Schakel de core-module Responsive Images in

  1. Download hier de nodige plugins en plaats deze op de server in de map libraries
  2. Download, installeer en activeer volgende modules:
    1. Masonry API
    2. Masonry Views
    3. Views infinite scroll

Overzicht

  1. Maak een nieuw overzicht met de volgende kenmerken:
    1. Naam: Fotospecial Overzicht
    2. Inhoud van het type Fotospecial
    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! --> helaas, het werkt niet. Er zit namelijk een fout bij het gebruik van bepaalde thema's. Hiervoor bestaat een patch. De ideale moment om een patch te leren toepassen.

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.

Private file system

Een fout dit nogal vaak verschijnt: er is geen private map ingesteld. Die map wordt gebruikt voor het plaatsten van bestanden die door anonieme gebruikers worden geüpload. Denk hier aan webform waar je gebruikers de mogelijkheid kan geven tot het uploaden van afbeeldingen zoals een profielfoto. Naast webform heeft deze map nog meer functies. Het is dus aan te raden deze fout even recht te zetten.

  1. Connecteer met de server via Filezilla
  2. Maak een nieuwe map aan 'private' ter hoogte van de core-map:

  1. Geef deze map nu ook de juiste rechten:

  1. Laat fileZilla even staan en connecteer met de server via cpanel.
  2. Zoek de map Default (zit in sites) en pas de rechten aan naar 0755
  3. Open Default en pas de rechten van settings.php aan naar 0755
  4. Bewerk met de Code Editor dit bestand, scroll helemaal onderaan en voeg volgende regel toe, uiteraard geprojecteerd op jouw site:

  1. Herlees op schrijffouten en sla het bestand op.
  2. Pas de rechten opnieuw aan van settings.php naar 0444, Default zou automatisch aangepast worden.
  3. Ga naar jouw site en leeg de caches.
  4. Kijk even naar de statusrapportage of er geen fouten worden getoond betreffende de laatste wijzigingen
  5. Ga naar Instellingen - Media - Bestandssysteem

  1. Je zal zien dat de private map ingesteld is:

Responsive Tables Filter

  1. Installeer en activeer de module Responsive Tables Filter
  2. Schakel bij de instellingen van CKEditor de filter in:

  1. We bewerken de body van de node op de frontpage. Voeg een tabel in en neem volgende instellingen over:

  1. Vul de tabel in. Gebruik het voorbeeld hieronder. Zoek misschien zes nieuwe foto's op Pixabay?

  1. De CSS die je ziet verschijnen heeft natuurlijk te maken met ons blok er net onder. Je zou dit kunnen oplossen door:
    1. De CSS uit te schakelen
    2. Het blok te verbergen en de CSS uit te schakelen
  2. Test de Responsiviteit uit door het venster te verkleinen

PrevNext

Aangenaam voor de gebruiker is een volgende en vorige knop. Wanneer men naar de categorie Food kijkt is het leuk om met een druk op de knop volgende naar de volgende categorie te springen.

  1. Installeer de module PrevNext
  2. Ga naar de instellingen van deze module en schakel het inhoudstype Fotospecial in

  1. Bij de weergave van het inhoudstype Fotospecial geef je de knoppen een logische plaats

  1. Tot slot een beetje CSS, pas enkel toe op fotospecial

#prevnext-previous.prevnext-element.previous
{
  float:left;
  padding-right:10px;
}

  1. Kijk je naar de laatste node in deze reeks dan hebben we een probleem met de vorige knop --> kijk eens of je de oplossing kan vinden.

EVA

Deze module is een alternatief op de view field module.

  1. Installeer en activeer de module EVA (Entity views Attachement)
  2. Zoek nu een 12-tal foto's rond het thema City (Pixabay) of gebruik deze.
  3. Maak een nieuw inhoudstype aan:
    1. Naam: City
    2. Velden: Afbeeldingen, onbeperkt
  4. Voeg inhoud toe van het type City en plaats de 12 foto's in de node
  5. Maak een nieuw overzicht aan:
    1. Label: EVA fotospecial
    2. Inhoud van het type City
    3. Raster van velden
  6. Voeg het veld afbeelding toe: afbeeldingsstijl focal point 150 x 150, meervoudige veldinstellingen: alle waarden in dezelfde rij afvinken
  7. Titel: uitsluiten van weergave
  8. Voeg nu een EVA toe:

  1. Controleer de settings:

  1. Ga naar de weergave van het inhoudstype Fotospecial
  2. Zorg ervoor dat het EVA-veld in een nieuw tabblad komt te staan 'extra pictures':

  1. Het grootste probleem dat we nu nog moeten oplossen is het feit dat deze afbeeldingen nu bij alle categorieën te zien zijn. Zorgen voor de volgende les.