[Résolu] Nouvelle option de redimensionnement d'image

Txori · septembre 2023

Bonjour,
Je viens de m'apercevoir qu'un de mes clients envoie des images de 3456x4608 pixels, sous la barre des 16Mo, via le gestionnaire de média. Je m'en suis rendu compte parce que l'affichage d'admin/medias.php faisait tout bonnement planter php :

Dans class.plx.utils.php , line 698 memory problem :
238326#0: *20552 FastCGI sent in stderr: "PHP message: PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 63700992 bytes) in /core/lib/class.plx.utils.php on line 698" while reading response header from upstream

J'ai pour l'instant esquivé le problème en augmentant la mémoire php de 128Mo à 256Mo, mais bon... C'est idiot d'afficher des images de 8Mo contenant un fond blanc et du texte... Et les images uploadées n'ont pas besoin d'être plus larges que le site, soit 1000 pixels.

Donc, je comptais forcer le redimensionnement des images.
Le problème est que les choix proposés ne conviennent pas :

Taille originale : bien ou bien trop gros, selon la magie du client
320x200, 500x380, 640x480 : trop petit, et puis c'est bizarre d'aller recadrer une image en plus de la redimensionner...
1000x0 (Modifier) : fonctionne pour les images plus grandes, mais augmente la taille des petites images
[ ] x [ ] : trop compliqué pour le client...

J'aimerais donc que l'image soit redimensionnée de cette manière sans proposer de choix au client :
new_width = width < 1000 ? width : 1000;
new_height = width != new_width ? new_width * height / width : height;

Est-ce que je modifie directement la class.plx.medias.php public function uploadFiles($usrfiles, $post), ou est-ce qu'il y a une manière plus élégante de le faire ?

Merci

cpalo · septembre 2023

Bonjour
Tu peux aller dans parametres option d'affichage, et tu peux modifier les tailles des images et des miniatures par defaut.
Après on peut aussi modifier la taille des images avant téléchargement car 16M°!!.
Il y a des feewares qui le permettent facilement.; si tu n'as pas trop d'images à traiter .. photofiltre.. ancien mais il fait encore son travail
Cordialement

Txori · septembre 2023

tu peux modifier les tailles des images et des miniatures par defaut

Merci, c'est ce que je fais en modifiant la taille des images par défaut en 1000x0 : ça redimensionne les grandes images tout en ne recadrant pas l'image en hauteur.
Mais en sélectionnant cette option, ça augmente aussi les petites images jusqu'à 1000 pixels de large.
C'est pour ça que je programme ma propre méthode : pour ne pas laisser le client avoir le choix et faire n'importe quoi.

Je vais effectivement traiter les images déjà uploadées avec une petite moulinette ImageMagick. Mais ma question demeure :
Est-ce que je modifie directement la class.plx.medias.php public function uploadFiles($usrfiles, $post), ou est-ce qu'il y a une manière plus élégante de le faire ?

gcyrillus-nomade · septembre 2023

Bonjour,

L'idéal serait de transposer ton script en un plugin.
Cela a plusieurs avantages.

ne disparaît pas suite à une mise à jours
peut être modifié et améliorer au fil du temps sans avoir à toucher au cœur de pluxml
debugage plus facile il n'y a que le plugin à corriger ou à réadapter à l'occasion d'une mise à jour
des options de configuration peuvent être mise en place et faciliter la réutilisation du plugin sur un autre pluxml
...

Peut dispo actuellement, je pourrais néanmoins t'aider à passer ton script en plugin.

Cdt

Pour infos:
Le fichier medias.php (dans core/admin) dispose de 3 hooks sur lesquels le plugin peut s'articuler en fonction de ce que tu souhaites

eval($plxAdmin->plxPlugins->callHook('AdminMediasPrepend')); // pour traiter par exemple un upload avant affichage ou pour remplacer tout le reste de la page avec un nouveau formulaire fournis par un plugin . C'est à cet endroit qu'il faudrait traiter les upload et retoucher les images envoyés
eval($plxAdmin->plxPlugins->callHook('AdminMediasTop'))# // qui permet d’insérer ici du HTML et d'autres fonctions , visible dans les deux pages (celles listant les fichiers et celle avec le formulaire d'upload)
eval($plxAdmin->plxPlugins->callHook('AdminMediasUpload')) // qui insère du contenu à la fin du formulaire d'upload , permettrait d'ajouter des options complétant celles déjà existantes

Il y a un quatrième hook/point d'accroche : eval($plxAdmin->plxPlugins->callHook('AdminMediasFoot')) en pied de page lui aussi visible dans les deux pages (listing et formulaire) , peut servir à indiquer la présence du plugin.

Accessoirement deux pages peuvent-être crées et ajoutées via deux fichiers du plugin (fichiers optionnels)

admin.php affiche une page d'administration avec un lien dans le menu principal de l'admin
config.php affiche une page de configuration , lien configuration accessible depuis la page plugin

Txori · septembre 2023

Merci @gcyrillus-nomade. J'étais justement en train de parcourir la doc de création de plugins. Je vais tenter de le faire moi-même et je posterai mes avancées

gcyrillus-nomade · septembre 2023

Okay, j'étais en train de me dire que de transformer tes scripts (si tu souhaitais les partager) en plugin, pouvait aussi être l'occasion de faire un tutoriel à partir d'un cas concret. Comme ça, j'avais un truc à mettre sur pluxopolis.

Cdt

Comme on dit, plutôt que donner un poisson à quelqu'un, il vaut aussi de lui apprendre à pécher

Txori · septembre 2023

C'est pas un méga script, tu peux en faire un tuto sur pluxopolis. Je suis curieux de voir comment fonctionne le remplacement des fonctions php existantes avec les hook... Parce que j'arrive à cacher les options de resize image et thumb après coup avec le hook AdminMediasUpload, mais j'imagine que ça ne ça fait pas du tout comme ça

simpleImageResizer.php :

