Dans quel cas redimensionner des images uploadées ?
Il peut être très pratique, dans certains cas, de proposer à vos utilisateurs d’uploader une image via un formulaire WPForms. Bien entendu le plugin vous permet de paramétrer les champs d’upload et d’y mettre des restrictions (types de fichiers autorisés et taille maxi) afin de ne pas plomber votre serveur. Cependant, parfois, et notamment si vous voulez proposer des galeries d’images dynamiques, il peut être utile de redimensionner une image avant qu’elle ne soit envoyée à votre serveur.
1ère partie : le formulaire
Pour l’exemple j’ai construit un petit formulaire WPForms avec un champ d’uplaod unique, réglé pour accepter uniquement des images JPG.
2ème partie : traitement du formulaire
Comme nous l’avons vu dans ce tuto, nous allons envoyer notre image redimensionnée vers “mon-dossier-perso” du répertoire uploads au lieu du dossier par défaut de WPForms. Vous trouverez donc certaines fonctions utilisées ici sur la page du tuto Upload WPForms dans un dossier au choix. La fonction est commentée afin de bien comprendre chaque instruction.
add_action( 'wpforms_process_complete', 'traite_form_upload', 10, 4 );
function traite_form_upload($fields, $entry, $form_data, $entry_id){
if ( absint( $form_data['id'] ) !== 684) { //ici votre ID du formulaire concerné
return;
}
// Get the full entry object
$entry = wpforms()->entry->get( $entry_id );
// Fields are in JSON, so we decode to an array
$data = json_decode( $entry->fields, true );
$images = $data[1]['value']; // traitement d'un champ d'upload fichiers
//dans tous les cas, le chiffre est à remplacer par l'ID de votre champ
if(!empty($images)){
//supposons que vous souhaitiez envoyer vos fichiers dans le répertoir "mon-dossier-perso" situé dans wp-content/uploads
$absolute_url = "https://wp-codes.fr/wp-content/uploads/mon-dossier_perso";
$dossier_destination = get_server_path_from_url($absolute_url);
$img = preg_split('/\s+/', $images); // si c'est un upload fichiers multiples, WPForms va séparer les fichiers par des espaces que l'on va séparer pour former un tableau le cas échéant
if(is_countable($img) && count($img) > 1){ //si le champs upload WPForms est multiple, nous avons un tableau
foreach($img as $im){
deplace_fichiers_wpforms($im, $dossier_destination);
//déplacement des images vers mon-dossier-perso
}
}else{ // ici un upload simple (non multiple)
deplace_fichiers_wpforms($images, $dossier_destination);
//déplacement de l'image vers mon-dossier-perso
}
}
}
Voici la fonction deplace_fichiers_wpforms() dans laquelle nous appellerons la fonction de redimensionnement :
La fonction deplace_fichiers_wpforms()
function deplace_fichiers_wpforms($fichiers_wpforms, $dossier_destination){
// Vérifier que le dossier de destination existe ou le créer
if ( ! file_exists( $dossier_destination ) ) {
wp_mkdir_p( $dossier_destination ); // créer le dossier de destination s'il n'existe pas
}
//Ci-dessous la ligne permet de convertir l'URL d'un fichier (générée par WPForms) en un chemin absolu sur le système de fichiers du serveur, afin de pouvoir déplacer ou manipuler ce fichier localement.
$chemin_upload = str_replace( home_url(), rtrim(ABSPATH, '/'), $fichiers_wpforms );
// Déplacer le fichier uploadé vers le dossier de destination
$fichier = basename( $chemin_upload ); // Nom du fichier
$destination = $dossier_destination .'/'. $fichier; //ne pas oublier le /
$erreur = "";
// Déplacement du fichier (et suppression du fichier dans le dossier par défaut de WPForms)
$erreurs = array();//tableau pour la gestion des erreurs
if ( file_exists( $chemin_upload ) ) {
if(!rename( $chemin_upload, $destination )){
$erreurs[] = "Erreur déplacement de {$chemin_upload} à {$destination}";
}
if(!redim_image_upload($destination,1200,1200)){
//Appel de la fonction de redimension
//dans laquelle les dimensions (L, H) sont passées en paramètres
$erreurs[] = "Erreur redimension de {$chemin_upload}";
}
}else{
$erreurs[] .= "Le fichier $chemin_upload n'existe pas";
}
if (!empty($erreurs)) { // si debug et debug_log définis à true dans wp-config.php écriture des erreurs dans wp-content/debug.log
foreach ($erreurs as $erreur) {
error_log($erreur);
// écriture des erreurs dans le fichier wp-content/debug.log
}
}
}
Et pour finir, la fonction qui redimensionne l’image déplacée grâce à la classe WordPress WP_Image_Editor() :
La fonction de redimensionnement de l'image
function redim_image_upload($filename, $maxWidth = 1600, $maxHeight = 1600) {
//dimensions L, H par défaut
if (!file_exists($filename)) {
error_log("fichier {$filename} exiet pas");
return;
}
// Vérifier si le fichier est une image
$file_info = wp_check_filetype($filename);
$allowed_types = array('image/jpeg', 'image/png', 'image/gif', 'image/webp');
if (!in_array($file_info['type'], $allowed_types)) {
return; // Ne rien faire si ce n'est pas une image
}
$quality = 80;
// Réglage de la qualité<br>
// Plus le chiffre est bas, plus la qualité et faible et l'image légère
// Charger l'éditeur d'image de WordPress
$editor = wp_get_image_editor($filename);
if (is_wp_error($editor)) {
return "Erreur lors du chargement de l'image";
}
// Obtenir les dimensions actuelles de l'image
$dimensions = $editor->get_size();
$width = $dimensions['width'];
$height = $dimensions['height'];
// Calculer le ratio d'aspect de l'image
$aspect_ratio = $width / $height;
// Redimensionner en fonction des dimensions maximum définies
if ($width > $height && $width > $maxWidth) {
$newWidth = $maxWidth;
$newHeight = intval($maxWidth / $aspect_ratio); // Garder le ratio
} elseif ($height > $width && $height > $maxHeight) {
$newHeight = $maxHeight;
$newWidth = intval($maxHeight * $aspect_ratio); // Garder le ratio
} else {
//l'image uploadée est plus petite que les dimensions définies
//on garde sa taille d'origine;
$newWidth = $width;
$newHeight = $height;
}
// Redimensionner l'image
$result = $editor->resize($newWidth, $newHeight, true);
if (!is_wp_error($result)) {
// Sauvegarder l'image principale redimensionnée
// $editor->save($filename, 'image/jpeg', array('quality' => $quality));
$editor->save($filename, $file_info['type'], array('quality' => $quality));
} else {
return "Erreur lors du redimensionnement";
}
}
Conclusion : Redimensionner des images uploadées
Avec ces fonctions, mon image envoyée dans le formulaire a été envoyée dans mon-dossier-perso et elle est est passée de 4200 pixels de largeur à 1200 en conservant son ration largeur / hauteur. Il vous est maintenant possible de redimensionner des images uploadées automatiquement grâce au puissant Editeur d’Images de WordPress.
