[Résolu] modifier le format automatique des images (Créer un compte)

  • WordPress :6.4
  • Statut : résolu
  • Ce sujet contient 19 réponses, 4 participants et a été mis à jour pour la dernière fois par RachPat, le il y a 6 mois.
15 sujets de 1 à 15 (sur un total de 20)
  • Auteur
    Messages
  • #2470763
    RachPat
    Participant
    Initié WordPress
    29 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 8.1.27 / 10.6.17-MariaDB
    • Thème utilisé : Amy Movie 3.5.2
    • Extensions en place :
      Amy Movie Extends Version 3.5.5 par Amytheme
      AmyTheme Framework Version 1.4.1 par AmyTheme
      WPBakery Page Builder Version 7.5 par Michael M – WPBakery.com
    • Nom de l’hébergeur : o2switch
    • Adresse du site : https://cinelefoyer.com/

    Problème(s) rencontré(s) :

    Bonjour, ça fait un moment que mon site cinelefoyer.com est en ligne mais je cherche à améliorer un élément de présentation : le format des images telles qu’elles apparaissent dans une page film : https://cinelefoyer.com/film/la-vie-de-ma-mere-2/
    ou dans les caroussels de page d’accueil : https://cinelefoyer.com
    car les affiches sont rabotées en largeur et ne laisse pas lire le titre du film en entier.

    Je crois comprendre qu’une moulinette de recadrage se fait automatiquement en transformant mes images au format nomdufichier-360x618_c.jpg,
    ce qui correspondrait à la classe « entry-thumb »

    Il me reste à savoir comment modifier cette transformation pour un format + homothétique aux affiches de cinéma, par exemple 360×480 au lieu de 360×618.

    Je suis capable de bidouiller avec des copiés-collés mais je ne connais pas assez les codes pour comprendre à quel niveau cette moulinette se fait : au niveau de wordpresse ? du thème ? des extensions ? des css ?

    Merci beaucoup à toute personne qui saura m’aiguiller !
    Très bonne journée

     

    #2470767
    Flobogo
    Modérateur
    Maître WordPress
    20400 contributions

    Bonjour,

    Il faut d’abord créer un thème-enfant : soit manuellement (tuto-1 ou tuto-2), soit avec l’extension Child Theme Configurator.

    Ensuite, dans le fichier functions.php du thème-enfant, il faudra ajouter un hook (un code qui vient modifier une fonction existante) pour enregistrer votre nouveau format d’image → tuto pour ajouter des tailles d’image personnalisées.

     

    #2470787
    RachPat
    Participant
    Initié WordPress
    29 contributions

    Bonjour,
    merci beaucoup pour votre réponse,
    j’ai suivi le tuto et rajouté le code suivant dans le fichier functions.php du thème enfant actif :

    /*
    * Création taille de miniature adaptée au format affiche film
    */
    function reuhno_setup_init_images() {
    add_image_size( ‘entry-thumb’, 480, 360, true );
    }

    add_action( ‘after_setup_theme’, ‘reuhno_setup_init_images’ );

     

    J’ai ensuite créé une nouvelle fiche film avec un nouveau import d’image mais ça n’a pas marché, l’image reste au format 360×618 (elle a été renommée nomdelimage-360x618_c.jpg.)

     

    Autre piste explorée :
    afin de dénicher quel fichier génère le format 360×618 j’ai arpenté quasi tous les fichiers du theme et des plugins associés en faisant une recherche sur « 360×618 », et j’ai trouvé le fichier ci-joint dans le dossier upload > wp-content/uploads/amy-movie/multi-cinema/multi-cinema.json
    J’ai remplacé tous les « 360×618 » par « 360×480 » mais rien n’a pas bougé… ç’aurait été trop facile !
    Mais peut-être qu’il y a là la clé d’une manip à faire, pour quelqu’un qui sait lire le code ?

    Merci d’avance à toute personne qui prend le temps de regarder ça et très bonne journée !

     

     

     

    #2470788
    RachPat
    Participant
    Initié WordPress
    29 contributions

    oooops, mon fichier joint n’a pas pu être joint, voici donc son adresse :

    https://cinelefoyer.com/wp-content/uploads/amy-movie/multi-cinema/multi-cinema.json

     

    #2470820
    Li-An
    Participant
    Maître WordPress
    28722 contributions

    Bonjour, ce fichier est géré par votre thème. Je vous conseille fortement de contacter l’équipe de développement pour voir comment vous pourriez obtenir le comportement espéré.

    #2470824
    Flobogo
    Modérateur
    Maître WordPress
    20400 contributions

    j’ai suivi le tuto et rajouté le code suivant dans le fichier functions.php du thème enfant actif :

    /*
    * Création taille de miniature adaptée au format affiche film
    */
    function reuhno_setup_init_images() {
    add_image_size( ‘entry-thumb’, 480, 360, true );
    }
    add_action( ‘after_setup_theme’, ‘reuhno_setup_init_images’ );

    J’ai ensuite créé une nouvelle fiche film avec un nouveau import d’image mais ça n’a pas marché

    C’est logique : vous ne pouvez pas utiliser le nom ‘entry-thumb’ pour votre nouvelle taille d’image, puisque ce nom existe.

    Il faudrait créer une nouvelle taille appelée image-cine (pas d’accent !!) par exemple, et ensuite, il faut effectivement trouver le (ou les) fichier(s) qui gère(nt) l’appel de cette taille d’image. Il faudra alors copier ces ficchiers dans le thème-enfant, et remplacer ‘entry-thumb’ par ‘image-cine’

    Au lieu de faire la recherche sur la taille 360×618 faites une recherche sur entry-thumb

    Sinon, comme le suggère @li-an, faites appel au support du thème. S’agissant d’un thème payant, on ne peut pas vous aider plus précisément, puisqu’on n’a pas accès aux fichiers du thème.

    #2470901
    RachPat
    Participant
    Initié WordPress
    29 contributions

    Bonjour, merci beaucoup pour vos réponses.
    J’ai en effet écrit au créateur du thème mais sans réponse pour l’instant…

    Je poursuis donc mes tentatives avec vos indications !

    J’ai tenté de rajouter un nouveau format renommé affiche-cine dans le fichier functions.php du thème child actif,
    puis j’ai remplacé entry-thumb par affiche-cine dans le fichier content-single-movie.php, que j’ai placé dans le thème child.
    Puis j’ai créé une nouvelle fiche film en important une nouvelle affiche, mais ça n’a rien fait, car systématiquement c’est une image recadrée et renommée nomdelimage-360x618_c.jpg qui est utilisée…

    J’ai fait d’autres recherches sur entry-thumb mais il apparait souvent… alors difficile de comprendre ce qui influera ou pas…

    Mais j’ai trouvé un autre fichier qui me semble intéressant mais incompréhensible pour moi : il s’appelle resize.php et je comprends qu’il commande le renommage des fichiers recadrés avec _c.
    Ce fichier a sa place dans le dossier « inc/core » du thème amymovie (si ça a son importance ?)
    Je le mets en pièce jointe si quelque passionné a toujours le goût de m’aider !

    Merci d’avance de vos suggestions, je me sens moins seule !

    PS : je ne sais pas si déontologiquement c’est possible mais je pourrais aussi proposer un .zip du thème à qui voudrait m’aider… ?

    Très bonne soirée !

    #2470902
    RachPat
    Participant
    Initié WordPress
    29 contributions

    ah d’accord, je n’avais pas compris que l’on ne pouvait pas joindre des fichiers php !
    voici donc le fichier resize.php en copié collé, avec en gras ce qui me semble intéressant (mais je suis peut-être complètement à côté de la plaque !)

    <?php

    /**
    * Resizes an image and returns the resized URL. Uses native WordPress functionality.
    *
    * The function supports GD Library and ImageMagick. WordPress will pick whichever is most appropriate.
    * If none of the supported libraries are available, the function will return the original image url.
    *
    * Images are saved to the WordPress uploads directory, just like images uploaded through the Media Library.
    *
    * Supports WordPress 3.5 and above.
    *
    * Based on resize.php by Matthew Ruddy (GPLv2 Licensed, Copyright (c) 2012, 2013)
    * https://github.com/MatthewRuddy/Wordpress-Timthumb-alternative
    *
    * License: GPLv2
    * http://www.gnu.org/licenses/gpl-2.0.html
    *
    * @author Ernesto Méndez (http://der-design.com)
    * @author Matthew Ruddy (http://rivaslider.com)
    */

    add_action(‘delete_attachment’, ‘mr_delete_resized_images’);

    function mr_image_resize($url, $width = null, $height = null, $crop = true, $align = ‘c’, $retina = false) {

    global $wpdb;

    // Get common vars (func_get_args() only get specified values)
    $common = mr_common_info($url, $width, $height, $crop, $align, $retina);

    // Unpack vars if got an array…
    if (is_array($common)) extract($common);

    // … Otherwise, return error, null or image
    else return $common;

    if (!file_exists($dest_file_name)) {

    // We only want to resize Media Library images, so we can be sure they get deleted correctly when appropriate.
    $query = $wpdb->prepare(« SELECT * FROM $wpdb->posts WHERE guid=’%s' », $url);
    $get_attachment = $wpdb->get_results($query);

    // Load WordPress Image Editor
    $editor = wp_get_image_editor($file_path);

    // Print possible wp error
    if (is_wp_error($editor)) {
    if (is_user_logged_in()) print_r($editor);
    return null;
    }

    if ($crop) {

    $src_x = $src_y = 0;
    $src_w = $orig_width;
    $src_h = $orig_height;

    $cmp_x = $orig_width / $dest_width;
    $cmp_y = $orig_height / $dest_height;

    // Calculate x or y coordinate and width or height of source
    if ($cmp_x > $cmp_y) {

    $src_w = round($orig_width / $cmp_x * $cmp_y);
    $src_x = round(($orig_width – ($orig_width / $cmp_x * $cmp_y)) / 2);

    } else if ($cmp_y > $cmp_x) {

    $src_h = round($orig_height / $cmp_y * $cmp_x);
    $src_y = round(($orig_height – ($orig_height / $cmp_y * $cmp_x)) / 2);

    }

    // Positional cropping. Uses code from timthumb.php under the GPL
    if ($align && $align != ‘c’) {
    if (strpos($align, ‘t’) !== false) {
    $src_y = 0;
    }
    if (strpos($align, ‘b’) !== false) {
    $src_y = $orig_height – $src_h;
    }
    if (strpos($align, ‘l’) !== false) {
    $src_x = 0;
    }
    if (strpos($align, ‘r’) !== false) {
    $src_x = $orig_width – $src_w;
    }
    }

    // Crop image
    $editor->crop($src_x, $src_y, $src_w, $src_h, $dest_width, $dest_height);

    } else {

    // Just resize image
    $editor->resize($dest_width, $dest_height);

    }

    // Save image
    $saved = $editor->save($dest_file_name);

    // Print possible out of memory error
    if (is_wp_error($saved)) {
    if (is_user_logged_in()) {
    print_r($saved);
    unlink($dest_file_name);
    }
    return null;
    }

    // Add the resized dimensions and alignment to original image metadata, so the images
    // can be deleted when the original image is delete from the Media Library.
    if ($get_attachment) {
    $metadata = wp_get_attachment_metadata($get_attachment[0]->ID);
    if (isset($metadata[‘image_meta’])) {
    $md = $saved[‘width’] . ‘x’ . $saved[‘height’];
    if ($crop) $md .= ($align) ? « _${align} » : « _c »;
    $metadata[‘image_meta’][‘resized_images’][] = $md;
    wp_update_attachment_metadata($get_attachment[0]->ID, $metadata);
    }
    }

    // Resized image url
    $resized_url = str_replace(basename($url), basename($saved[‘path’]), $url);

    } else {

    // Resized image url
    $resized_url = str_replace(basename($url), basename($dest_file_name), $url);

    }

    // Return resized url
    return $resized_url;

    }

    // Returns common information shared by processing functions

    function mr_common_info($url, $width, $height, $crop, $align, $retina) {

    // Return null if url empty
    if (empty($url)) {
    return is_user_logged_in() ? « image_not_specified » : null;
    }

    // Return if nocrop is set on query string
    if (preg_match(‘/(\?|&)nocrop/’, $url)) {
    return $url;
    }

    // Get the image file path
    $urlinfo = parse_url($url);
    $wp_upload_dir = wp_upload_dir();

    if (preg_match(‘/\/[0-9]{4}\/[0-9]{2}\/.+$/’, $urlinfo[‘path’], $matches)) {
    $file_path = $wp_upload_dir[‘basedir’] . $matches[0];
    } else {
    $pathinfo = parse_url($url);
    $uploads_dir = is_multisite() ? ‘/files/’ : ‘/wp-content/’;
    $file_path = ABSPATH . str_replace(dirname($_SERVER[‘SCRIPT_NAME’]) . ‘/’,  », strstr($pathinfo[‘path’], $uploads_dir));
    $file_path = preg_replace(‘/(\/\/)/’, ‘/’, $file_path);
    }

    // Don’t process a file that doesn’t exist
    if (!file_exists($file_path)) {
    return null; // Degrade gracefully
    }

    // Get original image size
    $size = is_user_logged_in() ? getimagesize($file_path) : @getimagesize($file_path);

    // If no size data obtained, return error or null
    if (!$size) {
    return is_user_logged_in() ? « getimagesize_error_common » : null;
    }

    // Set original width and height
    list($orig_width, $orig_height, $orig_type) = $size;

    // Generate width or height if not provided
    if ($width && !$height) {
    $height = floor($orig_height * ($width / $orig_width));
    } else if ($height && !$width) {
    $width = floor($orig_width * ($height / $orig_height));
    } else if (!$width && !$height) {
    return $url; // Return original url if no width/height provided
    }

    // Allow for different retina sizes
    $retina = $retina ? ($retina === true ? 2 : $retina) : 1;

    // Destination width and height variables
    $dest_width = $width * $retina;
    $dest_height = $height * $retina;

    // Some additional info about the image
    $info = pathinfo($file_path);
    $dir = $info[‘dirname’];
    $ext = $info[‘extension’];
    $name = wp_basename($file_path, « .$ext »);

    // Suffix applied to filename
    $suffix = « ${dest_width}x${dest_height} »;

    // Set align info on file
    if ($crop) {
    $suffix .= ($align) ? « _${align} » : « _c »;
    }

    // Get the destination file name
    $dest_file_name = « ${dir}/${name}-${suffix}.${ext} »;

    // Return info
    return array(
    ‘dir’ => $dir,
    ‘name’ => $name,
    ‘ext’ => $ext,
    ‘suffix’ => $suffix,
    ‘orig_width’ => $orig_width,
    ‘orig_height’ => $orig_height,
    ‘orig_type’ => $orig_type,
    ‘dest_width’ => $dest_width,
    ‘dest_height’ => $dest_height,
    ‘file_path’ => $file_path,
    ‘dest_file_name’ => $dest_file_name,
    );

    }

    // Deletes the resized images when the original image is deleted from the WordPress Media Library.

    function mr_delete_resized_images($post_id) {

    // Get attachment image metadata
    $metadata = wp_get_attachment_metadata($post_id);

    // Return if no metadata is found
    if (!$metadata) return;

    // Return if we don’t have the proper metadata
    if (!isset($metadata[‘file’]) || !isset($metadata[‘image_meta’][‘resized_images’])) return;

    $wp_upload_dir = wp_upload_dir();
    $pathinfo = pathinfo($metadata[‘file’]);
    $resized_images = $metadata[‘image_meta’][‘resized_images’];

    // Delete the resized images
    foreach ($resized_images as $dims) {

    // Get the resized images filename
    $file = $wp_upload_dir[‘basedir’] . ‘/’ . $pathinfo[‘dirname’] . ‘/’ . $pathinfo[‘filename’] . ‘-‘ . $dims . ‘.’ . $pathinfo[‘extension’];

    // Delete the resized image (if it has not yet been deleted)
    @unlink($file);

    }

    }

    #2470951
    Flobogo
    Modérateur
    Maître WordPress
    20400 contributions

    Désolée, ça dépasse mes compétences techniques, je ne sais pas pourquoi il y a ce fichier resize.php ni à quoi il sert.

    je ne sais pas si déontologiquement c’est possible mais je pourrais aussi proposer un .zip du thème à qui voudrait m’aider… ?

    Non, en effet, ce n’est pas possible. Vous avez payé pour acheter ce thème, pour l’utiliser sur votre site. Vous ne pouvez pas le divulguer sur le forum, ce serait contraire au droit d’auteur. Et l’envoyer à l’un d’entre nous, cela devient de l’aide individuelle qui ne peut pas profiter à d’autres membres du forum, ce n’est pas le but. Sinon, faire appel à un prestataire individuel.

    J’espère que vous aurez une réponse par le biais du support du thème. Sinon, voir pour changer de thème et en trouver un avec des thumnails (images miniatures) en format vertical.

    #2470960
    RachPat
    Participant
    Initié WordPress
    29 contributions

    Merci pour votre réponse,
    je comprends bien le principe du forum, en effet, pas de souci !

    Mais pour information, à force d’explorer les fichiers du thème j’ai fini par trouver une bidouille pour que l’affiche soit entière sur la page film, c’est déjà un grand pas ! j’ai juste enlevé l’information « sb-full » à la ligne <?php echo amy_movie_get_poster($post->ID, $custom_size[‘sb-full’]); ?> du fichier qui gère l’affichage du contenu de cette page, et ça donne : https://cinelefoyer.com/film/il-reste-encore-demain/

    Par contre pour le carroussel d’affiches en page d’accueil, c’est une autre affaire, je pense que je vais laisser tomber si je n’ai pas de réponse du créateur du thème.

    En tout cas merci pour toutes les réponses que j’ai eues, ce forum est toujours riche d’apprentissage. D’ailleurs des fois je me rends compte que rien que de devoir bien formuler son problème amène à mieux le comprendre !

    Très bonne soirée et à peut-être à bientôt pour un autre casse-tête !

    #2471020
    ferman
    Modérateur
    Maître WordPress
    7131 contributions

    Pour le carroussel en page d’accueil, il y aurait peut-être aussi une bidouille qui permet en front-end de supprimer le redimensionnement .

    Cependant deux des images (les deux « coup de cœur surprise ») ne semblent pas avoir d’origine la même dimension que toutes les autres si bien que ça ne fait pas très joli (voir pj).

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2471022
    RachPat
    Participant
    Initié WordPress
    29 contributions

    Ohhhhh ! Merci pour ce message, ça m’intéresse vraiment de connaitre cette bidouille et dans ce cas je veillerai à préparer des images homothétiques pour toutes les affiches du carroussel…

    C’est un css ou js additionnel à ajouter ? Merci d’avance si vous pouvez me donner le tuyau !

    Très bonne soirée !

    #2471024
    Flobogo
    Modérateur
    Maître WordPress
    20400 contributions

    à force d’explorer les fichiers du thème j’ai fini par trouver une bidouille pour que l’affiche soit entière sur la page film, c’est déjà un grand pas

    Super en effet, tant mieux 🙂 J’ai vu le résultat, c’est nickel.

    Attention : gardez bien un petit fichier texte avec la modif quelque part où vous saurez le retrouver, car à chaque mise à jour du thème, vous risquez que ça saute si la modif est faite sur un fichier du thème-parent (et s’agissant d’un thème payant qui fournit le thème-enfant, je me méfierai même dans ce cas). Du moment que vous savez où retrouver la manip’, c’est vite fait.

    Concernant les images du carroussel, et connaissant les compétences de @ferman en la matière, je me doute que c’est une modif CSS ou JS, en effet. Et ça fonctionnera 😉

    #2471044
    ferman
    Modérateur
    Maître WordPress
    7131 contributions

    Bonjour,

    J’admire l’optimisme de @flobogo . Espérons que la confiance aveugle qu’elle me porte ne sera pas mal placée 😉 . Les CSS ne sont pas suffisantes pour votre problème; il faut avoir recours au js. Je vois que votre thème offre la possibilité d’inclure du custom js donc c’est facile; pas besoin de plugin.

    Le principe est de supprimer dans l’attribut src des images la partie responsable du redimensionnement  (« -174x300_c »).

    Essayez ce code (testé, fonctionne chez moi).

    $=jQuery;
    var img = '.amy-section.wpb_row .amy-movie-item-poster a img'; $(img).each(function(){ img = $(this).attr('src', $(this).attr('src').replace('-174x300_c', ''));
    });

    Si ça fonctionne, toutes les images auront la même nouvelle dimension sauf 2: « coupe de cœur surprise » dans le premier carroussel et « l’antilope d’or » dans la galerie du bas qui n’ont sans doute pas à la base les mêmes dimensions que les autres . De plus pour « coup de cœur surprise », le src contient un « scaled » qui n’est pas supprimé par le code ci-dessus. Soit vous pouvez le supprimer de votre côté soit il sera possible de les supprimer en js.

    Pour votre bidouille, comme le dit @flobogo, si vous n’utilisez pas de thème enfant il faudra refaire la modification à chaque mise à jour du thème. On peut aussi arriver au même résultat en javascript. Code semblable au code ci-dessus.

     

    #2471048
    ferman
    Modérateur
    Maître WordPress
    7131 contributions

    Pour votre bidouille, comme le dit @flobogo, si vous n’utilisez pas de thème enfant…

    Mais comme je viens de voir plus haut que vous utilisez un thème enfant, la question ne se pose pas.

15 sujets de 1 à 15 (sur un total de 20)
  • Vous devez être connecté pour répondre à ce sujet.