web-dev-qa-db-fra.com

Comment redimensionner les images automatiquement en raison de la largeur du conteneur côté serveur/sans CSS

Est-ce que quelqu'un sait comment redimensionner les images servies, donc l'image a une largeur en raison de la largeur des conteneurs de contenu. Je ne veux pas redimensionner l'image via css à 100%, mais plutôt redimensionner les dimensions et la taille réelles de l'image elle-même.

Par exemple: une image dans un article qui a les dimensions de 400px × 300px. Mais dans l'aperçu, je n'ai besoin que de 200px × 150px. Mais je ne veux pas éditer chaque partie de mon thème pour le faire, car il y a beaucoup de tailles différentes. Est-il possible que cela fonctionne automatiquement?

pluginsimagesimage-size
1
Max

Comme de telles choses sont souvent demandées, j'ai écrit un plugin nommé "Redimensionnement d'image dynamique" . C'est fondamentalement un plugin, mais, en raison de son approche à un fichier, il peut être utilisé comme plug-in mu ou comme thème sans problème. Son objectif principal est de redimensionner des images uniques à la demande à une hauteur/largeur donnée.

Voici les arguments de la "balise de modèle"/function et du shortcode:

src      // ID or path
height   // New/resized height
width    // The resized width
classes  // custom classes for CSS targeting 
hwmarkup // Do you want the height="ABpx" width="ABpx" on the image tag?

Désormais, vous pouvez simplement définir hwmarkup sur true/yes/1/on et supprimer les attributs img- HTML tag width/height-, afin que le navigateur le redimensionnera automatiquement à la largeur du conteneur. Vous pouvez aussi aller plus loin et simplement élargir la classe:

<?php
defined( 'ABSPATH' ) OR exit;
/**
 * Plugin Name: (#120987) Resize Image to Container Width
 * Author:      Franz Josef Kaiser
 * Author URI:  http://unserkaiser.com
 * Needs @link https://github.com/franz-josef-kaiser/Dynamic-Image-Resize
 */

class wpse120987ResizeImgToContainerWidth extends oxoDynamicImageResize
{
    /**
     * Set the Attributes
     * @param $atts
     */
    public function setAttributes( $atts )
    {
        $this->atts = wp_parse_args( $atts, array(
            'width' => $GLOBALS['content_width']
        ) );
    }
}

function dynamic_image_resize_extd( $atts )
{
    return new wpse120987ResizeImgToContainerWidth( $atts );
}

add_shortcode( 'dynamic_image', 'dynamic_image_resize_extd' );

Notez s'il vous plaît, que ceci n'est pas testé, mais juste un brouillon rapide.

1
kaiser

En général non, le code PHP n'a aucun moyen de savoir quelle taille d'image vous utilisez dans le CSS car PHP est exécuté en premier sur le serveur et seulement après que le CSS soit exécuté le navigateur.

Le seul moyen qui pourrait fonctionner est de spécifier toutes les tailles d’image en CSS sans fournir d’images, et seulement de faire référence à leur code source via un attribut data-xxxxxx. Après le chargement de la page, vous exécutez un JS qui, pour chaque image, vérifie la hauteur et la largeur définies par CSS et définit le src de l’img sur une URL qui générera de manière dynamique l’image dans les dimensions requises.

L'inconvénient majeur de cette approche est que les images ne commencent à se charger qu'après le chargement de la page plutôt qu'en parallèle et que les personnes bloquant JS ne verront pas les images du tout.

Si les images ont les mêmes proportions que dans votre question, vous pouvez également servir la plus grande image et laisser la mise à l'échelle au navigateur.

0
Mark Kaplun

Je pense que vous voulez juste add_image_size () et the_post_thumbnail () , par exemple ,

add_image_size('article',  400, 300, /*crop=*/ true);
add_image_size('overview', 200, 150, /*crop=*/ true);

the_post_thumbnail('article');
0
sam