webentwicklung-frage-antwort-db.com.de

Responsive Hintergrundbilder inline hinzugefügt

Ich stelle das vorgestellte Bild als Hintergrund für den oberen Teil der Seite ein. Die Bilder sind ziemlich groß und ich möchte kleinere Bildgrößen für kleinere Bildschirmgrößen einstellen können. Da die Bilder inline hinzugefügt werden, glaube ich nicht, dass ich die externe Datei styles.css verwenden kann, um verschiedene Bilder festzulegen.

Hier ist ein Beispiel von dem, was ich habe:

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

Ich würde gerne etwas wie srcset machen, aber ich konnte kein Äquivalent für Hintergrundbilder finden.

3
erin_k

Wenn Sie das Adaptive Images-Plugin für WordPress verwenden, erstellen Sie einfach eine Inline-CSS für alle Ansichtsfensterbreiten mit dem größten Bild und erledigen dann die gesamte Arbeit auf dem Server. Sie haben nichts mit Ihrem Markup zu tun, aber in den Einstellungen des Adaptive Images-Plugins geben Sie Ihre Haltepunkte ein, damit kleine Bilder an kleine Geräte geliefert werden und so weiter.

Wenn Sie Adaptive Images verwenden, wäre dies:

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

Dies ist, was ich tue (bevor ich anfing, Adapative Images zu verwenden).

add_image_size();

In diesem Beispiel verwende ich drei Größen (klein, mittel und groß) und regeneriere dann meine Miniaturansichten.

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