web-dev-qa-db-fra.com

Comment définir la taille des images tout en conservant des images réactives à l'aide de l'attribut srcset?

J'ai cette fonction dans mon thème pour créer des tailles de vignettes.

  set_post_thumbnail_size( 620, 848, true );
            if (function_exists('add_image_size')){
                    add_image_size( 'compare-shop-logo', 150 );
                    add_image_size( 'compare-single-product-2', 250, 188, true );
                    add_image_size( 'compare-slider-image', 848, 487, true );
                    add_image_size( 'compare-offer-box', 400, 300, true);
                    add_image_size( 'compare-blog-box', 400, 225, true );
                    add_image_size( 'compare-quote-box', 408, 437, true );
            }

Comment se fait-il que si je change la taille de la boîte d'offre, je perds le srcset et la taille dans img tag et est-il possible de redimensionner en maintenant les proportions?

<img width="400" height="300" src="myimage-400x300.jpg" class="embed-responsive-item wp-post-image" alt="image" srcset="myimage-1-400x300.jpg 400w, http:///myimage-250x188.jpg 250w" sizes="(max-width: 400px) 100vw, 400px">

merci

theme-developmentimagesimage-sizeadd-image-sizeresponsive
5
Sam Provides

L'attribut srcset est construit à partir d'images ayant le même rapport d'aspect. Créez-en quelques-uns et tout ira bien.

add_image_size( 'compare-offer-box', 400, 300, true);
add_image_size( 'compare-offer-box-2', 800, 600, true);
add_image_size( 'compare-offer-box-3', 1200, 900, true);

par exemple. Le quatrième argument, booléen, indique à WP de rogner dans les proportions exactes.

Pour redimensionner sans recadrer, utilisez:

add_image_size( 'compare-offer-box', 400, 9999, false);
add_image_size( 'compare-offer-box-2', 800, 9999, false);
add_image_size( 'compare-offer-box-3', 1200, 9999, false);

Cela suppose que vous souhaitiez une image de largeur particulière, puis quelle que soit la hauteur requise par les proportions. Vous verrez du code sur le Web qui utilise les valeurs 0 ou null pour la dimension non contrainte, mais les commentaires dans le code source WP avertissent que cela peut avoir des "résultats imprévisibles".

Si vous préférez redimensionner proportionnellement tout en limitant la hauteur, utilisez simplement une valeur énorme pour la largeur:

add_image_size( 'compare-offer-box', 9999, 400, false);
add_image_size( 'compare-offer-box-2', 9999, 800, false);
add_image_size( 'compare-offer-box-3', 9999, 1200, false);

Si vous souhaitez conserver les proportions mais redimensionner l'image pour l'adapter à un certain espace, par exemple 400 pixels sur 400 pixels, vous pouvez spécifier une largeur et une hauteur maximales, mais avec un rognage défini sur false:

add_image_size( 'compare-offer-box', 400, 400, false);

Notez que si vous limitez la hauteur, vous pouvez également ajuster l'attribut tailles, car la valeur par défaut correspond à la largeur de la fenêtre d'affichage avec une valeur maximale correspondant à la largeur de la taille d'image spécifiée.

N'oubliez pas que vous devrez ensuite régénérer les tailles d'image pour vos images existantes. Il existe des plugins qui le font bien: Recherchez Regenerate Thumbnails dans le référentiel de plugins.

9
Andy Macaulay-Brook