Maak zelf een positioner.

Om velden onderling te schikken op een pagina zijn er veel mogelijkheden (Display Suite, Panels, Panopoly, Layout Builder, CSS met kolommen,...)

We gaan echter zelf, stapsgewijs, een gebruiksvriendelijke tool maken om 4 velden ordentelijk te positioneren. Andere velden in het inhoudstype kunnen in combinatie gebruikt worden en zullen de volledige breedte innemen van het scherm (boven en onder deze 4).

We kiezen voor volgende opties. De velden 1,2 en 3,4 hebben dezelfde breedte, die we kunnen instellen. De som van de hoogte van beide kolommen is gelijk. We kunnen de hoogte van veld 1 en 3 instellen.

Vooraleer we alles toepassen op velden van een inhoudstype gaan we eerst wat spelen met CSS. We maken een basic page aan. Maak 4 divs en geef hen een class. Zet een achtergrondkleur.

<style type="text/css">
.part1{
background:green;
}
.part2{
background:blue;
}
.part3{
background:orange;
}
.part4{
background:red;
}

</style>
<div class="part1">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
Enzovoort...

Nu gaan we de blokken een breedte en hoogte meegeven. Om te maken dat de afmetingen van de blokken wordt gerespecteerd, ongeacht de inhoud, zetten we de overflow op auto. Merk ook de verkorte schrijfwijze op om de 4 classes tegelijkertijd aan te spreken. Voor de hoogte gebruiken we vh. (vertical height). part 1 en 2 zijn floating om deel 3 en 4 ernaast toe te laten. Deel 2 moet echter eerst clearen anders komt hij zelf naast deel 1...

<style type="text/css">
[class^="part"] {
padding:1%;
overflow:auto;
}
.part1{
background:green;
width:60%;
height:80vh;
float:left;
}
.part2{
background:blue;
width:60%;
height:20vh;
clear:both;
float:left;
}
.part3{
background:orange;
width:30%;
height:40vh;
}
.part4{
background:red;
width:30%;
height:60vh;
}
</style>

Aangezien de hoogte en de breedte van de blokken onderling van elkaar afhangt, gaan we variabelen gebruiken om dit gebruiksvriendelijk te maken.

We gaan php gebruiken. Installeer daarvoor de php filter module. (https://www.drupal.org/project/php). Maak in de tekstformaten zelf een php format aan. (vb PHP positioner). Doe dit want er zit een bugje in het meegeleverde php formaat.

Zet je tekstveld om naar dit formaat. Vanaf nu kan je php schrijven. Je gebruikt nu de variabelen in de CSS. Je kunt er ook mee rekenen.. (Ik gebruik geen 100 voor de breedte omdat er marges en padding is.)

<?php
$part1width=60;
$part1height=80;
$part3height=40;
?>

.part1{
background:green;
width:<?php echo $part1width?>%;
height:80vh;
float:left;
}

.part3{
background:orange;
width:<?php echo 95-$part1width?>%;
height:40vh;
}

Dit moet je nu ook doen voor de hoogte en andere breedtes.. Zorg er ook voor dat voor kleine schermen, de volledige breedte wordt gebruikt. Alles komt dan mooi onder elkaar. (met @media)

We zijn dus in staat om door in de kop van ons bestand variabele waarden in te voeren. Willen we dit toepassen op nodes van een inhoudstype, dan gebruiken we beter een blok. Maak dus een blok aan en pas dit toe op de nodes van het inhoudstype.

Maak een inhoudstype met minstens 4 velden.

Gebruik 'Field Formatter Class' om de velden een class mee te geven. (part1, part2, part3 en part4). Merk ook op dat ik part3 onder part 1 zet. Als je voor kleine schermen de float weglaat, komen de velden in de volgorde die je in je inhoudstype gebruikt. 

Onze 'positioner' werkt... Voor de huis- en tuingebruiker is het natuurlijk niet zo evident om waarden te gaan invoeren in de php code.. Vandaar dat we velden gaan aanmaken in het blok. We lezen dan de variabelen in aan de hand van deze velden.

De code spreekt voor zich...Een blok wordt geladen door de machinenaam van het blok te gebruiken. Dit moet je bekijken bij de blokken.. Ik lees de velden in, bereken de waarden en schrijf die weg naar de CSS. Er zit nog wat CSS bij om afbeeldingen mooi in het midden te houden. Je kunt ook de totale breedte instellen.

<?php
$block = \Drupal\block\Entity\Block::load(positionerblock);
$uuid = $block->getPlugin()->getDerivativeId();
$block_content = \Drupal::service('entity.repository')->loadEntityByUuid('block_content', $uuid);
if ($block_content) {
  $totalheight= $block_content->field_totalheight->value;
  $totalwidth= $block_content->field_totalwidth->value;
  $part1height= $block_content->field_part1height->value;
  $part1width= $block_content->field_part1width->value;
  $part3height= $block_content->field_part3height->value;
  }

// start calculating

$part1height=$totalheight/100*$part1height;
$part2height=$totalheight - $part1height;
$part3height=$totalheight/100*$part3height;
$part4height=$totalheight-$part3height;

$part1width=$totalwidth/100*$part1width;
$part2width=$part1width;
$part3width=$totalwidth-$part1width;
$part4width=$part3width;

?>

<style type="text/css">
[class^="part"] {
padding:1%;
overflow:auto;
}
[class^="part"] img{
display:block;
width:100%;
object-fit:cover !important;
margin-left:auto;
margin-right:auto;
}

.part1{
position:relative;
float:left;
width:<?php echo $part1width ?>%;
max-height:<?php echo $part1height ?>vh;
}

.part2{
clear:both;
float:left;
width:<?php echo $part2width ?>%;
max-height:<?php echo $part2height?>vh;
}
.part3{
width:<?php echo $part3width?>%;
max-height:<?php echo $part3height ?>vh;
}
.part4{
width:<?php echo $part4width?>%;
max-height:<?php echo $part4height?>vh;
}

.part1 img{
height:<?php echo $part1height-4?>vh;
}
.part2 img{
height:<?php echo $part2height-4?>vh;
}
.part3 img{
height:<?php echo $part3height-4?>vh;
}
.part4 img{
height:<?php echo $part4height-4?>vh;
}

@media screen and (min-width:1000px){
[class^="part"]{
font-size:1em !important;
}

}
@media screen and (max-width:999px) and (min-width:681px){
[class^="part"]{
font-size:0.8em !important;
}
}
@media screen and (max-width:680px){
[class^="part"]{
font-size:0.7em;
width:100% !important;
max-height:unset !important;
}
}

</style>

Deze Positioner kan uitgebreid worden naar meer dan 4 velden en nog meer mogelijkheden. Zo kan je bijvoorbeeld een achtergrondkleur instellen met de colorfield module (https://www.drupal.org/project/color_field). Voor de liefhebbers...

Met onderstaande link krijg je het bloktype cadeau..Je moet wel nog een blok maken en de waarden invullen...

https://drupal8.support/sites/default/files/pictures/positioner_block.tar.gz