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. Download de plugin voor Image Field Zoom en plaats deze in de map libraries
2. Download en installeer de module Image Field Zoom
3. Open de weergave van het inhoudstype Bands
4. Verander het formaat van het veld afbeelding naar ImageZoom

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

Oefening

1. Maak een nieuw inhoudstype aan. Gebruik onderstaande afbeeldingen om dat tot een goed einde te brengen:

2. In onderstaande afbeelding zie je het veld Band. Dit is een referentie naar inhoud, meer bepaald 'Band'.

3. Bij de Formulierweergave pas je het veld Band aan:

4. Voeg nu vier keer inhoud toe van het type Greatest Hits

• Node 1:
  • Paint it Black
  • https://youtu.be/O4irXQhgMqg
  • The Rolling Stones
• Node 2:
  • Yellow Submarine
  • https://youtu.be/vefJAtG-ZKI
  • The Beatles
• Node 3:
  • Wish You Where Here
  • https://youtu.be/IXdNnw99-Ic
  • Pink Floyd
• Node 4:
  • Hey You
  • https://youtu.be/TFjmvfRvjTc
  • Pink Floyd

5. Om de Greatest hits mooi weer te geven maken we een overzicht aan:

6. Voeg het veld filmpje toe:

7. Voeg ook het veld band toe, pas hier de HTML van het veld aan naar H1

8. Klik bij de velden op titel om ook hier de HTML van veld aan te passen, H2

9. Om het geheel mooier te maken plaatsen we wat CSS op het overzicht. Aangezien we bezig zijn met het overzicht zetten we klasse, die we straks maken, al op de juiste plaats:

10. Maak nu een nieuwe CSS-regel aan

.filmpjes{
    float:left;
    border:2px solid rgb(251, 90, 2);
    border-radius:15px;
    padding:5px;
    margin:10px;
    box-shadow: 5px 5px 10px #888888;
    height:483px;
    width:350px;
    text-align:center;
}

11. Resultaat:

Shuffle Grid

Een zeer visuele module om afbeeldingen weer te geven. Wij gaan deze specifiek gebruiken in een overzicht de verschillende muzikanten weer te geven maar dan wel per instrument.

1. Download en installeer de module
2. Een plugin is hier zeker nodig, voor de sport krijg je plugin niet. Klassikaal lossen we dit probleem op.
3. Maak een nieuwe afbeeldingsstijl aan:

4. Maak een nieuwe CSS-regel aan "CSS overzicht muzikanten". Plak er de volgende code in:

.shufflefoto img
{
  padding:5px;
  border:solid;
  border-color:#FF8C00;
}
ul.inline, ul.links.inline
{
    display: inline;
    padding-left: 0;
    margin-left: -5%;
}

5. Maak nu een nieuw overzicht aan dat voldoet aan volgende eigenschappen:
   1. Naam: Muzikanten
   2. Inhoud van het type bandleden
   3. Pagina maken
   4. Formaat: Suffle Grid van Velden
   5. Geen paginering
   6. Menulink in het hoofdmenu
6. Voeg nu het veld afbeelding toe met als stijl focal point 250x350 en link naar de inhoud
7. Open eens de instellingen van de shuffle grid. Onderaan staat zeer interesante lectuur!

8. Blijkbaar kan je automatisch filteren indien er aan een aantal voorwaarden wordt voldaan:
   1. Er moet een veld met referentie naar inhoud zijn toegevoegd
   2. Dat veld moet meervoudig zijn en de seperator moet een verticale lijn zijn

-->

9. Voeg het veld instrument toe
10. Zet de meervoudige veldinstellingen juist
11. Verberg het veld instrument
12. Verberg ook het veld titel
13. Keer terug naar de instellingen van de Shuffle Grid en stel juist in
14. Open nog even de instellingen van het afbeeldingsveld en vul de css klasse aan (shufflefoto)

Waterfall en EVA

Ik schets even waar we naartoe willen. Als ik kijk naar een bepaalde Band dan zie ik op dit moment één foto met daarop image field zoom toegpast. Leuk maar ik wil veel meer foto's zien horende bij die band. Ik wil mij echter niet bezighouden met het maken van afbeeldingsstijlen en ik maak mij liever geen zorgen over responsiviteit. Om dit te verwezenlijken hebben we wel wat werk. Hieronder een kleine timetable die we vervoglens in stappen uitwerken:

• Veld toevoegen aan inhoudstype
• Inhoud toevoegen bij de bands
• Een overzicht maken en instellen van het type Waterfall
• Zorgen dat die view zichtbaar wordt bij de band (EVA)
• Zorgen dat er enkele foto's van de bands die bekeken wordt zichtbaar is (contextuele filter)

En nu concreet:

1. Download de extra afbeeldingen naar de computer en pak ze uit
2. Download en installeer eerst de module EVA: Entity Views Attachement en Views Waterfall Display
3. Maak een nieuw veld aan bij het inhoudstype Band:
   1. Extra afbeeldingen, waardes onbeperkt
   2. Uitgesloten van weergave
4. Bewerkt de inhoud van de verschillende bands en voeg de extra afbeeldingen toe, let hierbij op het vermelden van de titel en de alt-tekst
5. Maak een nieuw overzicht met volgende kenmerken:
   1. Naam: extra afbeeldingen bands
   2. Inhoud van het type bands
   3. Pagina maken
   4. Waterfall Display van velden
   5. Geen menulink
   6. Geen paginering
6. Voeg nu het veld afbeelding toe bij de velden en stel in:

7. Uiteindelijk heb je twee velden, verberg nu ook titel

8. Op dit moment hebben we wel een werkend overzicht maar het is nog niet zichtbaar voor de bezoeker. Het is dan ook een specialleke omdat we geen menu-link leggen en we maken er ook geen blok van. EVA komt hier op de proppen.
9. Via de knop +Toevoegen kan je EVA toevoegen

10. Concreet merk je nu niet zoveel verschil. Bovenaan heb je de page en daarnaast de EVA. Beide weergaven hebben exact dezelfde instellingen. Zeer goed.
11. De EVA moet nu wel nog concreet aan het juiste inhoudstype gekoppeld worden:

12. Sla alles op en open de weergave van het inhoudstype band, je merkt daar een nieuw veld op. Controleer even of deze niet bij de uitgeschakelde staat:

13. Bekijk één van de bands, je merkt dat de foto's zichtbaar zijn. Maar helaas, het zijn ALLE foto's en niet enkele die van de band waar je naar kijkt.
14. Open de instellingen van het overzicht bij de EVA-weergave voegen we een contextuele filter toe: