[9.2.10] Afficher les infos sur l'image et hauteur de la bannière image

core/module/theme/theme.php

@@ -118,7 +118,7 @@ class theme extends common {
 		'2.4vmax' => 'Très grande (240%)'
 	];
 	public static $headerHeights = [
-	/*	'none' => 'Hauteur de l\'image',*/
+		'none' => 'Hauteur de l\'image sélectionnée',
 		'100px' => 'Très petite (100px) ',
 		'150px' => 'Petite (150px)',
 		'200px' => 'Moyenne (200px)',
@@ -216,10 +216,9 @@ class theme extends common {
 	];
 	public static $headerWide = [	
 		'auto auto' => 'Automatique',	
-		'100% 100%' => 'Image étirée (100% 100%)',
-		'100% auto' => 'Responsive (100% auto)',
 		'cover' => 'Responsive (cover)',
-		'contain' => 'Responsive (contain)'			
+		'100% 100%' => 'Image étirée (100% 100%)',
+		'contain' => 'Responsive (contain)'
 	];
 	public static $footerTemplate = [	
 		'1' => 'Une seule colonne',

core/module/theme/view/header/header.js.php

@@ -12,19 +12,30 @@
  * @link http://zwiicms.com/
  */
 
-
-
 /**
  * Aperçu en direct
  */
-$("input, select").on("change", function() {
+$("input, select, .lity-iframe").on("change", function() {
 
-	// Récupérer la taille de l'image
+		// Récupérer la taille de l'image
-	/*
+
-	var tmpImg = new Image();
+		var tmpImg = new Image();
-	var url = "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
+		tmpImg.src= "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
-	tmpImg.src= url;
+
-	*/
+		// Informations affichées
+		$("#themeHeaderImageHeight").html(tmpImg.height + "px");
+		$("#themeHeaderImageWidth").html(tmpImg.width + "px");
+
+		// Limiter la hauteur à 600 px
+		if (tmpImg.height > 600) {
+			tmpImgHeight = 600;
+		} else {
+			tmpImgHeight = tmpImg.height;
+		}
+
+		//Modifier la dropdown liste
+		$("#themeHeaderHeight option:eq(0)").val(tmpImgHeight + "px");
+		$("#themeHeaderHeight option:first-child").html("Hauteur de l\'image sélectionnée (" + tmpImgHeight + "px)");
 
 	// Import des polices de caractères
 	var headerFont = $("#themeHeaderFont").val();
@@ -41,14 +52,10 @@ $("input, select").on("change", function() {
 	} else {
 		// Désactiver l'option responsive
 		css += "background-image:none;";
-		//$("header .container").show();
-
 	}
-	/*if ($("#themeHeaderHeight").val() !== "none") {*/
+
-		css += "line-height:" + $("#themeHeaderHeight").val() + ";height:" + $("#themeHeaderHeight").val() + "}";
+	css += "line-height:" + $("#themeHeaderHeight").val() + ";height:" + $("#themeHeaderHeight").val() + "}";
-	/*} else {
+
-		css += "line-height:" + tmpImg.height + ";height:" + tmpImg.height + "}";
-	}*/
 
 	// Taille, couleur, épaisseur et capitalisation du titre de la bannière
 	css += "header span{color:" + $("#themeHeaderTextColor").val() + ";font-family:'" + headerFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeHeaderFontWeight").val() + ";font-size:" + $("#themeHeaderFontSize").val() + ";text-transform:" + $("#themeHeaderTextTransform").val() + "}";

core/module/theme/view/header/header.php

@@ -51,6 +51,7 @@
                             'type' => 1,
                             'value' => $imageFile
                     ]); ?>
+                    <em>Largeur <span id="themeHeaderImageWidth"></span> - Hauteur <span id="themeHeaderImageHeight"></span></em>
                 </div>
             </div>
             <div id="themeHeaderImageOptions" class="displayNone">
@@ -75,16 +76,16 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col6">
+                    <div class="col4">
                         <?php echo template::checkbox('themeHeaderTextHide', true, 'Cacher le titre du site', [
 								'checked' => $this->getData(['theme', 'header', 'textHide'])
 							]); ?>
                     </div>
-                    <div id="themeHeaderShow" class="col6">
+                    <div id="themeHeaderShow" class="col4">
                         <?php echo template::checkbox('themeHeaderlinkHomePage', true, 'Bannière cliquable', [
                                 'checked' => $this->getData(['theme', 'header', 'linkHomePage'])
-                            ]); ?>
+                            ]); ?>  
-                    </div>                    
+                    </div>    
                 </div>
             </div>
         </div>
@@ -104,7 +105,8 @@
                 <div class="col4">
                     <?php echo template::select('themeHeaderHeight', $module::$headerHeights, [
 							'label' => 'Hauteur',
-							'selected' => $this->getData(['theme', 'header', 'height'])
+                            'selected' => $this->getData(['theme', 'header', 'height']),
+                            'help' => "La hauteur maximale est de 600 pixels lorsque l'option \'Hauteur de l\'image\' est sélectionnée."
 						]); ?>
                 </div>
                 <div class="col4">