Les 10

Drupalversie: 
Drupal 8

Denk aan de update van de kern!

Voorbereiding

  1. DOE DIT EERST: Download de plugin voor Image Field Zoom en plaats deze in de map libraries op de server. (Inloggegevens krijg je in de les)
  2. Download en installeer de volgende modules:
    1. Features
    2. Image Field Zoom
    3. @font-your-face
    4. Field group
  3. Bij onze nodes van het type 'Fotospecial' zou er wat body moeten ingevuld worden. We gaan hier hetzelfde nemen voor alle categorieën. Kopieer onderstaande en plak dit (als platte tekst!) dan 6 keer bij de verschillende categorieën:

Lorem ipsum dolor sit amet, odio eleifend aliquam, amet enim leo volutpat quam, quis non donec quis, lorem et id arcu pellentesque id feugiat. Ut maecenas risus sit est nunc, fermentum id vel, purus curabitur sociosqu lacus tellus ante. Sapien lacus vestibulum augue lorem bibendum, maecenas vehicula et pulvinar, consequat in pulvinar elementum cras purus in. Odio sed nulla quis, eget velit, facilisi vestibulum ut, voluptate sollicitudin non tempor nulla amet nemo. Consequat egestas nihil vivamus donec metus dapibus. Vitae facilisi placerat saepe risus, enim diam turpis, elit praesent consequat libero, et aenean nostrum in lobortis non wisi, ante quis consequat lacus quisque eget lacinia. Erat in mi rutrum sodales sit phasellus, tellus libero lacus aenean vestibulum volutpat magna, risus at ante lacinia, blandit ullamcorper lorem conubia. Magna tortor, amet nibh tristique nonummy tellus orci, non duis id sodales eget ut, ut a. Amet nullam.

  1. Gebruik de module Field Group om de verschillende categorieën in tabbladen onder te verdelen. Dit is een herhaling uit Drupal Basis. Gebruik onderstaande afbeeldingen als tips:

ALGEMENE TIP: open in een andere browser jouw site en log niet in, gebruik deze nu telkens om het resultaat te checken

  1. Gebruik onderstaande CSS om de weergave van de field group aangenaam te maken. Verander gerust de kleuren! (Diegene die ook de bolletjes wegkrijgt, verdient een extra punt)
  2. Zorg ervoor dat deze regel enkel van toepassing is op onze fotospecial-pagina's. Dit is belangrijk vanwege het laatste stukje code in deze regel.

.vertical-tabs__pane {
    margin: 0;
    border: none;
    padding: 15px;
    background:rgba(178, 34, 34, .7);
    color:#fff;
    font-size:1.2em;
    text-align:center
}
.vertical-tabs__menu-item{
    margin:10px;
    margin-top:0px;
    background:rgba(128,0,0,0.6);
    font-size:1.5em;
    border:none;
}
.vertical-tabs__menu-item a:hover {
    outline: 2px solid rgba(128,0,0,0.6);
    background:#888;
    color:#FFF;
}
.vertical-tabs__menu {
  border-top:none;
}
.vertical-tabs__menu-item a:focus{
  background:#888;
}
img
{
  margin-bottom:10px;
}

Image Field Zoom

Image Field Zoom is een leuke module. Deze laat je toe in te zoomen op een foto wanneer de gebruiker er met de muis over gaat. Bij de voorbereiding heb je gemerkt dat deze niet werkt zonder plugin, het is dus een third-party module.

  1. Open de weergave van het inhoudstype Fotospecial
  2. Verander het formaat van het veld afbeelding naar ImageZoom

  1. Klik vervolgens op het tandwiel voor de instellingen van Image Field Zoom. We bespreken deze klassikaal.

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. Deze code kan je nu injecteren met de Asset Injector. We passen dit concreet toe op onze bestaande regel van de field group:

(Zoals je merkt heb ik in bovenstaande code mijn tekengrootte en regelafstand aangepast omdat het anders niet echt leesbaar was.)

Features

Ik heb dit reeds gebruikt voor mijn lessen. Een inhoudstype met inhoud downloaden om op een andere site te installeren zoals je een module zou installeren. Voorlopig is het meesturen in Drupal 8 nog niet mogelijk. In een volgende les kunnen we misschien dezelfde oefening maken in Drupal 7.

  1. Open even de instellingen van deze module:

  1. Belangrijk hier is dat je op de andere site exact dezelfde modules en thema's hebt geïnstalleerd. Anders kan het inhoudstype niet worden geïnstalleerd. Zo hebben we een blok gemaakt rond fotospecial. Als je dit in thema A in het blokgebied 'Inhoud' plaats maar op de andere site heb je thema A niet geïnstalleerd dan zal het ook niet werken. In deze oefening exporteren we ons inhoudstype fotospecial. Let wel, enkel het inhoudstype.
  2. Klik op de titel 'Fotospecial'

  1. In het volgende venster kan je rechts alles aan- of uitvinken wat gerelateerd is aan dit type. Merk bijvoorbeeld op dat de gebruikte afbeelingsstijlen ook mee geëxporteerd kunnen worden. Hier zal je dus op de andere site de module focal point moeten hebben staan.

  1. Ben je klaar? Klik dan onderaan op Download Archive (Write is opslaan, dit naar de toekomst toe)

Search

Je kent het search-blok wel. Het is dat ding dat we standaard verbergen op onze site. Eigenlijk kan deze best handig zijn. Vooral wanneer je werkt met een informatieve site. Met deze module kan je de gebruiker jouw site laten doorzoeken.

  1. Om iets overzichtelijker te werken: verander het standaardthema opnieuw naar Professional Responsive Theme
  2. Controleer eerst of de anonieme gebruiker de rechten heeft om te mogen zoeken op jouw site:

  1. Bekijk even de instellingen van de zoekfunctie:

  1. We bespreken de instellingen klassikaal

  1. Geef het blok nu een plaats op de site en test uit
  2. Je kan ook een nieuwe menu-link leggen in het hoofdmenu. Soms is het zo dat je op de site niet echt meer een goede plaats hebt voor het plaatsten van het blok. Een link naar de zoekpagina is dan een alternatief.

Oefeningen

Als afsluiter van deze les een serie korte opdrachten ter herhaling.

  1. Zorg ervoor dat per categorie jouw favoriete foto wordt getoond als eerste foto bij de verschillende weergaves.
  2. Pas de CSS zodanig aan dat:
    1. De tekst van de verticale menu-linken groter is dan nu.
    2. De tekst van de verticale menu-linken een aangepast lettertype naar keuze krijgen
    3. De achtergrondkleuren van van de field group aangepast worden naar jouw eigen keuzes
  3. De titel die je ziet bij de verschillende categorieën geef je een lettertype naar keuze.
  4. Installeer de module Facebook Like Button
  5. Zorg ervoor dat er een Facebook like knop komt te staan bij de nodes van het type Fotospecial.
  6. Pas de toegangsrechten aan zodanig dat ook een anonieme gebruiker kan 'liken'