Maak zelf een fotocollage

Moeilijkheidsgraad

Er zijn heel wat modules die afbeeldingen op een mooie manier voorstellen. Een fotocollage waarbij je zelf bepaalt hoe die er moet uit zien is, is er volgens mij nog niet.

Deze bespreking zal zowel de afbeeldingen in een node als de afbeeldingen in een view behandelen. Beiden hebben een totaal ander principe, maar de CSS blijft het zelfde.

1) Fotocollage van meerdere afbeeldingen in een view.

We maken onderstaande collage. Bij kleine schermen komen de afbeeldingen gewoon onder elkaar. Alles werkt prima, maar in de Internet Explorer is er niet altijd een ideale breedte-hoogte verhouding.


Screen001650.png

Maak een view, waarbij je het Resultatenteller veld gebruikt. Dit genereert een nummer per afbeelding. Voor meervoudige afbeeldingsvelden zet je de afbeeldingen als aparte rijen.

Screen001648.png

Daarna gaan we het veld herschrijven. We gebruiken de tokens.


Screen001649.png

Elke afbeelding krijgt nu een aparte klasse.

Screen001651.png

Nu moet je nog de CSS toepassen natuurlijk. Ik heb er nog wat hover effecten aan toegevoegd. Ik kies voor relatieve positionering en kijk dan hoeveel de afbeelding moet opgeschoven worden naar boven en naar links. Je doet dit best foto per foto. Je kijkt waar de volgende foto staat en met top en left zet je die waar je wilt. Een negatieve top waarde zet de afbeelding omhoog. Wil je dat naast de vorige afbeelding komt, dan zet je niets. Het staat op float, tenzij je een andere rij wilt aansnijden. Merk op dat ik voor de breedte, procenten gebruik. De site is dus responsive in de breedte.

Je kunt ook absolute positionering gebruiken. Dit is makkelijker maar je moet dan gans je site met menubalken en blokken in de gaten houden. Ook niet simpel.

Afbeeldingen die je in een gebied voorstelt geven altijd een verstoorde breedte-hoogte verhouding. Dit wordt opgelost door bij te snijden en te maken dat het past in het gebied dat je voor de foto voorziet. Onderstaande CSS zorgen voor het bijsnijden vanuit het centrum. De collage werd uitgewerkt voor 12 foto's. Zijn er meer, dan worden de andere foto's gewoon weergegeven, zoals je normaal de view instelt.

object-fit: cover;
object-position: center;

@media screen and (max-width:799px){
  .nummer1 img,.nummer2 img,.nummer3 img,.nummer4 img,.nummer5 img,.nummer6 img,.nummer7 img,.nummer8 img,.nummer9 img,.nummer10 img,.nummer11 img,.nummer12 img{
    
    width:80%;
    height:200px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
    float:none;
  }
}

@media screen and (min-width:800px){
  #main-content{
    height:1000px;
    overflow:hidden;
    }
.nummer1 img,.nummer2 img,.nummer3 img,.nummer4 img,.nummer5 img,.nummer6 img,.nummer7 img,.nummer8 img,.nummer9 img,.nummer10 img,.nummer11 img,.nummer12 img{
   position: relative;
   object-fit: cover;
   object-position: center;
   padding:2px;
   -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     }  
.nummer1 img{
  top:0;
  left:0;
  width: 50%;
  height: 200px;
  float:left;
     }
     .nummer1:hover img,.nummer2:hover img,.nummer3:hover img,.nummer4:hover img,.nummer5:hover img,.nummer6:hover img,.nummer7:hover img,.nummer8:hover img,.nummer9:hover img,.nummer10:hover img,.nummer11:hover img,.nummer12:hover img{
        -moz-transform: scale(0.99);
      -webkit-transform: scale(0.99);
      transform: scale(0.99);
      opacity:0.9;
          }

.nummer2 img{
  width:25%;
  height:300px;
  float:left;
    }
.nummer3 img{
  width:25%;
  height:150px;
  float:left;
 
}
.nummer4 img{
  width:25%;
  height:250px;
}
.nummer5 img{
  top:-200px;
  left:0;
  width:25%;
  height:150px;
  float:left;
  }
.nummer6 img{
   top:-200px;
  left:0;
  width:25%;
  height:100px;
  float:left;
  }
.nummer7 img{
  top:-100px;
  left:-25%;
  width:50%;
  height:300px;
  float:left;
  }
.nummer8 img{
  top:-350px;
  left:0;
  width:25%;
  height:250px;
  }
.nummer9 img{
  top:-550px;
  left:75%;
  width:25%;
  height:200px;
 }

.nummer10 img{
  top:-550px;
  float:left;
  width:33.33%;
  height:250px;
  float:left;
  }
.nummer11 img{
  top:-550px;
  width:33.33%;
  height:250px;
  float:left;
 }
.nummer12 img{
  top:-550px;
  width:33.33%;
  height:250px;
}
}

2) Fotocollage van meerdere afbeeldingen in één node.

Als we hetzelfde willen doen met een node, dan hebben we daar ofwel Computed fields of Token filter voor nodig. ik gebruik in dit voorbeeld het laatste.

Screen001644.png
We kunnen dezelfde CSS gebruiken als bij de view, maar hoe kunnen we nu aan elke foto afzonderlijk een andere klasse meegeven?


Screen001645.png

De token filter (moet je bij de tekstinstellingen aanvinken bvb bij volledige HTML) toont welke tokens je moet gebruiken. Elke afbeelding krijgt een volgnummer. Deze token info vind je bij je Help tab in Drupal!

[node:field_reisfoto_s_afbeeldingen:0] enz... met :entity er achter kan je de naam van het bestand te weten komen. Ik ga dit gebruiken om ook een link te leggen.

Screen001643.png

In je inhoudstype maak je een tekstveld aan en je schrijft daar in de broncode, de klasse om de figuur voor te stellen. Ik heb ook op elke foto een link gelegd om bij klikken hem te openen in de browser. Je doet dit voor alle afbeeldingen in je collage.

Screen001641.png

Als je dit gedaan hebt moet je het afbeeldingsveld uitschakelen in de weergave. Je hebt met de tokens de afbeeldingen herschreven.. Anders heb je ze dubbel.


Screen001642.png

In de inputweergave heb je wel een afbeeldingsveld natuurlijk.

Screen001640.png

Maak met de CSS injector dat je inhoudstype wordt aangesproken..


Screen001639.png

Bij kleinere schermen maakt de @media dat je geen collage krijgt. De afbeeldingen zouden te klein worden.

Screen001647.png