web-dev-qa-db-fra.com

Images d'arrière-plan réactives ajoutées en ligne

Je suis en train de définir l'image sélectionnée comme arrière-plan pour la partie supérieure de la page. Les images sont assez grandes et j'aimerais pouvoir définir des tailles d'image plus petites pour des tailles d'écran plus petites. Comme les images sont ajoutées en ligne, je ne pense pas pouvoir utiliser le fichier styles.css externe pour définir différentes images.

Voici un exemple de ce que j'ai:

<?php 
$bannerImg = '';
if(has_post_thumbnail()) {
    $bannerImg = get_the_post_thumbnail_url();
}
?>

<section class="page-banner" style="background-image: url(<?php echo $bannerImg; ?>);">
    <h1 class="banner-title"><?php the_title(); ?></h1>
</section>

J'aimerais faire quelque chose comme srcset mais je n'ai pas pu trouver d'équivalent pour les images d'arrière-plan.

imagescssresponsive
3
erin_k

Si vous utilisez le plug-in Adaptive Images pour WordPress, il vous suffira de créer un css en ligne pour toutes les largeurs de fenêtre en utilisant la plus grande image, puis tout le travail sera effectué sur le serveur. Vous ne faites rien à votre balisage, mais dans les paramètres du plug-in Adaptive Images, vous entrez vos points d'arrêt pour qu'il serve les petites images sur de petits périphériques, etc.

Si vous utilisez des images adaptatives, ce serait:

/**  
 *
 * Background Image from Post Image using Adaptive Images Plugin for WordPress
 * @since  1.0.0
 * Credits: TwentyFifteen WordPress theme adjacent pagination
 *
 */
function the_other_idea_good_heavens_change_this_function_name() {

    global $post;

    if ( ! has_post_thumbnail( $post->ID ) ) return; //exit if there is no featured image

    $theme_handle = 'Visionary'; //the theme handle used for the main style.css file

    //image
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'super-huge-image' );

    //css
    $css = '.banner-image { background-image: url(' . esc_url( $image[0] ) . '); } ';

    //minify            
    $css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add it
    wp_add_inline_style( $theme_handle, $css );

}
add_action( 'wp_enqueue_scripts', 'the_other_idea_good_heavens_change_this_function_name', 99 );

C’est ce que je fais (avant de commencer à utiliser des images adaptatives).

add_image_size();

J'utilise trois tailles petite, moyenne et grande dans cet exemple, puis je régénère mes vignettes.

/**  
 *
 * Background Image from Post Image
 * @since  1.0.0
 * Credits: TwentyFifteen WordPress theme adjacent pagination
 *
 */
function yourprefix_responsive_mobile_first_background_images() {

    global $post;

    if ( ! has_post_thumbnail( $post->ID ) ) return; //exit if there is no featured image


    $theme_handle = 'Visionary';     //the theme handle used for the main style.css file
    $property     = '.banner-image'; //the property
    $css          = '';

    //small image
    $small_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-small-image-size' );
    $small_style = '
            ' . $property . ' { background-image: url(' . esc_url( $small_img[0] ) . '); }
            ';
    $css .= $small_style;


    //medium image
    $medium_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-medium-image-size' );
    $medium_style = '
            ' . $property . ' {  background-image: url(' . esc_url( $medium_img[0] ) . '); }
            ';
    $css .= '@media (min-width: 1000px) { '. $medium_style . ' }';


    //large image
    $large_img   = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'my-large-image-size' );
    $large_style = '
            ' . $property . ' {  background-image: url(' . esc_url( $large_img[0] ) . '); }
            ';
    $css .= '@media (min-width: 1700px) { '. $large_style . ' }';

    //minify            
    $css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css );

    //add it
    wp_add_inline_style( $theme_handle, $css );

}
add_action( 'wp_enqueue_scripts', 'yourprefix_responsive_mobile_first_background_images', 99 );
0
Christina