Logo Magzmaker


Fotoalbums

Voor een fotoserie of fotoverslag kun je een fotoalbum gebruiken. Je kunt hiervoor kiezen uit twee typen contentblokken: 

  • Een fotoslider: een horizontaal roterende serie foto's
  • Een masonry: een fotocollage van foto's naast en onder elkaar
Maatbekers

Fotoslider

Een fotoslider met een horizontaal roterende serie foto's

Slick slider  
Instellen slider details    
Responsive instellingen  
 

Masonry

Een masonry is een fotocollage van foto's naast en onder elkaar

Fotocollage met de masonry  
1 foto met vergroting  


Fotosliders

Een nieuwe fotoslider toevoegen of foto's in de slider aanpassen
Ga naar de pagina waarop je de fotoslider wilt toevoegen of aanpassen en zorg dat de pagina in bewerk-modus staat. Bovenin de paarse balk kun je klikken op TERUG NAAR BEWERKEN om de pagina in bewerk-modus te zetten. Je ziet nu de hulplijnen van de secties op de pagina. Rechts van elk content-blok wordt de bewerk-knop  zichtbaar wanneer je met de muis over het betreffende blok gaat.

Een contentblok staat altijd in een sectie. Als je begonnen bent met een lege pagina voeg dan eerst een sectie toe om daarna een fotoslider toe te kunnen voegen. Lees hier meer over secties en hoe je die toevoegt.

Slick slider
  • Klik binnen de sectie op + Add block en kies Slick slider
  • Bij een bestaande fotoslider klik je op  en dan op instellen
  • Open de tab met de gewenste fotoverhouding of open de juiste tab om bestaande foto's te vervangen. In onderstaand voorbeeld kiezen we voor een 16:6 verhouding, de foto's die je toevoegt worden in deze verhouding getoond in de slider.
Fotoslider tabs fotoformaten

  • Onder de tab met de gewenste fotoverhouding klik je op de paarse knop Media toevoegen
  • De Media manager wordt geopend, kies een bestaand beeld of upload nieuw beeld in de Media manager
    Meer weten over de Media manager en het uploaden en instellen van nieuw beeld? Kijk op de pagina Media manager
  • De geüploade foto's zullen in de gekozen fotoverhouding worden getoond, je hoeft ze niet zelf op de juiste maat te maken
  • Bij een een fotoverhouding die breed en heel laag is zal een deel van de foto aan de boven- en onderkant wegvallen
  • Als de foto's zijn toegevoegd kun je de instellingen van de slider instellen of aanpassen onder de tab Slider details.
Instellen van de slider details 
  • SlidesToShow / Slides weergeven: hoeveel slides wil je tegelijk op de pagina zien? Dit kan 1 foto zijn (bekijk voorbeeld), maar ook bijv. 3 naast elkaar (bekijk voorbeeld)
  • SlidesToScroll / Slides scroll per keer: hoeveel slides wil je per keer laten opschuiven. Wanneer je maar 1 foto tegelijk weergeeft zal je ook maar 1 foto willen opschuiven. Als je kiest voor 3 foto's tegelijk weergeven kun je ook 1 foto opschuiven dan verdwijnt er steeds 1 foto en komt er 1 nieuwe foto bij. Als je per keer 3 foto's opschuift worden in een keer 3 nieuwe foto's getoond.
  • Slider breedte
    Volle breedte: Laat Slider breedte op 100% staan als je de foto op volle breedte wilt tonen. (kan met en zonder optie  fade aangevinkt).
    Witruimte aan de zijkant: wil je de slider smaller met ruimte aan de zijkanten, stel dit dan in onder de tab Instellingen bij marge links en marge rechts (kan met en zonder optie  fade aangevinkt).
    Gecentreerd met preview: Gebruik je een minder brede Slider breedte, bijv. 96%, vink dan Center Modus aan om de slider te centreren. Door de kleinere afmeting zie je nu aan de zijkanten een kleine stukje van de volgende foto. (kan niet met optie  fade aangevinkt).)
    Meerdere foto's met kleine tussenruimte: Heb je bij SlidesToShow ingesteld dat je meerdere foto's naast elkaar wilt tonen dan kun je de Slider breedte op bijv. 99% zetten om een kleine witruimte tussen de foto's te creeëren. (kan niet met optie  fade aangevinkt).
Slider breedte 100%

Slider breedte 100% - fade aan- of uitgevinkt

Slider breedte 100% - margin link en margin rechts 10%

Slider breedte 100% - fade aan- of uitgevinkt - Bij tab Instellingen margin links en rechts 10%

Slider breedte 99% - Center-modus aangevinkt - Fade uitgevinkt

Slider breedte 99% - fade uitgevinkt - Center-modus aangevinkt

SlidesTOShow 3 - Slider breedte 100%

SlidesToShow op 3 - Slider breedte 100% - Fade uitgevinkt

SlidesTOShow 3 - Slider breedte 99% - Center-modus aangevinkt

SlidesToShow op 3 - Slider breedte 99% - fade uitgevinkt - Center-modus aangevinkt

SlidesTOShow 3 - Slider breedte 90% - Center-modus - Fade uitgevinkt

