preprocess field page projet

This commit is contained in:
2023-07-11 20:00:14 +02:00
parent 0d3987c3fd
commit e9ef306ddc
6 changed files with 437 additions and 184 deletions
+113 -81
View File
@@ -2996,88 +2996,120 @@ a {
.path-node.page-node-type-projet .layout-container {
overflow: unset; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top {
padding-top: 2rem;
display: grid;
grid-template-columns: 1fr repeat(8, 1fr) 1fr; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle {
grid-column: 7 / span 9;
grid-row: 2;
margin: 0;
padding-right: 25%; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title {
font-family: "Source Code Pro";
font-size: 1.5rem;
font-weight: 500;
color: #009ee3; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodetitle .field--name-title {
font-size: 1.7rem; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe {
grid-column: 7 / span 9;
grid-row: 3;
padding-right: 25%;
margin-top: 2rem; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe {
padding-top: 0.5rem; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe {
color: #09398b;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-equipe .field--name-field-equipe {
font-size: 1rem; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube {
grid-column: 7 / span 7;
grid-row: 4;
margin-top: 2rem;
width: fit-content; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube .field--name-field-incube {
background-color: red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-incube {
grid-column: 2 / span 4; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
grid-column: 2 /span 5;
grid-row: 2 / span 6;
margin-right: 2rem; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo {
grid-column: 1 / span 10; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
width: 65%;
object-fit: cover; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-photo img {
padding-top: 1rem;
object-fit: cover;
width: 100%; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse {
margin-top: 3rem;
grid-row: 10; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse .field--name-field-adresse {
text-transform: uppercase;
font-weight: 800;
font-size: 0.9rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse .field--name-field-adresse .address {
display: flex;
flex-direction: row;
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top {
padding-top: 4rem;
margin-left: 10%;
margin-right: 10%; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top {
display: flex;
flex-direction: row;
margin-bottom: 2rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo {
width: 60%;
padding-right: 2rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo img {
width: 65%;
object-fit: cover; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .block-entity-fieldnodefield-photo img {
padding-top: 1rem;
object-fit: cover;
width: 100%; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right {
width: 40%; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle {
margin: 0; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-adresse .field--name-field-adresse .address .locality::after {
content: ",";
margin-right: 0.3rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-etape-du-projet {
grid-row: 10; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-moa {
grid-row: 10; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-projet {
grid-row: 10; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title {
font-family: "Marianne";
font-size: 2.5rem;
font-weight: 800;
color: #009ee3; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodetitle .field--name-title {
font-size: 1.7rem; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe {
margin-top: 2rem; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe {
padding-top: 0.5rem; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe {
color: #09398b;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase; }
@media (max-width: 810px) {
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-equipe .field--name-field-equipe {
font-size: 1rem; } }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-incube {
margin-top: 2rem;
width: fit-content; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_top .top_right .block-entity-fieldnodefield-incube .field--name-field-incube {
background-color: red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom {
display: flex;
flex-direction: row;
margin: auto;
border: 0.1rem solid;
justify-content: space-evenly; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse {
padding-left: 1rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse .field--name-field-adresse {
margin-top: .83em; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse .field--name-field-adresse .address {
margin: auto;
display: flex;
flex-direction: column;
justify-content: start;
margin: 0; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-adresse .field--name-field-adresse::after {
content: ""; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet {
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
border-left: 0.1rem solid; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet h2 {
color: #09398b;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0rem !important; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet h2:after {
content: ' :'; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-etape-du-projet .field__label {
display: none; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa {
padding-left: 1rem;
border-left: 0.1rem solid;
padding-bottom: 1rem; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa h2 {
color: #09398b;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0rem !important; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa h2:after {
content: ' :'; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-moa .field__label {
display: none; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet {
padding-left: 1rem;
padding-bottom: 1rem;
border-left: 0.1rem solid; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet h2 {
color: #09398b;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0rem !important; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet h2:after {
content: ' :'; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--top .top_bottom .block-entity-fieldnodefield-type-de-projet .field__label {
display: none; }
.path-node.page-node-type-projet .layout-content .region-content #block-contenudelapageprincipale .layout--threecol-25-50-25 .layout__region--first {
margin-top: 5rem; }
+34 -4
View File
@@ -41,10 +41,40 @@ function eql_preprocess_field(&$variables) {
$type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
$variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
}
// if ($field_name == 'field--name-title'){
// $name_title = $node->get('field--name-title')->getString();
// $variables['attributes']['class'][] = 'name_title-' . $name_title;
// }
if ($field_name == 'field--name-field-type-de-moa'){
$type_de_moa = $node->get('field--name-field-type-de-moa')->getString();
$variables['attributes']['class'][] = 'filtre-projet-' . $type_de_moa;
}
}
}
function eql_preprocess_layout__threecol_25_50_25(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
$type = $node->gettype();
if($type == "projet"){
$variables['content']['top_bottom'] = [];
$variables['content']['top_right'] = [];
$variables['content']['top_left'] = [];
foreach ($variables['content']['top'] as $key => $value) {
// // tu fais ce que tu as a faire
if(isset($value['#base_plugin_id']) && $value['#base_plugin_id']== 'entity_field'){
$t = 't';
if($value['#derivative_plugin_id']=="node:field_type_de_moa" || $value['#derivative_plugin_id']=="node:field_adresse"|| $value['#derivative_plugin_id']=="node:field_type_de_projet" || $value['#derivative_plugin_id']=="node:field_etape_du_projet") {
$variables['content']['top_bottom'][] = $variables['content']['top'][$key];
unset($variables["content"]["top"][$key]);
}
if($value['#derivative_plugin_id']=="node:title" || $value['#derivative_plugin_id']=="node:field_equipe" || $value['#derivative_plugin_id']=="node:field_incube"){
$variables['content']['top_right'][] = $variables['content']['top'][$key];
unset($variables["content"]["top"][$key]);
}
if($value['#derivative_plugin_id']=="node:field_photo"){
$variables['content']['top_left'][] = $variables['content']['top'][$key];
unset($variables["content"]["top"][$key]);
}
}
}
}
}
+139 -98
View File
@@ -7,75 +7,19 @@
#block-contenudelapageprincipale{
.layout--threecol-25-50-25{
.layout__region--top{
.block-region-top{
padding-top: 2rem;
display: grid;
grid-template-columns: 1fr repeat(8, 1fr) 1fr;
.block-entity-fieldnodetitle{
grid-column: 7 / span 9;
grid-row: 2;
margin: 0;
padding-right: 25%;
.field--name-title{
font-family: "Source Code Pro";
font-size: 1.5rem;
font-weight: 500;
color: $blue-light;
@media (max-width: 810px){
font-size: 1.7rem;
}
}
}
.block-entity-fieldnodefield-equipe{
grid-column: 7 / span 9;
grid-row: 3;
padding-right: 25%;
margin-top: 2rem;
// grid-column: 8 / span 8;
@media (max-width: 810px){
padding-top: 0.5rem;
}
.field--name-field-equipe{
color: $blue-dark;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase ;
@media (max-width: 810px){
font-size: 1rem;
}
}
}
.block-entity-fieldnodefield-incube{
grid-column: 7 / span 7;
grid-row: 4;
margin-top: 2rem ;
// padding-top: 2rem;
// grid-column: 8 ;
width: fit-content;
.field--name-field-incube{
background-color: red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem;
}
@media (max-width: 810px) {
grid-column: 2 / span 4;
}
}
padding-top: 4rem;
margin-left: 10%;
margin-right: 10%;
.top_top{
display: flex;
flex-direction: row;
margin-bottom: 2rem;
.block-entity-fieldnodefield-photo{
grid-column: 2 /span 5;
grid-row: 2 / span 6;
margin-right: 2rem;
@media (max-width: 810px) {
grid-column: 1 / span 10;
}
width: 60%;
padding-right: 2rem;
// margin-right: 2rem;
// @media (max-width: 810px) {
// }
img{
// padding-top: 2rem;
// width: 600px;
@@ -89,48 +33,145 @@
width: 100%;
}
}
// position: relative;
// bottom: -50%;
// // position: relative;
// // bottom: -50%;
}
.block-entity-fieldnodefield-adresse{
margin-top: 3rem;
// grid-column: 7 / span 9;
grid-row: 10;
// padding-right: 25%;
// grid-column: 8 / span 10;
.field--name-field-adresse{
text-transform: uppercase;
font-weight: 800;
font-size: 0.9rem;
.address{
display: flex;
flex-direction: row;
margin: 0;
.locality::after{
content:",";
margin-right: 0.3rem;
.top_right{
width: 40%;
.block-entity-fieldnodetitle{
margin: 0;
.field--name-title{
font-family: "Marianne";
font-size: 2.5rem;
font-weight: 800;
color: $blue-light;
@media (max-width: 810px){
font-size: 1.7rem;
}
}
}
.block-entity-fieldnodefield-equipe{
margin-top: 2rem;
// grid-column: 8 / span 8;
@media (max-width: 810px){
padding-top: 0.5rem;
}
.field--name-field-equipe{
color: $blue-dark;
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase ;
@media (max-width: 810px){
font-size: 1rem;
}
}
}
.block-entity-fieldnodefield-incube{
margin-top: 2rem ;
// padding-top: 2rem;
// grid-column: 8 ;
width: fit-content;
.field--name-field-incube{
background-color: red;
color: white;
font-weight: 800;
padding-right: 0.3rem;
padding-left: 0.2rem;
}
@media (max-width: 810px) {
// grid-column: 2 / span 4;
}
}
}
}
.top_bottom{
display: flex;
flex-direction: row;
margin: auto;
border: 0.1rem solid;
justify-content: space-evenly;
.block-entity-fieldnodefield-adresse{
padding-left: 1rem;
// margin-block-start: .83em;
.field--name-field-adresse{
margin-top: .83em;
.address{
margin: auto;
display: flex;
flex-direction: column;
justify-content: start;
margin: 0;
// .locality::after{
// content:",";
// margin-right: 0.3rem;
// }
}
&::after{
content: "";
}
}
}
.block-entity-fieldnodefield-etape-du-projet{
// grid-column: 2/span 8;
grid-row: 10;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
border-left: 0.1rem solid ;
h2{
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase ;
margin-bottom: 0rem !important;
&:after{
content: ' :';
}
}
.field__label{
display: none;
}
}
.block-entity-fieldnodefield-type-de-moa{
grid-row: 10;
padding-left: 1rem;
border-left: 0.1rem solid ;
padding-bottom: 1rem;
h2{
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase ;
margin-bottom: 0rem !important;
&:after{
content: ' :';
}
}
.field__label{
display: none;
}
}
.block-entity-fieldnodefield-type-de-projet{
grid-row: 10;
padding-left: 1rem;
padding-bottom: 1rem;
border-left: 0.1rem solid ;
h2{
color: $blue-dark;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase ;
margin-bottom: 0rem !important;
&:after{
content: ' :';
}
}
}
}
.field__label{
display: none;
}
}
}
}
.layout__region--first{
// margin-top: 18rem;
margin-top: 5rem;
@@ -0,0 +1,89 @@
{#
/**
* @file
* Theme override for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
*
* @see template_preprocess_field()
*/
#}
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
label_display == 'inline' ? 'clearfix',
]
%}
{%
set title_classes = [
'field__label',
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{attributes.addClass(classes,'field__items')}}>
{% for item in items %}
<div{{item.attributes.addClass('field__item')}}{{ item.content }}></div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div {{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{attributes.addClass(classes)}}>
<div{{title_attributes.addClass(title_classes)}}>{{ label }}</div>
{% if multiple %}
<div class="field__items">
{% endif %}
{% for item in items %}
<div{{item.attributes.addClass('field__item')}}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
@@ -0,0 +1,62 @@
{#
/**
* @file
* Default theme implementation for a three column layout.
*
* This template provides a three column 25%-50%-25% display layout, with
* additional areas for the top and the bottom.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
*
* @ingroup themeable
*/
#}
{%
set classes = [
'layout',
'layout--threecol-25-50-25',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
<div class='top_top'>
{{ content.top_left }}
<div class='top_right'>
{{content.top_right}}
</div>
</div>
<div class='top_bottom'>
{{content.top_bottom}}
</div>
</div>
{% endif %}
{% if content.first %}
<div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
{{ content.first }}
</div>
{% endif %}
{% if content.second %}
<div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
{{ content.second }}
</div>
{% endif %}
{% if content.third %}
<div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
{{ content.third }}
</div>
{% endif %}
{% if content.bottom %}
<div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
{{ content.bottom }}
</div>
{% endif %}
</div>
{% endif %}