Taille / miniature d'image personnalisée - Recadrage / rapport hauteur / largeur même lorsque l'image source est plus petite que les dimensions définies

11

Normalement, lorsque vous définissez une taille d'image personnalisée à l'aide d'un recadrage dur, par exemple add_image_size( 'custom-size', 400, 400, true );, vous obtenez les résultats suivants:

  • # 1 Image téléchargée: 600x500> Vignette: 400x400.
  • # 2 Image téléchargée: 500x300> Vignette: 400x300.
  • # 3 Image téléchargée: 300x200> Vignette: 300x200.

Cependant, ce que j'aimerais faire, c'est quand l'image téléchargée est plus petite que la largeur, ou la hauteur, ou les deux, de la taille d'image personnalisée, par exemple les exemples # 2 et # 3 ci-dessus - au lieu que l'image soit juste rognée pour s'adapter dans ces dimensions - il est également recadré pour correspondre à leur rapport d'aspect (qui dans ce cas est 1: 1) comme suit:

  • # 1 Image téléchargée: 600x500> Vignette: 400x400.
  • # 2 Image téléchargée: 500x300> Vignette: 300x300 .
  • # 3 Image téléchargée: 300x200> Vignette: 200x200 .

Je ne crois pas que cela soit possible en utilisant les options standard add_image_size, mais est-ce possible en utilisant une fonction différente, ou un crochet qui modifie la fonction add_image_size?

Ou existe-t-il un plugin qui ajoute cette fonctionnalité?

Toute information que n'importe qui peut fournir serait grandement appréciée.

images cropping Joey Joe Joe Junior Shabadoo
la source
Pour clarifier davantage ma question. J'aimerais pouvoir configurer add_image_sizepour faire ce que j'ai décrit ci-dessus. Je suis assez sûr que ce n'est pas possible en utilisant les paramètres standard, mais j'espère que c'est possible en utilisant un hook, une action ou un filtre.
Joey Joe Joe Junior Shabadoo

Réponses:

2

Vous avez raison, cela ne fonctionne tout simplement pas comme ça.

Si vous pouvez penser à votre question dans l'autre sens, vous pouvez obtenir le bon résultat dans les navigateurs modernes en utilisant une sélection de tailles d'image et d'images réactives.

Si vous utilisez un code comme celui-ci:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... et dans vos modèles quelque chose comme:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... puis par défaut (WP 4.4 et versions ultérieures), vous obtiendrez une balise d'image avec la plus petite version de votre ensemble en tant que srcet les plus grandes tailles dans l' srcsetattribut, que les navigateurs plus récents choisiront et afficheront la plus grande version appropriée.

Donc, si une image particulière n'a pas de version plus grande, cela n'a pas d'importance. Une image qui 300x200aura une 200x200version sera faite, cette version sera la seule dans le HTML et tous les navigateurs la montreront.

J'ai travaillé cela tout en ajustant les images réactives afin d'obtenir de bonnes performances sur les navigateurs qui ne prennent en charge srcque non srcset.

Andy Macaulay-Brook
la source
Merci pour la réponse. C'est une solution intéressante, mais malheureusement je ne pense pas que cela fonctionnerait pour ma situation. Les images seraient téléchargées par l'utilisateur final - et pourraient être de n'importe quelle taille. Cette solution, à moins que je ne la comprenne mal, ne fonctionne que si les images téléchargées sont un ensemble de tailles fixes. Par exemple, le code ci-dessus fonctionnerait pour une image de 500 x 200, mais pas pour une image de 500 x 199.
Joey Joe Joe Junior Shabadoo
2

Ce n'est pas une très bonne solution car c'est une solution CSS plus récente et elle ne fonctionne que dans 78,9% des navigateurs des utilisateurs , mais il existe quelques polyfills qui peuvent surmonter ces images d'ajustement d'objet et fitie

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

Idéalement, il serait préférable que les images plus petites soient mises à l'échelle proportionnellement lors du téléchargement, mais je n'ai pas pu trouver de solution pour cela.

Bryan Willis
la source
Merci pour la réponse. Je n'étais même pas au courant de cette propriété, mais oui, comme vous l'avez dit, le manque de prise en charge du navigateur le rend inutile. Peut-être dans quelques années peut-être.
Joey Joe Joe Junior Shabadoo
En fait, je viens juste de commencer à utiliser le polyfill "object-fit-images" et même si cela semble fonctionner Joey, je n'ai pas encore testé sur IE car je n'ai que des Mac. Ici, il est en action si vous voulez y jeter un œil . Il est utilisé sur les miniatures de la grille sur cette page. Je sais qu'il doit y avoir un plugin qui résout ce problème. Cependant, jusqu'à présent, YoImages est un bon complément à l'ajustement d'objet car il vous permet de modifier la position de recadrage à n'importe quelle position pour chaque image.
Bryan Willis