Bonjour,
Pour tous ceux qui utilise le thème Essential, réaliser un diaporama qui tient la route en page d'accueil relève plus du parcours du combattant que de la promenade de santé. Le choix de l'image, de sa taille est primordiale et l'affichage résultant reste malgré cela très aléatoire en fonction des dimensions de fenêtre et des périphériques de lecture utilisés.
En cause (AMHA) le choix de la balise <img> pour gérer l'affichage de l'image sélectionnée, un choix qui ne permet pas vraiment de jouer avec les propriétés CSS de façon optimale, centrage vertical inexistant, redimensionnement malencontreux ...
Pour améliorer le contrôle de l'affichage de ces images, il aurait été préférable (toujours AMHA) de basculer l'image choisie comme "background" d'un conteneur afin d'avoir un jeu de propriétés, background-size, background-repeat, background-position ... permettant de manipuler l'affichage de ce fond avec facilité et précision.
En attendant une éventuelle intégration de cette idée, il suffit pour les joueurs que vous êtes de remplacer dans le fichier /theme/essential/layout/includes/slideshow.php la ligne (environ 73):
<img src="<?php echo $image; ?>" alt="<?php echo $imgalt; ?>" class="carousel-image" />
par la suivante :
<div class="carousel-image" style="background-image:url(http:<?php echo $image; ?>)"></div>
Vous pourrez alors jouer avec toutes les propriétés CSS liées au background.
Exemple pour occuper tout l'espace sans déformer l'image
#essentialCarousel.carousel .carousel-inner>.item>.carousel-image {
height:300px;
background-position: center center;
background-size: cover;
}
Remarque importante, la division créée étant vide, sa dimension affichée sera nulle et son fond (l'image) réduit à ... rien et vous n'y verrez que du blanc. L'instruction height:300px (à coupler avec la dimension que vous voulez donner au diaporama) doit donc être impérativement rajoutée à votre code CSS.
Ci après un essai à deux dimensions de fenêtres différentes.
Jérôme.