bannière info dimensions de l'image

This commit is contained in:
fredtempez 2022-03-07 14:09:09 +01:00
parent 88a8793258
commit 06251825cc
3 changed files with 21 additions and 35 deletions

View File

@ -2,8 +2,11 @@
## Version 11.4.00 ## Version 11.4.00
### Amélioration : ### Améliorations :
- prise en charge des fontes Web Safe : Georgia, Times, Arial, Trebuchet, Lucida, Tahoma, Verdana, Courier et Monaco. - Prise en charge des fontes Web Safe. Les fontes initiales sont transférées dans les fontes optionnelles, donc effaçables.
- Configuration de la bannière, modalité d'affichage de la taille d'image recommandée et affichage des dimensions de l'image.
## Correction :
- Module blog : taille recommandée de l'image erronée lorsque la largeur de l'écran est réglée sur fluide (100%).
## Version 11.3.04 ## Version 11.3.04
### Correction : ### Correction :

View File

@ -47,9 +47,9 @@ $("input, select").on("change", function() {
var tmpImg = new Image(); var tmpImg = new Image();
tmpImg.onload = function() { tmpImg.onload = function() {
// Informations affichées // Informations affichées
$("#themeHeaderImageHeight").val(tmpImg.height + " px"); $("#themeHeaderImageHeight").html(tmpImg.height + "px");
$("#themeHeaderImageWidth").val(tmpImg.width + " px"); $("#themeHeaderImageWidth").html(tmpImg.width + "px");
$("#themeHeaderImageRatio").val(tmpImg.width / tmpImg.height); $("#themeHeaderImageRatio").html(tmpImg.width / tmpImg.height);
// Limiter la hauteur à 600 px // Limiter la hauteur à 600 px
if (tmpImg.height > 600) { if (tmpImg.height > 600) {
@ -69,6 +69,9 @@ $("input, select").on("change", function() {
$("#themeHeaderHeight option:eq(0)").val(tmpImgHeight + "px"); $("#themeHeaderHeight option:eq(0)").val(tmpImgHeight + "px");
// Modifier l'option // Modifier l'option
$("#themeHeaderHeight option:eq(0)").html("Hauteur de l\'image sélectionnée (" + tmpImgHeight + "px)"); $("#themeHeaderHeight option:eq(0)").html("Hauteur de l\'image sélectionnée (" + tmpImgHeight + "px)");
$("#themeHeaderImageInfo").show();
} else {
$("#themeHeaderImageInfo").hide();
} }
}; };
@ -207,10 +210,10 @@ $("input, select").on("change", function() {
// Affiche / Cache les options de l'image du fond // Affiche / Cache les options de l'image du fond
$("#themeHeaderImage").on("change", function() { $("#themeHeaderImage").on("change", function() {
if($(this).val()) { if($(this).val()) {
$("#themeHeaderImageOptions").slideDown(); $(".themeHeaderImageOptions").slideDown();
} }
else { else {
$("#themeHeaderImageOptions").slideUp(function() { $(".themeHeaderImageOptions").slideUp(function() {
$("#themeHeaderTextHide").prop("checked", false).trigger("change"); $("#themeHeaderTextHide").prop("checked", false).trigger("change");
}); });
} }

View File

@ -154,40 +154,20 @@
$imageFile = file_exists(self::FILE_DIR.'source/'.$this->getData(['theme', 'header', 'image'])) ? $imageFile = file_exists(self::FILE_DIR.'source/'.$this->getData(['theme', 'header', 'image'])) ?
$this->getData(['theme', 'header', 'image']) : ""; $this->getData(['theme', 'header', 'image']) : "";
echo template::file('themeHeaderImage', [ echo template::file('themeHeaderImage', [
'help' => 'Sélectionner une image aux dimensions recommandées ci-dessous :',
'label' => 'Image', 'label' => 'Image',
'type' => 1, 'type' => 1,
'value' => $imageFile 'value' => $imageFile
]); ?> ]); ?>
<span class="themeHeaderImageOptions displayNone" id="themeHeaderImageInfo">
Largeur de l'image : <span id="themeHeaderImageWidth"></span> (largeur de site : <?php echo $this->getData(['theme', 'site', 'width']); ?>)
-
Hauteur de l'image : <span id="themeHeaderImageHeight"></span>
-
Ratio : <span id="themeHeaderImageRatio"></span>
</span>
</div> </div>
</div> </div>
<div class="row"> <div class="themeHeaderImageOptions" class="displayNone">
<div class="col3 textAlignRight">
Informations sur l'image :
</div>
<div class="col2">
<?php echo template::text('themeHeaderImageWidth', [
'label' => 'Largeur',
'class' => 'textAlignCenter',
'disable' => true
]); ?>
</div>
<div class="col2">
<?php echo template::text('themeHeaderImageHeight', [
'label' => 'Hauteur',
'class' => 'textAlignCenter',
'disable' => true
]); ?>
</div>
<div class="col2">
<?php echo template::text('themeHeaderImageRatio', [
'label' => 'Ratio (L/H)',
'class' => 'textAlignCenter',
'disable' => true
]); ?>
</div>
</div>
<div id="themeHeaderImageOptions" class="displayNone">
<div class="row"> <div class="row">
<div class="col3"> <div class="col3">
<?php echo template::select('themeHeaderImageRepeat', $module::$repeats, [ <?php echo template::select('themeHeaderImageRepeat', $module::$repeats, [