web-dev-qa-db-fra.com

L'image sélectionnée (réactif) au-dessus du contenu est trop petite après la mise à jour vers WordPress 4.4

Dans mon thème, j'ai placé une image sélectionnée d'une page au-dessus du contenu et des colonnes de la barre latérale, couvrant les deux colonnes, à l'aide de <?php the_post_thumbnail('large'); ?>.

où "grande" taille est définie comme 980px. Leur largeur est sensible grâce à css. Cela a bien fonctionné jusqu'à la mise à niveau de WordPress 4.4.

Après la mise à jour, qui inclut la fonctionnalité principale d'images réactives (chargement d'images différentes en fonction de la taille de l'écran), les images présentées ne sont plus affichées que sur une largeur de 560 pixels sur chaque page, au lieu de 980 pixels. 560px correspond à la taille moyenne des images, ainsi qu'à content_width, définie dans mes fonctions (c'est la largeur du contenu de la colonne principale, utilisée pour oEmbeds).

C'est le code source HTML d'une telle image:

<img class="attachment-large size-large wp-post-image" 
sizes="(max-width: 560px) 100vw, 560px" 
srcset="http://marionhansel.local/wp-content/uploads/latendresse-224x126.jpg 224w, 
http://marionhansel.local/wp-content/uploads/latendresse-560x315.jpg 560w, 
http://marionhansel.local/wp-content/uploads/latendresse-980x551.jpg 980w, 
http://marionhansel.local/wp-content/uploads/latendresse-476x268.jpg 476w" 
alt="La Tendresse" 
src="http://marionhansel.local/wp-content/uploads/latendresse-980x551.jpg">

Comment faire en sorte que les images en vedette apparaissent dans leur largeur "Large" (980 pixels), tout en conservant la réactivité (WordPress) et en conservant la valeur content_width (pour oEmbeds)?

Je suppose que cela a quelque chose à voir avec (max-width: 560px) 100vw, 560px dans la source de l'image, mais comment puis-je éditer ces valeurs?

Pour l'instant, j'ai désactivé les images responsive (à l'aide du plug-in Disable Responsive Images) et les images s'affichent à nouveau dans toute leur largeur (980px). Elles sont "responsives" grâce au css, mais n'utilisent pas la réactivité WordPress.

imagesresponsive
1
Samuel Dellicour

Comment le $content_width global peut-il affecter la vignette de la publication?

Voyons comment le $content_width global peut affecter la sortie de the_post_thumbnail( 'large' ) et repérons les dépendances de fonctions pertinentes:

the_post_thumbnail()
 \
  \__ get_the_post_thumbnail()
       \    
        \__ wp_get_attachment_image() 
             \
              \__ wp_get_attachment_image_src()
                   \
                    \__ image_downsize()
                         \
                          \__ image_constrain_size_for_editor()

et pour la grande taille , nous avons spécifiquement cette partie dans la fonction image_constrain_size_for_editor():

elseif ( $size == 'large' ) {
    /*
     * We're inserting a large size image into the editor. If it's a really
     * big image we'll scale it down to fit reasonably within the editor
     * itself, and within the theme's content width if it's known. The user
     * can resize it in the editor if they wish.
     */
    $max_width = intval(get_option('large_size_w'));
    $max_height = intval(get_option('large_size_h'));
    if ( intval($content_width) > 0 ) {
        $max_width = min( intval($content_width), $max_width );
    }
}

Nous pouvons voir ici que la largeur d'image maximale est la minimumde la largeur d'image large et la largeur du contenu global .

Cela concerne par exemple les attributs image width , height et .

Par exemple, la valeur de l'attribut tailles provient de:

        \__ wp_get_attachment_image() 
             \
              \__ wp_get_attachment_image_src()
               \
                \__ wp_calculate_image_sizes()

où la valeur par défaut est :

// Setup the default 'sizes' attribute.
$sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );

dans la fonction wp_calculate_image_sizes(). Ici, le $width provient de la sortie de wp_get_attachment_image_src(), cela dépend du content width comme nous l’avons vu précédemment.

Cela devrait expliquer pourquoi vous obtenez:

(max-width: 560px) 100vw, 560px

puisque 560 = min( 560, 1024 ) devient la largeur maximale de l’image.

Workaround

Une solution consiste à modifier la largeur/hauteur maximale de l'image à l'aide du filtre editor_max_image_size :

// Add a filter callback to avoid the content width restriction
add_filter( 'editor_max_image_size', 'wpse_max_image_size', 10, 3 );

// Display large thumbnail    
the_post_thumbnail( 'large' );

// Remove filter callback
remove_filter( 'editor_max_image_size', 'wpse_max_image_size', 10 );

où nous définissons le callback wpse_max_image_size() comme (PHP 5.4+):

function wpse_max_image_size( $max_image_size, $size, $context )
{
    // Override content width restriction
    if( 'large' === $size )
    {
        $max_image_size =  [
            $max_width  = intval( get_option( 'large_size_w' ) ),
            $max_height = intval( get_option( 'large_size_h' ) )
        ];
    }
    return $max_image_size;
}

Nous récupérons les dimensions de grande taille de la base de données, car je suppose que vous avez modifié la largeur de 1024 à 980 via l'écran Paramètres> Médias .

Remarques

Une autre option consisterait à utiliser le wp_calculate_image_sizes, mais il faudrait alors gérer les attributs d'image largeur/hauteur.

Cela devrait également être possible via le filtre wp_get_attachment_image_attributes.

Il devrait également être possible de modifier temporairement la largeur du contenu global, mais je l'ai évité ici.

3
birgire