<?php
  class simpleImageResizer extends plxPlugin
  {
    public function __construct($default_lang) {
      # appel du constructeur de la classe plxPlugin (obligatoire)
      parent::__construct($default_lang);

      # Déclaration des hooks
      $this->addHook('AdminMediasUpload', 'AdminMediasUpload');
    }

    public function AdminMediasUpload() {
      echo '<script src="'.PLX_PLUGINS.'simpleImageResizer/simpleImageResizer.js"></script>
      <script>
        hideResizeImages();
      </script>';
    }
  }
?>

simpleImageResizer.js :

function hideResizeImages() {
    var grid = document.getElementsByClassName('unstyled-list');
    for (var i = 0; i < grid.length; i ++) {
        grid[i].style.display = 'none';
    }
}

Et sinon voilà ma modification de class.plx.medias.php qui fonctionne bien :

public function uploadFiles($usrfiles, $post) {

    $files = array();
    if(isset($post['myfiles'])) {
        foreach($post['myfiles'] as $key => $val) {
            list($selnum, $selval) = explode('_', $val);
            $files[] = array(
                'name'      => $usrfiles['selector_'.$selnum]['name'][$selval],
                'size'      => $usrfiles['selector_'.$selnum]['size'][$selval],
                'tmp_name'  => $usrfiles['selector_'.$selnum]['tmp_name'][$selval]
            );
        }
    }

    $count=0;
    foreach($files as $file) {


        // La valeur $max_width doit être éditable dans le config.php du plugin
        $max_width = 1000;

        // Récupération du width et height de l'image
        if (getimagesize($file['tmp_name'])) {
            list($width, $height) = getimagesize($file['tmp_name']);
        }

        $resize = false;
        $new_width = $width < $max_width ? $width : $max_width;
        if ($width != $new_width) {
            $new_height = $width != $new_width ? $new_width * $height / $width : $height;
            $resize = array('width' => $new_width, 'height' => $new_height);
        }

        $thumb = false;


        if($res=$this->_uploadFile($file, $resize, $thumb)) {
            switch($res) {
                case L_PLXMEDIAS_WRONG_FILESIZE:
                    return plxMsg::Error(L_PLXMEDIAS_WRONG_FILESIZE);
                    break;
                case L_PLXMEDIAS_WRONG_FILEFORMAT:
                    return plxMsg::Error(L_PLXMEDIAS_WRONG_FILEFORMAT);
                    break;
                case L_PLXMEDIAS_UPLOAD_ERR:
                    return plxMsg::Error(L_PLXMEDIAS_UPLOAD_ERR);
                    break;
                case L_PLXMEDIAS_UPLOAD_SUCCESSFUL:
                    $count++;
                    break;
            }
        }
    }

    if($count==1)
        return plxMsg::Info(L_PLXMEDIAS_UPLOAD_SUCCESSFUL);
    elseif($count>1)
        return plxMsg::Info(L_PLXMEDIAS_UPLOADS_SUCCESSFUL);
}

Il me tarde de savoir comment utiliser les hooks correctement

gcyrillus-nomade · septembre 2023

Bonjour,

Alors, j'ai repris ta fonction mais depuis le plugin, et ai aussi fait une copie de l'autre fonction native de PluXml pour évincé le fonctionnement natif.

Pour évincé le traitement du formulaire par PluXml, j'ai branché le plugin sur le hook AdminPrepend. De là on teste la variable $_POST['btn_upload'] et si il y a quelque chose, on lance tout de suite ta fonction et dans la foulé on fait la redirection vers la page médias .

En copiant/modifiant les fonctions de pluXml, il faut aussi recreer les variables necessaires au sein du plugin où ces nouvelles fonctions se trouvent.

Pour la page config, j'ai opté pour un select avec des largeurs prédéterminées, mais un simple input de type text conviendrais aussi. 1000 est la valeur par défaut tant que la configuration du plugin n'est pas faite.

Voici ci-dessous la class du plugin

