Informations sur l'image de la bannière

This commit is contained in:
Fred Tempez 2022-01-31 18:49:03 +01:00
parent 597a7493e2
commit ad692bd985
2 changed files with 29 additions and 10 deletions

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").html(tmpImg.height + "px"); $("#themeHeaderImageHeight").val(tmpImg.height + " px");
$("#themeHeaderImageWidth").html(tmpImg.width + "px"); $("#themeHeaderImageWidth").val(tmpImg.width + " px");
$("#themeHeaderImageRatio").html(tmpImg.width / tmpImg.height); $("#themeHeaderImageRatio").val(tmpImg.width / tmpImg.height);
// Limiter la hauteur à 600 px // Limiter la hauteur à 600 px
if (tmpImg.height > 600) { if (tmpImg.height > 600) {

View File

@ -163,6 +163,32 @@
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row">
<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 id="themeHeaderImageOptions" class="displayNone">
<div class="row"> <div class="row">
<div class="col3"> <div class="col3">
@ -192,13 +218,6 @@
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row">
<div class="col12 textAlignCenter">
<span id="themeHeaderImage">
Largeur : <span id="themeHeaderImageWidth"></span> | Hauteur : <span id="themeHeaderImageHeight"></span> | ratio : <span id="themeHeaderImageRatio"></span>
</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>