Responsive kolommen

Moeilijkheidsgraad

Afbeeldingen in een view responsive voorstellen is makkelijk... Je zet de view op onopgemaakte HTML en je maakt dat het afbeeldingsveld floating staat. Wil je andere velden integreren, dan kan je dit doen via het herschrijven van het afbeeldingsveld.

Er is echter één probleem. De afbeeldingen moeten van dezelfde hoogte zijn, anders haakt de volgende afbeelding aan de onderkant van de vorige. Je kunt dit oplossen door een afbeeldingsstijl te gebruiken waarbij alle afbeeldingen dezelfde afmeting hebben (schalen en bijsnijden). Anders krijg je iets zoals hieronder.

Screen001712.png

Een andere oplossing is om een kant en klare module te nemen. Shuffle bijvoorbeeld voldoet aan veel verwachtingen en de hoogte van de afbeeldingen hoeft niet gelijk te zijn. ----Je hoeft niet per se te filteren met Shuflle---. Maak gewoon gebruik van hun CSS en Javacript. Dit levert een mooie voorstelling op van de afbeeldingen, met bijhorende animatie als het scherm resized. Echter... Bij Shuffle kan je de kolombreedte instellen in pixels. ls je bvb 250 px neemt dan zal bij een schermbreedte van 900 px, er drie kolommen met afbeeldingen worden getoond. Bij 600px, zullen er 2 zijn. Telkens een veelvoud van 250 px. De afbeeldingen zijn niet echt responsive en je hebt meestal een lege ruimte, rechts dat niet wordt opgevuld. Het is het aantal kolommen dat varieert.

Wij gaan daarom werken met kolommen én afbeeldingen die resizen. 

Het aantal kolommen wordt met @media ingesteld. Hier 4 kolommen...

Screen001714.png

3 kolommen als het scherm smaller wordt.
Screen001715.png

Yep ... 2 kolommen.


Screen001716.png

Hier zie je wat ik bedoel. Weer 2 kolommen, niettegenstaande dat het scherm smaller wordt. Maar het breekpunt werd nog niet bereikt. De afbeeldingen zijn hier wel kleiner geworden. We hebben dus ook responsive afbeeldingen in combinatie met een variabel kolomsysteem.


Screen001717.png

De CSS. In de view moet je niets van classes instellen... je verwijst gewoon naar de machinenaam van je view. (Bij mij is dit view-responsive-photo-grid2). Je kunt dit onder andere met de element inspector van je browser achterhalen. Wil je een ruimte tussen de kolommen, stel dan de gap breedte in. Wil je een ruimte tussen de afbeeldingen in dezelfde kolom, stel dan een top-margin in bij de afbeeldingen.

.view-responsive-photo-grid2{
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

.view-responsive-photo-grid2 img {
  width: 100% !important;
  height: auto !important;
 }
 @media (max-width: 1200px) {
 .view-responsive-photo-grid2 {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
.view-responsive-photo-grid2 {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
 .view-responsive-photo-grid2 {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
.view-responsive-photo-grid2{
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}