Tekst in de foto

Vroeger had ik een stukje in de pagina met Views Slideshow, maar dat werkt niet meer. Toen wilde ik graag een stukje met veel foto's op een rij. Dat kan prima met Views (tabel, raster, lijst etc.) maar ik wilde de bijhorende tekst graag op de foto hebben. Hoe dat moet , kon ik afkijken bij Bob van Mustardseed Media. Hij maakt een ongeformatterde lijst in Views en neemt daar velden in die hij niet laat zien (Uitsluiten van weergave). Dan kun je de velden nog wel ergens laten terugkomen.

Een veld dat je wel laat zien is de fotonaam want die moet op de foto verschijnen. Hoe je die fotonaam laat zien, kun je bepalen door het veld te laten herschrijven. Ik heb er de volgende code van gemaakt:

<div class="fotoveld">
<div class="foto-zelf">{{ field_media_image_4 }}</div>
<div class= "fotonaam">{{ field_fotonaam }}</div>
</div>

Het fotoveld is een omvattende div die nog niet bestond en die moet position: relative krijgen. 

{{ field_media_image_4 }} is de foto die ik uitsloot van weergave, maar op deze manier toch weer terugkomt. Div eromheen voor block-weergave.

<div class= "fotonaam">{{ field_fotonaam }}</div> is de div die position: absolute krijgt. De achtergrond geregeld in css: 

   position: absolute;
   bottom: 10px;
   width: 300px;
   background: rgba(4, 170, 256, 0.3);
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   color: #fff;
   font-weight: bold;
   font-size: 1.1em;

De div waar de div fotoveld onder valt, dus nog een niveau hoger, krijgt display: flex. Daardoor wordt de ongeformatterde lijst een soort raster dat zich aanpast aan de breedte van het scherm.

display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 20px;

Zo'n view is aangemaakt als block. Dat block komt in een contenttype binnen door een paragraaf 'fotogalerie'. Die paragraaf heeft maar twee velden. Eén ervan is een Viewsreference field, waarin je kunt kiezen uit de diverse blocks die ik zo heb gemaakt.