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

This commit is contained in:
fredtempez 2019-11-10 20:12:41 +01:00
parent f5a3aae819
commit 8d713b34e4
3 changed files with 33 additions and 25 deletions

View File

@ -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',

View File

@ -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
/*
var tmpImg = new Image();
var url = "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
tmpImg.src= url;
*/
// Récupérer la taille de l'image
var tmpImg = new Image();
tmpImg.src= "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
// 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() + "}";
/*} else {
css += "line-height:" + tmpImg.height + ";height:" + tmpImg.height + "}";
}*/
css += "line-height:" + $("#themeHeaderHeight").val() + ";height:" + $("#themeHeaderHeight").val() + "}";
// 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() + "}";

View File

@ -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">