class type-media sur body et position block third
This commit is contained in:
+7
-3
@@ -5785,9 +5785,13 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to
|
|||||||
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
|
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-liens,
|
|
||||||
.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-projets-liee,
|
body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-liens,
|
||||||
.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-fichiers {
|
body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-projets-liee,
|
||||||
|
body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-fichiers,
|
||||||
|
body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-liens,
|
||||||
|
body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-projets-liee,
|
||||||
|
body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-fichiers {
|
||||||
transform: translateY(-45.5rem);
|
transform: translateY(-45.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,23 +11,29 @@ use Drupal\Component\Utility\Html;
|
|||||||
use Drupal\Component\Transliteration\TransliterationInterface;
|
use Drupal\Component\Transliteration\TransliterationInterface;
|
||||||
use Drupal\taxonomy\Entity\Term;
|
use Drupal\taxonomy\Entity\Term;
|
||||||
use Drupal\Core\Template\Attribute;
|
use Drupal\Core\Template\Attribute;
|
||||||
|
use Drupal\node\NodeInterface;
|
||||||
|
|
||||||
|
|
||||||
function eql_preprocess_html(&$variables) {
|
function eql_preprocess_html(&$variables) {
|
||||||
$node = \Drupal::routeMatch()->getParameter('node');
|
$node = \Drupal::routeMatch()->getParameter('node');
|
||||||
if ($node){
|
|
||||||
$variables['attributes']['class'][] = 'node-type-' . $node->bundle();
|
if ($node instanceof \Drupal\node\NodeInterface) {
|
||||||
$variables['attributes']['class'][] = 'node-id-' . $node->id();
|
|
||||||
}
|
|
||||||
if ($node instanceof NodeInterface) {
|
|
||||||
$variables['attributes']['class'][] = 'node-type-' . $node->bundle();
|
$variables['attributes']['class'][] = 'node-type-' . $node->bundle();
|
||||||
$variables['attributes']['class'][] = 'node-id-' . $node->id();
|
$variables['attributes']['class'][] = 'node-id-' . $node->id();
|
||||||
|
|
||||||
// Pour les ressources : ajoute la classe de type de ressource
|
// Liste des champs à traiter pour générer des classes dynamiques
|
||||||
if ($node->bundle() === 'ressource' && $node->hasField('field_type_de_ressource')) {
|
$fields_to_classify = [
|
||||||
foreach ($node->get('field_type_de_ressource')->referencedEntities() as $term) {
|
'field_type_de_ressource' => 'type-',
|
||||||
$label = $term->label();
|
'field_type_de_media' => 'type-media-',
|
||||||
$css_class = 'type-' . Html::getClass($label);
|
];
|
||||||
$variables['attributes']['class'][] = $css_class;
|
|
||||||
|
foreach ($fields_to_classify as $field_name => $prefix) {
|
||||||
|
if ($node->hasField($field_name) && !$node->get($field_name)->isEmpty()) {
|
||||||
|
foreach ($node->get($field_name)->referencedEntities() as $term) {
|
||||||
|
$label = $term->label();
|
||||||
|
$css_class = $prefix . Html::cleanCssIdentifier(strtolower($label));
|
||||||
|
$variables['attributes']['class'][] = $css_class;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,161 +1,159 @@
|
|||||||
.carousel{display: none;}
|
.carousel{display: none;}
|
||||||
.page-node-type-ressource{
|
.page-node-type-ressource{
|
||||||
|
.type-les-projets-en-images.layout__region--top{
|
||||||
.type-les-projets-en-images.layout__region--top{
|
.block-region-top{
|
||||||
.block-region-top{
|
display: flex !important;
|
||||||
display: flex !important;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
margin-left: 11%;
|
||||||
margin-left: 11%;
|
@media screen and (min-width:1100px) {
|
||||||
@media screen and (min-width:1100px) {
|
display: flex;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.block-entity-fieldnodefield-images{
|
||||||
|
margin-top: 5rem;
|
||||||
|
padding: 0;
|
||||||
|
order: 7;
|
||||||
|
.carousel {
|
||||||
|
display: block;
|
||||||
|
max-width: 60vw;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.main-image-container {
|
||||||
|
position: relative;
|
||||||
|
// background: #e0f5ff;
|
||||||
|
height: 500px;
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
border: none ;
|
||||||
|
// transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
|
||||||
|
&.animate {
|
||||||
|
transform: scale(1.02); // léger effet smooth sur changement
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: #00aaff;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 5px 10px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
content
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #prevArrow{
|
||||||
|
// &::before{
|
||||||
|
// content:url("../images/pictos/fleche-droite-dans-rond.png");
|
||||||
|
// display: block;
|
||||||
|
// transform: scaleX(-1);
|
||||||
|
// width: 50px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// #nextArrow{
|
||||||
|
// &::before{
|
||||||
|
// content:url("../images/pictos/fleche-droite-dans-rond.png");
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnails-wrapper {
|
||||||
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.thumb-arrow {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: #00aaff;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
user-select: none;
|
||||||
|
z-index: 2;
|
||||||
|
// font-weight: bold;
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnails {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
gap: 10px;
|
||||||
.block {
|
overflow-x: auto;
|
||||||
margin-left: 0;
|
scroll-behavior: smooth;
|
||||||
}
|
max-width: 100%;
|
||||||
.block-entity-fieldnodefield-images{
|
padding: 10px 0;
|
||||||
margin-top: 5rem;
|
scrollbar-width: none; // Firefox
|
||||||
padding: 0;
|
|
||||||
order: 7;
|
&::-webkit-scrollbar {
|
||||||
|
display: none; // Chrome, Safari
|
||||||
.carousel {
|
}
|
||||||
display: block;
|
|
||||||
max-width: 60vw;
|
img {
|
||||||
margin: auto;
|
width: 60px;
|
||||||
text-align: center;
|
height: 60px;
|
||||||
|
object-fit: cover;
|
||||||
.main-image-container {
|
border: 2px solid transparent;
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
// background: #e0f5ff;
|
|
||||||
height: 500px;
|
&.active {
|
||||||
max-height: 500px;
|
border-color: #00aaff;
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
transition: transform 0.3s ease-in-out;
|
|
||||||
border: none ;
|
|
||||||
// transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
|
|
||||||
&.animate {
|
|
||||||
transform: scale(1.02); // léger effet smooth sur changement
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: #00aaff;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 5px 10px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
content
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #prevArrow{
|
|
||||||
// &::before{
|
|
||||||
// content:url("../images/pictos/fleche-droite-dans-rond.png");
|
|
||||||
// display: block;
|
|
||||||
// transform: scaleX(-1);
|
|
||||||
// width: 50px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// #nextArrow{
|
|
||||||
// &::before{
|
|
||||||
// content:url("../images/pictos/fleche-droite-dans-rond.png");
|
|
||||||
// display: block;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnails-wrapper {
|
|
||||||
position: relative;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.thumb-arrow {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 5px 10px;
|
|
||||||
background: #00aaff;
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
user-select: none;
|
|
||||||
z-index: 2;
|
|
||||||
// font-weight: bold;
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnails {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
overflow-x: auto;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 10px 0;
|
|
||||||
scrollbar-width: none; // Firefox
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none; // Chrome, Safari
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: #00aaff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Masquer les images Drupal originales (facultatif)
|
|
||||||
.field__items {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
// Masquer les images Drupal originales (facultatif)
|
||||||
&.block-region-third{
|
.field__items {
|
||||||
.block-entity-fieldnodefield-liens,
|
display: none;
|
||||||
.block-entity-fieldnodefield-projets-liee,
|
|
||||||
.block-entity-fieldnodefield-fichiers{
|
|
||||||
transform: translateY(-45.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
body.type-media-reportage-photos,
|
||||||
|
body.type-media-vidéos{
|
||||||
|
.block-region-third{
|
||||||
|
.block-entity-fieldnodefield-liens,
|
||||||
|
.block-entity-fieldnodefield-projets-liee,
|
||||||
|
.block-entity-fieldnodefield-fichiers{
|
||||||
|
transform: translateY(-45.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user