Quelle est une bonne alternative à l'utilisation de $ content_width pour l'optimisation de l'image?

14

Le $content_width GLOBAL dans WordPress affecte de nombreux thèmes et même des plugins en limitant la taille des images et s’intègre dans les publications, c’est une exigence pour les thèmes soumis à wordpress.org.

Il est défini à l'aide de:

$content_width = 584; // Twenty Twelve example

Si vous insérez une image de grande taille (1024x1024 par défaut) dans un message, le résultat est le suivant:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

Si, au lieu de cela, vous supprimez ce paramètre global et insérez la taille réelle de l'image, défini avec add_image_size , vous obtenez le résultat:

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

Si vous supprimez les images globales et larges, ce qui est très courant , vous économiserez souvent plus de deux fois plus de pages, avec plusieurs pages en centaines de Ko enregistrées. au chargement de la page.

Utiliser add_image_size et supprimer la possibilité d'insérer des images en taille réelle n'est pas une meilleure option?

ps. J'ai écrit à propos de ici avec des données plus précises

    
posée Wyck 14.02.2013 - 20:54

2 réponses

7

Gardez à l'esprit que $content_width global est utilisé non seulement pour les images, mais également pour les objets incorporés, tels que la vidéo. Donc, toute solution ne sera pas simplement un cas d'abandon de l'utilisation / du support de $content_width lui-même.

Généralement, un thème contraint les images de la zone de contenu de plusieurs manières:

  1. Grand : taille de l'image: définir $content_width comme approprié pour la conception du thème
  2. Original / Complet Taille de l'image: définition d'une règle CSS pour #content img { max-width: XXX; height: auto; } afin de garantir que les images en taille réelle insérées ne rompent pas la présentation
  3. Vignette Taille de l'image: appelez set_post_thumbnail_size() pour définir l'image sélectionnée / la vignette de publication par défaut thumbnail Taille. (Remarque: je ne recommande pas personnellement d'utiliser cette méthode. Définissez des tailles d'image personnalisées spécifiques à un emplacement donné pour une image sélectionnée, puis appelez cette taille personnalisée dans l'emplacement du modèle spécifique, via the_post_thumbnail( $size ) .)

Comme vous l'avez découvert, en raison de la manière dont WordPress sélectionne une taille d'image intermédiaire à utiliser pour une demande d'image donnée, cette demande peut générer une image à l'échelle du navigateur.

Valeurs définies pour le thème de la grande image

Une option serait de redéfinir les paramètres pour les grandes dimensions d'image . (Procédez avec prudence. Cela convient à votre propre site, mais un thème distribué publiquement qui dérange les paramètres de configuration de l'utilisateur est ... au mieux une zone grise.)

Les paramètres de dimension d'image grand sont stockés sous la forme suivante:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

Ainsi, vous pouvez définir ces valeurs en fonction de votre valeur $content_width :

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(Bien sûr, vous voudrez mettre un peu de sécurité / vérification d'erreur autour de cela, comme approprié.)

Supprimer l'option permettant d'insérer des images en taille réelle

Si vous souhaitez simplement empêcher les utilisateurs d'insérer des images en taille réelle (encore une fois, procédez avec précaution; il peut s'agir du territoire du plug-in), vous pouvez filtrer 'image_size_names_choose' :

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Encore une fois: vous voudrez peut-être ajouter quelques valeurs sûres ici, car ce filtre est utilisé à plusieurs endroits.

Définissez une taille d'image personnalisée pour les images de largeur complète

En relation avec l'option précédente, vous pouvez définir une taille d'image 'full-post-width' :

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

Ajoutez-le ensuite à la liste des options disponibles:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );
    
réponse donnée Chip Bennett 20.02.2013 - 02:24
2

Oui, je le pense. Pour contourner le problème $content_width des thèmes soumis au référentiel, j'utilise des filtres d'option pour forcer les tailles que j'ai choisies pour la conception.

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...
    
réponse donnée sanchothefat 23.02.2013 - 18:07

Lire d'autres questions sur les étiquettes