SlidesToShow op 3 - Slider breedte 90% - fade uitgevinkt - Center-modus aangevinkt

 
  • Slider hoogte - Laat dit op auto staan dan blijven de foto's in verhouding.
  • Speed - de snelheid van het overgangs-effect naar de volgende foto
  • Dots of pijlen - navigeer je liever door de foto's met de pijlen links en rechts of door onder de foto's op de bolletjes te klikken? Beide tonen kan ook. Je kunt ook geen van beide tonen, zorg dan dat autoplay aangevinkt staat.
  • Center modus - dit centreert de slider wanneer je bij Slider breedte minder dan 100% hebt ingevuld en toont een stukje van de vorige en volgende foto aan de zijkanten
  • Autoplay - laat de slider automatisch naar de volgende foto overgaan. Wanneer je dit uitvinkt heb je de pijlen of de dots nodig om door de foto's te navigeren.
  • Autoplay speed - de tijd voordat de volgende foto getoond wordt wanneer Autoplay is ingeschakeld
  • Fade - met deze optie aangevinkt vloeien de foto's in elkaar over - fade effect
    met de optie uitgevinkt schuift de nieuwe foto vanaf de rechterkant in beeld - slide effect.
    Het fade effect (fade aangevinkt) is alleen mogelijk met SlidesToShow 1, met meerdere foto's gebruikt je het slide-effect (fade uitgevinkt)
  • Infinite - aangevinkt zorgt dit dat na de laatste de eerste weer wordt getoond.
    Uitgevinkt wordt na de laatste foto de een na laatste getoond en gaat zo terug tot de eerste foto.
  • Slider onderschrift - de tekst die in de media manager bij de alternatieve tekst in ingevuld wordt onder de foto getoond

Blok instellingen

De instellingen in de tabs Instellingen, Animatie en Geavanceerd zijn hetzelfde als in de andere contentblokken. Kijk voor meer informatie over deze blok instellingen op de pagina Pagina bewerken

Responsive instellingen

Als je bij de slider details hebt ingesteld dat je meerdere foto's wilt tonen bijv. 3 naast elkaar, dan zijn de 3 foto's op desktop formaat goed te zien, maar op het scherm van een mobiele telefoon worden de foto's erg klein. Je kunt dan instellen dat je er ipv 3 maar 2 of 1 naast elkaar getoond wilt hebben.

In het editscherm onder de tab Geavanceerd kun je aanpassingen doen voor het aantal foto's dat in responsive weergave wordt getoond.

Je kunt per schermbreedte aangeven hoeveel afbeeldingen er getoond moeten worden, voor de verschillende breedtes heb je steeds de opties:

  • SlidesRoShow: / hoeveel foto's moeten getoond worden
  • SlidesRoScroll: / hoeveel foto's wil je tegelijk verplaatsen

Masonry

Een masonry is een raster waarin foto's worden geplaatst. Het raster heeft geen gelijke indeling maar past zich aan aan de inhoud. De foto's hoeven niet van dezelfde afmeting te zijn, het maakt het zelfs speelser door het gebruik van verschillende formaten. Je kunt aangeven hoeveel foto's je horizontaal wilt tonen, vervolgens vult het systeem de beschikbare ruimte met de foto's. (Bekijk voorbeeld).

Voorbeeld Masonry

Door op een foto te klikken wordt een vergroting geopend. Wil je een onderschrift bij een foto zorg dan dat bij het uploaden van de foto in de Media manager een alternatieve tekst is ingevuld, deze wordt gebruikt als onderschrift. Lees op deze pagina meer over de alternatieve tekst in de Media manager

Masonry foto collage

Een nieuwe masonry toevoegen of foto's in een bestaande masonry aanpassen
Zet de pagina in bewerk-modus en zorg dat er een sectie op de pagina staat waarin je de masonry toe kunt voegen. Lees aan het begin van deze pagina meer hierover als je hier nog niet bekend mee bent.

  • Klik binnen de sectie op + Add block en kies Masonry
  • Bij een bestaande Masonry klik je op   en dan op instellen
  • Kies hoeveel foto's je horizontaal naast elkaar wilt tonen op verschillende schermformaten; op een klein scherm wil je er waarschijnlijk minder als op een groot scherm
  • Voeg een afbeelding toe via de paarse knop Media toevoegen.
    Via de Media manager kies je bestaand beeld of upload nieuw beeld.
    Meer weten over de Media manager en het uploaden en instellen van nieuw beeld? Kijk op de pagina Media manager

 

Blok instellingen
De instellingen in de tabs Instellingen, Animatie en Geavanceerd zijn hetzelfde als in de andere content-blokken. Kijk voor meer informatie over deze blok instellingen op de pagina Pagina bewerken

Masonry met 1 foto

Het kan soms goed zijn als je een kleine afbeelding op de pagina kunt vergroten om deze beter te kunnen bekijken. Omdat de foto in een masonry aanklikbaar is voor een vergroting kun je ook een masonry maken met maar 1 foto erin.

  • Voeg een masonry blok toe zoals hierboven beschreven
  • Zet de instellingen voor het aantal foto's op alle schermen op 1
  • Voeg eventueel een teksblok toe met een uitlegtekstje onder de foto, zie voorbeeld hiernaast.

Klik op de foto om een vergroting te bekijken