Imagens de fundo responsivas adicionadas inline

3

Estou definindo a imagem em destaque como plano de fundo para a parte superior da página. As imagens são muito grandes e gostaria de poder definir tamanhos de imagem menores para tamanhos de tela menores. Como as imagens são adicionadas em linha, não acho que posso usar o arquivo styles.css externo para definir imagens diferentes.

Veja um exemplo do que tenho:

<?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>

Gostaria de fazer algo como srcset , mas não consegui encontrar um equivalente para imagens de plano de fundo.

    
por erin_k 30.03.2017 / 00:39

2 respostas

0

Se você usar o plug-in Adaptive Images para o WordPress, basta criar um css em linha para todas as larguras da janela de visualização usando a maior imagem e, em seguida, todo o trabalho no servidor. Você não faz nada com a sua marcação, mas nas configurações do plug-in Adaptive Images você insere seus pontos de interrupção, para que sirva a pequenas imagens em pequenos dispositivos e assim por diante.

Se você usar imagens adaptativas, será:

/**  
 *
 * 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 );

Isto é o que eu faço (antes de começar a usar Imagens Adaptativas).

add_image_size();

Eu uso três tamanhos pequeno, médio e grande neste exemplo e depois regenero minhas miniaturas.

/**  
 *
 * 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 );
    
por Christina 31.03.2017 / 17:31
-1

You can simply  use CSS media query for different device one example 

@media only screen and (max-width: 320px) {
    /* styles for narrow screens */
   .page-banner{
     background-size:100% auto;
     background-repeat:no-repeat;
     background-position:center;
     display: block;
     width: 100%;
     height: 500px;
    }

}

You can use different page different class id 
page-id-34 logged-in wpb-js-composer js-comp-ver-4.12 vc_responsive">
    
por ferdouswp 30.03.2017 / 06:10