<?php

    /* limite la largeur des images uploadées  */
    class simpleImageResizer extends plxPlugin
    {
        # initialisation des variables - reflets des variables natives pour les fonctions copiées/réecrites
        public $path = null;            # chemin vers les médias
        public $dir = null;             # chemin vers le dossier medias affiché
        public $aDirs = array();        # liste des dossiers et sous dossiers
        public $aFiles = array();       # liste des fichiers d'un dossier
        public $maxUpload = array();    # valeur upload_max_filesize
        public $maxPost = array();      # valeur post_max_size  
        public $img_supported = array('.png', '.gif', '.jpg', '.jpeg', '.bmp', '.webp'); # images formats supported
        public $img_exts = '/\.(jpe?g|png|gif|bmp|webp)$/i';
        public $doc_exts = '/\.(7z|aiff|asf|avi|csv|docx?|epub|fla|flv|gpx|gz|gzip|m4a|m4v|mid|mov|mp3|mp4|mpc|mpe?g|ods|odt|odp|ogg|pdf|pptx?|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|svg|swf|sxc|sxw|tar|tgz|txt|vtt|wav|webm|wma|wmv|xcf|xlsx?|zip)$/i';  


        public function __construct($default_lang) {
            # appel du constructeur de la classe plxPlugin (obligatoire)
            parent::__construct($default_lang);

            # Déclaration des hooks
            $this->addHook('AdminMediasUpload', 'AdminMediasUpload');
            $this->addHook('AdminMediasPrepend','AdminPrepend');
            $this->addHook('AdminMediasFoot','AdminMediasFoot');

            # droits pour accèder à la page admin.php du plugin
            $this->setAdminProfil(PROFIL_ADMIN);

            # droits pour accèder à la page config.php du plugin
            $this->setConfigProfil(PROFIL_ADMIN);

            # Initialisation Reprises du fonctionnement des variables utilisé par PluXml à l'attention des deux fonctions de remplacements
            $this->path =PLX_ROOT.$_SESSION['medias'];
            $this->dir = $_SESSION['folder'];

            # Taille maxi des fichiers
            $maxUpload = strtoupper(ini_get("upload_max_filesize"));
            $this->maxUpload['display'] = str_replace('M', ' Mo', $maxUpload);
            $this->maxUpload['display'] = str_replace('K', ' Ko', $this->maxUpload['display']);
            if(substr_count($maxUpload, 'K')) $this->maxUpload['value'] = str_replace('K', '', $maxUpload) * 1024;
            elseif(substr_count($maxUpload, 'M')) $this->maxUpload['value'] = str_replace('M', '', $maxUpload) * 1024 * 1024;
            elseif(substr_count($maxUpload, 'G')) $this->maxUpload['value'] = str_replace('G', '', $maxUpload) * 1024 * 1024 * 1024;
            else $this->maxUpload['value'] = 0;

            # Taille maxi des données
            $maxPost = strtoupper(ini_get("post_max_size"));
            $this->maxPost['display'] = str_replace('M', ' Mo', $maxPost);
            $this->maxPost['display'] = str_replace('K', ' Ko', $this->maxPost['display']);
            if(substr_count($maxPost, 'K')) $this->maxPost['value'] = str_replace('K', '', $maxPost) * 1024;
            elseif(substr_count($maxPost, 'M')) $this->maxPost['value'] = str_replace('M', '', $maxPost) * 1024 * 1024;
            elseif(substr_count($maxPost, 'G')) $this->maxPost['value'] = str_replace('G', '', $maxPost) * 1024 * 1024 * 1024;
            else $this->maxPost['value'] = 0;

        }

        /* charge le javascript */
        public function AdminMediasUpload() {
            echo '<script src="'.PLX_PLUGINS.'simpleImageResizer/simpleImageResizer.js"></script>
            <script>
            hideResizeImages();
            </script>
            ';
        }

        /* affiche un texte dans le pied*/
        public function AdminMediasFoot() {
            echo '<p>simpleImageResizer</p>';
        }

        /* recuperation de l'envoi d'un fichier avant traitement par les fonctions natives */
        public function AdminPrepend() {
            if(!empty($_POST['btn_upload'])) {
                $this->uploadFiles($_FILES, $_POST);
                header('Location: medias.php');
            }
        }
        /* fonction native réecrite */
        public function uploadFiles($usrfiles, $post) { 

            $files = array();
            if(isset($post['myfiles'])) {
                foreach($post['myfiles'] as $key => $val) {
                    list($selnum, $selval) = explode('_', $val);
                    $files[] = array(
                    'name'      => $usrfiles['selector_'.$selnum]['name'][$selval],
                    'size'      => $usrfiles['selector_'.$selnum]['size'][$selval],
                    'tmp_name'  => $usrfiles['selector_'.$selnum]['tmp_name'][$selval]
                    );
                }
            }

            $count=0;
            foreach($files as $file) {
                $thumb = false;
                $resize = false;                

                // La valeur $max_width doit être éditable dans le config.php du plugin
                $max_width =  $this->getParam('maxWidth')=='' ? 1000 : $this->getParam('maxWidth');

                // Récupération du width et height de l'image
                if (getimagesize($file['tmp_name'])) {
                    list($width, $height) = getimagesize($file['tmp_name']);
                }

                $new_width = $width < $max_width ? $width : $max_width;
                $new_height = $width != $new_width ? $new_width * $height / $width : $height;
                if ($width != $new_width || $height != $new_height) {
                    $resize = array('width' => $new_width, 'height' => $new_height);
                }       

                if($res=$this->_uploadFile($file, $resize, $thumb)) {
                    switch($res) {
                        case L_PLXMEDIAS_WRONG_FILESIZE:
                        return plxMsg::Error(L_PLXMEDIAS_WRONG_FILESIZE);
                        break;
                        case L_PLXMEDIAS_WRONG_FILEFORMAT:
                        return plxMsg::Error(L_PLXMEDIAS_WRONG_FILEFORMAT);
                        break;
                        case L_PLXMEDIAS_UPLOAD_ERR:
                        return plxMsg::Error(L_PLXMEDIAS_UPLOAD_ERR);
                        break;
                        case L_PLXMEDIAS_UPLOAD_SUCCESSFUL:
                        $count++;
                        break;
                    }
                }
            }

            if($count==1)
            return plxMsg::Info(L_PLXMEDIAS_UPLOAD_SUCCESSFUL);
            elseif($count>1)
            return plxMsg::Info(L_PLXMEDIAS_UPLOADS_SUCCESSFUL);
        }
        /* copie de la fonction native , modifiable aux besoins */
        public function _uploadFile($file, $resize, $thumb) {

            $i = 1;
            $filename = array();

            if($file['name'] == '')
            return false;

            if($file['size'] > $this->maxUpload['value'])
            return L_PLXMEDIAS_WRONG_FILESIZE;

            if(!preg_match($this->img_exts, $file['name']) AND !preg_match($this->doc_exts, $file['name']))
            return L_PLXMEDIAS_WRONG_FILEFORMAT;

            // On teste l'existence du fichier et on formate son nom pour éviter les doublons
            $filename = pathinfo($file['name']);
            $filename['filename'] = plxUtils::urlify($filename['filename']);
            $upFile = $this->path.$this->dir.$filename['filename'].".".$filename['extension'];
            while(file_exists($upFile)) {
                $upFile = $this->path.$this->dir.$filename['filename'].'-'.$i++.".".$filename['extension'];
            }

            if(!move_uploaded_file($file['tmp_name'],$upFile)) { # Erreur de copie
                return L_PLXMEDIAS_UPLOAD_ERR;
                } else { # Ok
                if(preg_match($this->img_exts, $file['name'])) {
                    plxUtils::makeThumb($upFile, $this->path.'.thumbs/'.$this->dir.basename($upFile), 48, 48);
                    if($resize)
                    plxUtils::makeThumb($upFile, $upFile, $resize['width'], $resize['height'], 80);
                    if($thumb)
                    plxUtils::makeThumb($upFile, plxUtils::thumbName($upFile), $thumb['width'], $thumb['height'], 80);
                }
            }
            return L_PLXMEDIAS_UPLOAD_SUCCESSFUL;
        }       

    }

Le fichier config.php

<?php if(!defined('PLX_ROOT')) exit; ?>
<?php
    /**
        * Plugin for Pluxml
    **/

    # Control du token du formulaire
    plxToken::validateFormToken($_POST);

    if(!empty($_POST)) {        
        $plxPlugin->setParam('maxWidth', $_POST['maxWidth'], 'numeric');        
        $plxPlugin->saveParams();
        header('Location: parametres_plugin.php?p='. basename(__DIR__));
        exit;
    }

    #init var defaut 1000 pixels
    $maxWidth =  $plxPlugin->getParam('maxWidth')=='' ? 1000 : $plxPlugin->getParam('maxWidth');
