web-dev-qa-db-fra.com

Modifier les attributs de jeu et de taille dans les blocs d’image, de couverture et de galerie Gutenberg

Je cherche un moyen de traiter les attributs de taille et de taille sensibles des blocs d’image Gutenberg - comme les images, la couverture et la galerie.

Habituellement, cela se fait avec le filtre 'wp_get_attachment_image_attributes', comme ceci:

function new_img_sizes( $attr, $attachment, $size ) {
    if ( is_array( $size ) ) {
        $attr['sizes'] = $size[0] . 'px';
    } elseif ( $size == 'large') {
        $attr['sizes'] = '99999px';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'new_img_sizes', 25, 3 );

Mais les blocs de Gutenberg ne réagissent pas à cela. Existe-t-il un autre moyen ou une méthode d'utiliser ce filtre pour modifier leur comportement de jeu? Je ne veux pas aller jusqu'au bout et créer un bloc personnalisé pour cela.

theme-developmentfiltersrest-apiimagesblock-editor
6
Playnary

Essayez la suggestion ci-dessous:

Ceci suppose que l’élément <figure> contenant une image possède un attribut data-display-aligning correspondant à la classe d’alignement appliquée attachée, qui est en quelque sorte surfacé en tant que paramètre dans le hook wp_calculate_image_sizes:

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images.
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                                      values in pixels (in that order).
 * @param string $data-display-alignment The alignment of the image.
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function my_content_image_sizes_attr( $sizes, $size, $alignment ) {
    $width = $size[0];

    // If image is as wide as main content, nothing special is needed.
    if ( 720 <= $width ) {
        $sizes = '100vw';
    } else {

        // Images displayed inside the regular content area.
        $sizes = '(min-width: 720px) 720px, 100vw';

        // Wide images: 720+50% of the available extra space.
        if ( 'wide' === $alignment ) ) {
            $sizes = '(min-width: 720) calc(50% + 720px), 100vw';
        }

        // Full images: 100% of the available extra space.
        if ( 'wide' === $alignment ) ) {
            $sizes = '100vw';
        }

        // If there's a sidebar kicking in at 720px and taking up 25% of the available width.
        if ( is_active_sidebar( 'sidebar-1' ) ) {

            // Images displayed inside the regular content area.
            $sizes = '(min-width: 720px) 720px, 100vw';

            // Wide images
            if ( 'wide' === $alignment ) ) {
                $sizes = '(min-width: 960px) calc(50% + 720px), (min-width: 720px) 75vw, 100vw';
            }

            // Full images
            if ( 'wide' === $alignment ) ) {
                $sizes = '(min-width: 720px) 75vw, 100vw';
            }
        }
    }

    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'my_content_image_sizes_attr', 10, 3 );

Source: https://github.com/WordPress/gutenberg/issues/6131

Voici une autre option: 

/**
 * Configure the "sizes" attribute of images.
 */
function THEMENAME_content_image_sizes_attr($sizes, $size) {
    $width = $size[0];
    if ($width > 640) {
        return '(min-width: 840px) 640px, (min-width: 720px) calc(100vw - 200px), 100vw';
    } else {
        return $sizes;
    }
}
add_filter('wp_calculate_image_sizes', 'THEMENAME_content_image_sizes_attr', 10 , 2);

Source: https://www.malthemilthers.com/responsive-images-and-how-to-implement-them-in-wordpress/

1
Ciprian