?>

<form  id="form_max_width" action="parametres_plugin.php?p=<?php echo basename(__DIR__) ;?>" method="post">
    <fieldset><legend><label for="maxWidth"><?php echo $plxPlugin->lang('L_ALLOW_MAX_WIDTH') ?>&nbsp;:</label></legend>
        <?php plxUtils::printSelect('maxWidth',array(
            '250'   => '250 pixels',
            '500'   => '500 pixels',
            '750'   => '750 pixels',
            '1000'  => '1000 pixels',
            '1200'  => '1200 pixels'),
            $maxWidth
            ); 
        echo plxToken::getTokenPostMethod() ?>
        <input type="submit" name="submit" value="<?php $plxPlugin->lang('L_SAVE') ?>"  />
    </fieldset>
</form>

Vient aussi les fichier de langues (juste fr , les autres seront à creer aux besoins) dans le repertoire lang du plugin.
fr.php:

<?php
    $LANG = array(
        'L_ALLOW_MAX_WIDTH' => ' Choix de largeur maximale d\'une image.',
        'L_SAVE'            => ' Enregistrer'
    );
?>

Le fichier d'aide , des fois que

<?php if(!defined('PLX_ROOT')) exit; ?>
<h2>Aide</h2>
<p>Fichier d'aide du plugin imageSimpleResizer</p>
<p>&nbsp;</p>
<h3>Installation</h3>
<p>Telecharger et dezipper le plugins dans le repertoireplugins de votre PluXml</p>
<p>Dans l'administration, activer le plugin</p>
<p>&nbsp;</p>
<h3>Utilisation</h3>
<p>Aucune action requise</p>
<p>Le plugin modifie l'interface d'upload en cachant les options de redimensions d'image et ne limite que la largeur</p>
<h3>Configuration</h3>
<p>La page <i>configuration</i> du plugin permet à partir d'une liste à choix de définir une largeur maximale à partir de laquelle, pluxml redimensionne l'image.</p>
<p> Selectionner une largeur dans la liste et enregistrer</p>

Et puis un fichier infos.xml

<?xml version="1.0" encoding="UTF-8"?>
<document>
    <title><![CDATA[simpleImageResizer]]></title>
    <author><![CDATA[Txori/GC]]></author>
    <version>0.1</version>
    <date>22/09/2023</date>
    <site>txori</site>
    <description><![CDATA[modif upload media]]></description>
    <scope>admin</scope>
</document>

Je peut te faire un zip du plugin si tu as des difficultés à le reconstruire

Txori · septembre 2023

C'est gentil. Aucune difficulté à le reconstruire. Je comprends maintenant comment faire : c'est comme une déviation d'autoroute
Mais du coup, est-ce qu'il ne vaut pas mieux récupérer entièrement la création de la page html dans le plugin, plutôt que de cacher les options de redimensionnement après coup avec le js comme j'avais fait ?

Pour le choix de la largeur, on peut effectivement le remplacer par :

<form id="form_max_width" action="parametres_plugin.php?p=<?php echo basename(__DIR__); ?>" method="post">
    <fieldset>
        <legend><label for="maxWidth"><?php echo $plxPlugin->lang('L_ALLOW_MAX_WIDTH') ?>&nbsp;:</label></legend>
        <input type="number" name="maxWidth" id="maxWidth" min="1" value="<?php echo $maxWidth; ?>" required />
        <?php echo plxToken::getTokenPostMethod() ?>
        <input type="submit" name="submit" value="<?php $plxPlugin->lang('L_SAVE') ?>" />
    </fieldset>
</form>

C'est mieux de laisser l'admin mettre la taille qu'il souhaite plutôt qu'un chiffre arbitraire. Au passage, ça vérifie si la largeur est > 0.

Et pour l'info.xml, ajoutes tes infos si tu comptes le mettre en tuto sur pluxopolis ou dans ton github.

Pour finir, je pense qu'au lieu d'être un plugin, ce devrait être le comportement de base de pluxml concernant l'upload d'images, plutôt que redimensionner et recadrer en 320x200 comme en 2001.

Edit:
mmm... Il doit avoir un couac avec le hook, car ça affiche "Erreur pendant l'envoi du fichier" (L_PLXMEDIAS_UPLOAD_ERR) en haut de page alors que l'envoi et le redimensionnement de l'image s'est passée parfaitement.
Curieusement, le problème vient du fichier lib/class.plx.media.php :

case L_PLXMEDIAS_UPLOAD_ERR:
    return plxMsg::Error(L_PLXMEDIAS_UPLOAD_ERR);
    break;

Est-ce que le plugin prend bien la place de la fonction native, ou est-ce qu'ils sont exécutés les deux à la suite ?

gcyrillus-nomade · septembre 2023

mmm... Il doit avoir un couac avec le hook, car ça affiche "Erreur pendant l'envoi du fichier" (L_PLXMEDIAS_UPLOAD_ERR) en haut de page alors que l'envoi et le redimensionnement de l'image s'est passée parfaitement.

Quelle version de php et de PluXml utilises tu?

Modification sur le traitement du formulaire: on vide la variable au lieu de rediriger. _{(je n'avai pas ces messages d'erreur du à la redirection)}

        /* recuperation de l'envoi d'un fichier avant traitement par les fonctions natives */
        public function AdminPrepend() {
            if(!empty($_POST['btn_upload'])) {
                $this->uploadFiles($_FILES, $_POST);                
                unset($_POST['btn_upload']);// on retire ce champs déjà traiter
            }
        }

Mais du coup, est-ce qu'il ne vaut pas mieux récupérer entièrement la création de la page html dans le plugin, plutôt que de cacher les options de redimensionnement après coup avec le js comme j'avais fait ?

Oui, c'est bien sur possible et cela va en plus montrer comment injecter du code dans PluXml depuis un plugin.
C'est evidement plus sûr que de dépendre de javascript dans ce genre de cas.

La class devient_(edit:maj)_:

<?php


    class simpleImageResizer extends plxPlugin
    {
        # initialisation des variables - reflets des variables natives pour les fonctions copiées/réecrites
        public $path = null;            # chemin vers les médias
        public $dir = null;             # chemin vers le dossier medias affiché
        public $aDirs = array();        # liste des dossiers et sous dossiers
        public $aFiles = array();       # liste des fichiers d'un dossier
        public $maxUpload = array();    # valeur upload_max_filesize
        public $maxPost = array();      # valeur post_max_size  
        public $img_supported = array('.png', '.gif', '.jpg', '.jpeg', '.bmp', '.webp'); # images formats supported
        public $img_exts = '/\.(jpe?g|png|gif|bmp|webp)$/i';
        public $doc_exts = '/\.(7z|aiff|asf|avi|csv|docx?|epub|fla|flv|gpx|gz|gzip|m4a|m4v|mid|mov|mp3|mp4|mpc|mpe?g|ods|odt|odp|ogg|pdf|pptx?|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|svg|swf|sxc|sxw|tar|tgz|txt|vtt|wav|webm|wma|wmv|xcf|xlsx?|zip)$/i';  
        const BEGIN_CODE = '<?php # ' . __CLASS__ . ' plugin' . PHP_EOL;
        const END_CODE = PHP_EOL . '?>';        

        public function __construct($default_lang) {
            # appel du constructeur de la classe plxPlugin (obligatoire)
            parent::__construct($default_lang);

            # Déclaration des hooks
            $this->addHook('AdminMediasPrepend','AdminPrepend');
            $this->addHook('AdminMediasFoot','AdminMediasFoot');
            $this->addHook('AdminMediasTop','AdminMediasTop');



            # droits pour accèder à la page admin.php du plugin
            $this->setAdminProfil(PROFIL_ADMIN);

            # droits pour accèder à la page config.php du plugin
            $this->setConfigProfil(PROFIL_ADMIN);

            # Initialisation Reprises du fonctionnement des variables utilisé par PluXml à l'attention des deux fonctions de remplacements
            $this->path =PLX_ROOT.$_SESSION['medias'];
            $this->dir = $_SESSION['folder'];

            # Taille maxi des fichiers
            $maxUpload = strtoupper(ini_get("upload_max_filesize"));
            $this->maxUpload['display'] = str_replace('M', ' Mo', $maxUpload);
            $this->maxUpload['display'] = str_replace('K', ' Ko', $this->maxUpload['display']);
            if(substr_count($maxUpload, 'K')) $this->maxUpload['value'] = str_replace('K', '', $maxUpload) * 1024;
            elseif(substr_count($maxUpload, 'M')) $this->maxUpload['value'] = str_replace('M', '', $maxUpload) * 1024 * 1024;
            elseif(substr_count($maxUpload, 'G')) $this->maxUpload['value'] = str_replace('G', '', $maxUpload) * 1024 * 1024 * 1024;
            else $this->maxUpload['value'] = 0;

            # Taille maxi des données
            $maxPost = strtoupper(ini_get("post_max_size"));
            $this->maxPost['display'] = str_replace('M', ' Mo', $maxPost);
            $this->maxPost['display'] = str_replace('K', ' Ko', $this->maxPost['display']);
            if(substr_count($maxPost, 'K')) $this->maxPost['value'] = str_replace('K', '', $maxPost) * 1024;
            elseif(substr_count($maxPost, 'M')) $this->maxPost['value'] = str_replace('M', '', $maxPost) * 1024 * 1024;
            elseif(substr_count($maxPost, 'G')) $this->maxPost['value'] = str_replace('G', '', $maxPost) * 1024 * 1024 * 1024;
            else $this->maxPost['value'] = 0;

        }

        /* charge le javascript */
        public function AdminMediasTop() {
            echo self::BEGIN_CODE;
        ?>
        //code injecter dans medias.php
        include(PLX_ROOT.'plugins/<?= basename(__DIR__)?>/simpleImageResizerForm.php');
        exit;//on sort maintenant
        <?php
            echo self::END_CODE;            
        }

        /* affiche un texte dans le pied*/
        public function AdminMediasFoot() {
            echo '<p>simpleImageResizer</p>';
        }

        /* recuperation de l'envoi d'un fichier avant traitement par les fonctions natives */
        public function AdminPrepend() {
            if(!empty($_POST['btn_upload'])) {
                $this->uploadFiles($_FILES, $_POST);                
                unset($_POST['btn_upload']);// on retire ce champs déjà traiter
            }
        }
        /* fonction native réecrite */
        public function uploadFiles($usrfiles, $post) { 

            $files = array();
            if(isset($post['myfiles'])) {
                foreach($post['myfiles'] as $key => $val) {
                    list($selnum, $selval) = explode('_', $val);
                    $files[] = array(
                    'name'      => $usrfiles['selector_'.$selnum]['name'][$selval],
                    'size'      => $usrfiles['selector_'.$selnum]['size'][$selval],
                    'tmp_name'  => $usrfiles['selector_'.$selnum]['tmp_name'][$selval]
                    );
                }
            }

            $count=0;
            foreach($files as $file) {
                $thumb = false;
                $resize = false;                

                // La valeur $max_width doit être éditable dans le config.php du plugin
                $max_width =  $this->getParam('maxWidth')=='' ? 1000 : $this->getParam('maxWidth');

                // Récupération du width et height de l'image
                if (getimagesize($file['tmp_name'])) {
                    list($width, $height) = getimagesize($file['tmp_name']);
                }

                $new_width = $width < $max_width ? $width : $max_width;
                $new_height = $width != $new_width ? $new_width * $height / $width : $height;
                if ($width != $new_width || $height != $new_height) {
                    $resize = array('width' => $new_width, 'height' => $new_height);
                }       

                if($res=$this->_uploadFile($file, $resize, $thumb)) {
                    switch($res) {
                        case L_PLXMEDIAS_WRONG_FILESIZE:
                        return plxMsg::Error(L_PLXMEDIAS_WRONG_FILESIZE);
                        break;
                        case L_PLXMEDIAS_WRONG_FILEFORMAT:
                        return plxMsg::Error(L_PLXMEDIAS_WRONG_FILEFORMAT);
                        break;
                        case L_PLXMEDIAS_UPLOAD_ERR:
                        return plxMsg::Error(L_PLXMEDIAS_UPLOAD_ERR);
                        break;
                        case L_PLXMEDIAS_UPLOAD_SUCCESSFUL:
                        $count++;
                        break;
                    }
                }
            }

            if($count==1)
            return plxMsg::Info(L_PLXMEDIAS_UPLOAD_SUCCESSFUL);
            elseif($count>1)
            return plxMsg::Info(L_PLXMEDIAS_UPLOADS_SUCCESSFUL);
        }
        /* copie de la fonction native , modifiable aux besoins */
        public function _uploadFile($file, $resize, $thumb) {

            $i = 1;
            $filename = array();

            if($file['name'] == '')
            return false;

            if($file['size'] > $this->maxUpload['value'])
            return L_PLXMEDIAS_WRONG_FILESIZE;

            if(!preg_match($this->img_exts, $file['name']) AND !preg_match($this->doc_exts, $file['name']))
            return L_PLXMEDIAS_WRONG_FILEFORMAT;

            // On teste l'existence du fichier et on formate son nom pour éviter les doublons
            $filename = pathinfo($file['name']);
            $filename['filename'] = plxUtils::urlify($filename['filename']);
            $upFile = $this->path.$this->dir.$filename['filename'].".".$filename['extension'];
            while(file_exists($upFile)) {
                $upFile = $this->path.$this->dir.$filename['filename'].'-'.$i++.".".$filename['extension'];
            }

            if(!move_uploaded_file($file['tmp_name'],$upFile)) { # Erreur de copie
                return L_PLXMEDIAS_UPLOAD_ERR;
                } else { # Ok
                if(preg_match($this->img_exts, $file['name'])) {
                    plxUtils::makeThumb($upFile, $this->path.'.thumbs/'.$this->dir.basename($upFile), 48, 48);
                    if($resize)
                    plxUtils::makeThumb($upFile, $upFile, $resize['width'], $resize['height'], 80);
                    if($thumb)
                    plxUtils::makeThumb($upFile, plxUtils::thumbName($upFile), $thumb['width'], $thumb['height'], 80);
                }
            }
            return L_PLXMEDIAS_UPLOAD_SUCCESSFUL;
        }       

    }

avec un nouveau fichier pour le plugin nommé : simpleImageResizerForm.php

<?php if(!defined('PLX_ROOT')) exit; ?>
<form method="post">
    <!-- Rename File Dialog -->
    <div id="dlgRenameFile" class="dialog">
        <div class="dialog-content">
            <?php echo L_MEDIAS_NEW_NAME ?>&nbsp;:&nbsp;
            <input id="id_newname" type="text" name="newname" value="" maxlength="50" size="15" />
            <input id="id_oldname" type="hidden" name="oldname" />
            <?php echo plxToken::getTokenPostMethod() ?>
            <input type="submit" name="btn_renamefile" value="<?php echo L_MEDIAS_RENAME ?>" />
            <span class="dialog-close">&times;</span>
        </div>
    </div>
</form>

<form method="post" id="form_medias">

    <!-- New Folder Dialog -->
    <div id="dlgNewFolder" class="dialog">
        <div class="dialog-content">
            <span class="dialog-close">&times;</span>
            <?php echo L_MEDIAS_NEW_FOLDER ?>&nbsp;:&nbsp;
            <input id="id_newfolder" type="text" name="newfolder" value="" maxlength="50" size="15" />
            <input type="submit" name="btn_newfolder" value="<?php echo L_MEDIAS_CREATE_FOLDER ?>" />
        </div>
    </div>

    <div class="inline-form" id="files_manager">

        <div class="inline-form action-bar">
            <h2><?php echo L_MEDIAS_TITLE ?></h2>
            <p>
                <?php
                echo L_MEDIAS_DIRECTORY.' : <a href="javascript:void(0)" onclick="document.forms[1].folder.value=\'.\';document.forms[1].submit();return true;" title="'.L_PLXMEDIAS_ROOT.'">('.L_PLXMEDIAS_ROOT.')</a> / ';
                if($curFolders) {
                    $path='';
                    foreach($curFolders as $id => $folder) {
                        if(!empty($folder) AND $id>1) {
                            $path .= $folder.'/';
                            echo '<a href="javascript:void(0)" onclick="document.forms[1].folder.value=\''.$path.'\';document.forms[1].submit();return true;" title="'.$folder.'">'.$folder.'</a> / ';
                        }
                    }
                }
                ?>
            </p>
            <?php plxUtils::printSelect('selection', $selectionList, '', false, 'no-margin', 'id_selection') ?>
            <input type="submit" name="btn_ok" value="<?php echo L_OK ?>" onclick="return confirmAction(this.form, 'id_selection', 'delete', 'idFile[]', '<?php echo L_CONFIRM_DELETE ?>')" />
            <span class="sml-hide med-show">&nbsp;&nbsp;&nbsp;</span>
            <input type="submit" onclick="toggle_divs();return false" value="<?php echo L_MEDIAS_ADD_FILE ?>" />
            <button onclick="dialogBox('dlgNewFolder');return false;" id="btnNewFolder"><?php echo L_MEDIAS_NEW_FOLDER ?></button>
            <?php if(!empty($_SESSION['folder'])) { ?>
            <span class="sml-hide med-show">&nbsp;&nbsp;&nbsp;</span><input type="submit" name="btn_delete" class="red" value="<?php echo L_DELETE_FOLDER ?>" onclick="return confirm('<?php printf(L_MEDIAS_DELETE_FOLDER_CONFIRM, $curFolder) ?>')" />
            <?php } ?>
            <input type="hidden" name="sort" value="" />
            <?php echo plxToken::getTokenPostMethod() ?>
        </div>

        <div style="float:left">
            <?php echo L_MEDIAS_FOLDER ?>&nbsp;:&nbsp;<?php $plxMedias->contentFolder() ?>
            <input type="submit" name="btn_changefolder" value="<?php echo L_OK ?>" /><span class="sml-hide med-show">&nbsp;&nbsp;&nbsp;</span>
        </div>

        <div style="float:right">
            <input type="text" id="medias-search" onkeyup="plugFilter()" placeholder="<?php echo L_SEARCH ?>..." title="<?php echo L_SEARCH ?>" />
        </div>

        <div style="clear:both" class="scrollable-table">
            <table id="medias-table" class="full-width">
                <thead>
                <tr>
                    <th class="checkbox"><input type="checkbox" onclick="checkAll(this.form, 'idFile[]')" /></th>
                    <th>&nbsp;</th>
                    <th><a href="javascript:void(0)" class="hcolumn" onclick="document.forms[1].sort.value='<?php echo $sort_title ?>';document.forms[1].submit();return true;"><?php echo L_MEDIAS_FILENAME ?></a></th>
                    <th><?php echo L_MEDIAS_EXTENSION ?></th>
                    <th><?php echo L_MEDIAS_FILESIZE ?></th>
                    <th><?php echo L_MEDIAS_DIMENSIONS ?></th>
                    <th><a href="javascript:void(0)" class="hcolumn" onclick="document.forms[1].sort.value='<?php echo $sort_date ?>';document.forms[1].submit();return true;"><?php echo L_MEDIAS_DATE ?></a></th>
                </tr>
                </thead>
                <tbody id="medias-table-tbody">
                <?php
                # Initialisation de l'ordre
                $num = 0;
                # Si on a des fichiers
                if($plxMedias->aFiles) {
                    foreach($plxMedias->aFiles as $v) { # Pour chaque fichier
                        $isImage = in_array(strtolower($v['extension']), $plxMedias->img_supported);
                        $title = pathinfo($v['name'], PATHINFO_FILENAME);
                        echo '<tr>';
                        echo '<td><input type="checkbox" name="idFile[]" value="'.$v['name'].'" /></td>';
                        echo '<td class="icon">';
                            if(is_file($v['path']) AND $isImage) {
                                echo '<a class="overlay" title="'.$title.'" href="'.$v['path'].'"><img alt="'.$title.'" src="'.$v['.thumb'].'" class="thumb" /></a>';
                            }
                            else
                                echo '<img alt="" src="'.$v['.thumb'].'" class="thumb" />';
                        echo '</td>';
                        echo '<td>';
                            echo '<a class="imglink" onclick="'."this.target='_blank'".'" title="'.$title.'" href="'.$v['path'].'">'.$title.$v['extension'].'</a>';
                            echo '<div data-copy="'.str_replace(PLX_ROOT, '', $v['path']).'" title="'.L_MEDIAS_LINK_COPYCLP.'" class="ico">&#128203;<div>'.L_MEDIAS_LINK_COPYCLP_DONE.'</div></div>';
                            echo '<div data-rename="'.$v['path'].'" title="'.L_RENAME_FILE.'" class="ico">&#9998;</div>';
                            echo '<br />';
                            $href = plxUtils::thumbName($v['path']);
                            if($isImage AND is_file($href)) {
                                echo L_MEDIAS_THUMB.' : '.'<a onclick="'."this.target='_blank'".'" title="'.$title.'" href="'.$href.'">'.plxUtils::strCheck(basename($href)).'</a>';
                                echo '<div data-copy="'.str_replace(PLX_ROOT, '', $href).'" title="'.L_MEDIAS_LINK_COPYCLP.'" class="ico">&#128203;<div>'.L_MEDIAS_LINK_COPYCLP_DONE.'</div></div>';
                            }
                        echo '</td>';
                        echo '<td>'.strtoupper($v['extension']).'</td>';
                        echo '<td>';
                            echo plxUtils::formatFilesize($v['filesize']);
                            if($isImage AND is_file($href)) {
                                echo '<br />'.plxUtils::formatFilesize($v['thumb']['filesize']);
                            }
                        echo '</td>';
                        $dimensions = '&nbsp;';
                        if($isImage AND (isset($v['infos']) AND isset($v['infos'][0]) AND isset($v['infos'][1]))) {
                            $dimensions = $v['infos'][0].' x '.$v['infos'][1];
                        }
                        if($isImage AND is_file($href)) {
                            $dimensions .= '<br />'.$v['thumb']['infos'][0].' x '.$v['thumb']['infos'][1];
                        }
                        echo '<td>'.$dimensions.'</td>';
                        echo '<td>'.plxDate::formatDate(plxDate::timestamp2Date($v['date'])).'</td>';
                        echo '</tr>';
                    }
                }
                else echo '<tr><td colspan="7" class="center">'.L_MEDIAS_NO_FILE.'</td></tr>';
                ?>
                </tbody>
            </table>
        </div>
    </div>
</form>

<form action="medias.php" method="post" id="form_uploader" class="form_uploader" enctype="multipart/form-data">

    <div id="files_uploader" style="display:none">

        <div class="inline-form action-bar">
            <h2 class="h4"><?php echo L_MEDIAS_TITLE ?></h2>
            <p>
                <?php
                echo L_MEDIAS_DIRECTORY.' : ('.L_PLXMEDIAS_ROOT.') / ';
                if($curFolders) {
                    $path='';
                    foreach($curFolders as $id => $folder) {
                        if(!empty($folder) AND $id>1) {
                            $path .= $folder.'/';
                            echo $folder.' / ';
                        }
                    }
                }
                ?>
            </p>
            <input type="submit" name="btn_upload" id="btn_upload" value="<?php echo L_MEDIAS_SUBMIT_FILE ?>" />
            <?php echo plxToken::getTokenPostMethod() ?>
        </div>

        <p><a class="back" href="javascript:void(0)" onclick="toggle_divs();return false"><?php echo L_MEDIAS_BACK ?></a></p>

        <p>
            <?php echo L_MEDIAS_MAX_UPLOAD_NBFILE ?> : <?php echo ini_get('max_file_uploads') ?>
        </p>
        <p>
            <?php echo L_MEDIAS_MAX_UPLOAD_FILE ?> : <?php echo $plxMedias->maxUpload['display'] ?>
            <?php if($plxMedias->maxPost['value'] > 0) echo " / ".L_MEDIAS_MAX_POST_SIZE." : ".$plxMedias->maxPost['display']; ?>
        </p>

        <div>
            <input id="selector_0" type="file" multiple="multiple" name="selector_0[]" accept="image/*,audio/*,video/*,.pdf,.zip" />
            <div class="files_list" id="files_list" style="margin: 1rem 0 1rem 0;"></div>
        </div>
        <?php eval($plxAdmin->plxPlugins->callHook('AdminMediasUpload')) # Hook Plugins ?>
    </div>

</form>

<div class="modal">
    <input id="modal" type="checkbox" name="modal" tabindex="1">
    <div id="modal__overlay" class="modal__overlay">
        <div id="modal__box" class="modal__box">
            <img id="zoombox-img" />
            <label for="modal">&#10006;</label>
        </div>
    </div>
</div>

<input id="clipboard" type="text" value="" style="display: none;" />

<script type="text/javascript" src="<?php echo PLX_CORE ?>lib/medias.js"></script>

<?php
# Hook Plugins
eval($plxAdmin->plxPlugins->callHook('AdminMediasFoot'));
# On inclut le footer
include PLX_ROOT.'core/admin/foot.php';

cdt

Txori · septembre 2023

Php 8.2.10 et PluXml 5.8.9. Super à la page !
Plus de faux message d'erreur avec ta dernière modification, parfait

herve · septembre 2023

Bonjour,

Cette discussion m’intéresse, parce que à la suite d'une précédente question sur ce forum (que j'ai pas réussie à retrouver), je n'indique plus la dimension de mes images, c'est à dire que j'efface systématiquement l'info de hauteur et de largeur dans le dialogue d'insertion d'image, et ça se débrouille beaucoup mieux comme ça.

Vous pouvez voir la chose sur mon pluxml perso : https://papillonembarrasse.ouvaton.org

J'ai l'impression que ce plugin fait ça tout seul ?... Est-ce que c'est mieux de l'utiliser, ou bien est-ce qu'il va être intégré, parce que ça pourrait être une option naturelle ?... Et si oui d'où se télécharge-t-il ?...

Merci.

gcyrillus-nomade · septembre 2023

Bonjour @herve
Je vais préparer une archive dans le week-end pour que tu puisses le télécharger et l'installer.

Pour les infos du fichier, sitôt que tu redimensionne ou retravail une image via php, les données exif sont perdues . Pour les garder ou les modifier, il faut aussi inclure cette moulinette dans le code. Pluxml ne le fait pas.

De quelles options aurait tu besoin ou bien qui te semblerait utile pour une majorité. C'est l'occasion ou jamais .....
Cdt

herve · septembre 2023

Oaf je sais pas. Merci en tous cas.

Du coup j'ai fait exprès un message avec une photo, pour voir. Je les fais pratiquement toujours de la même façon : l'image, puis un petit texte descriptif, et quand c'est une image que j'ai mise sur Commons - la médiathèque de wikipédia - j'y mets le lien vers ça.

Je voulais vous mettre une photo d'écran pour vous montrer ma situation, mais le système de téléchargement de photo ne fonctionne pas sur le forum avec moi ?

Bon, dans la série "ça serait bien..." : un bouton et pouf ! la largeur et la longueur sont vides - il ne faut pas "0", il faut rien, ou alors, plus intellectuel, un bouton "l'image s'adapte à la place disponible", quelque chose comme ça ; aussi, que l'aperçu soit à la bonne forme, ça serait plus confort. De toutes façons ce qui m'intéresse surtout c'est la bonne pratique et comment font les autres plutot que les boutons.

Et si voulez voir le résultat : https://papillonembarrasse.ouvaton.org/index.php?article199/l-eglise-de

À bientot.

herve · septembre 2023

Ah et j'ai oublié de dire, je ne retravaille pas la photo par le php, mais sur mon poste, par gimp. L'image que je upload est donc prête. Je ne demande aucune transformation à pluxml, sauf celles nécessaires à son positionnement dans le blog.

gcyrillus-nomade · septembre 2023

sauf celles nécessaires à son positionnement dans le blog.

Okay, cela dépendra du thème et si l'mage est insérer comme une image d'accroche à un article ou dans l'article lui même . Donc à priori ton soucis est l'affichage, la c'est à partir du thème

pour l'image d'accroche c'est <?php $plxShow->artThumbnail(); ?> qui s'en charge . Par défaut la config de cette fonction est artThumbnail($format = '<a href="#img_url"><img class="art_thumbnail" src="#img_thumb_url" alt="#img_alt" title="#img_title" /></a>', $echo = true, $article = false) en créant un lien vers l'mage et en affichant la miniature. Tu peut modifier cela , voir: https://wiki.pluxml.org/docs/develop/plxshow.html#artthumbnail par exemple en faisant <?php $plxShow->artThumbnail('<figure class="mon-image><img src="#img_url" alt="#img_alt"><figcaption><p>#img_alt</p></figcaption></figure>'); ?> et depuis la feuille de style tu peut styler cette boite comme du l'entends:
par exemple en ajoutant à la feuille de style:

.mon-image {/* la boite figure */
   display:grid;
  margin:1em;
  padding:0;
  border:solid 1px gray;
}
.mon-image img {/* l'image */
  width:100%;
  display:block;
}
.mon-image figcaption {/* description */
  background:#555;
  color:#eee;
}
/* etc .. */

à l'insertion d'une image dans un article, alors c'est au choix du rédacteur de produire le HTML nécessaire à ce qu'il veut, au minimum <img src="source-de-l-image" alt="descriptif court" /> .Un éditeur wysiwyg propose généralement de générer ce code HTML avec parfois quelques autres options.

A priori tu n'as effectivement pas besoin de plugin si tu prépare tes images à l'avance avec GIMP comme tu l'indique,
cdt

gcyrillus-nomade · septembre 2023

Voici l'archive du plugin évoqué dans ce fil : https://github.com/gcyrillus/simpleImageResizer/archive/refs/heads/main.zip

gcyrillus-nomade · 8 avril

Archive mise à jour 10/04/2024 https://github.com/gcyrillus/simpleImageResizer/

[Résolu] Nouvelle option de redimensionnement d'image

Réponses