it-swarm.com.de

Wie zeige ich das Bild einer Seite an?

Ich möchte die URL des "vorgestellten Bildes" einer Seite erhalten, da ich das vorgestellte Bild der Seite als Hintergrundbild für das Banner oben auf der Seite verwenden möchte. Das Hintergrundbild für das Banner ändert sich je nach der Seite, auf der ich mich befinde, da sie unterschiedliche Bilder enthalten.

5
King Web Dev

Angepasst von diesem Thread in den WP Foren:

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?>
<style>
  #banner-id {
    background-image: url('<?php echo $image[0]; ?>');
  }
</style>
<?php endif; ?>

Fügen Sie dies nach the_post() Ihrer Einzelseitenvorlage hinzu. Ich würde empfehlen, ein Standard-Header-Bild zu verwenden, damit die Seite, wenn sie kein spezielles Bild enthält, dieses verwendet.

'single-post-thumbnail' kann stattdessen ein Array mit den idealen Header-Dimensionen sein, z. B. array(600, 30).

5
kittsville

Da Sie das Bild außerhalb der Schleife verwenden, müssen Sie zuerst die ID des Posts abrufen. Verwenden Sie diese Option, um die URL des vorgestellten Bildes abzurufen.

function wpse207895_featured_image() {
    //Execute if singular
    if ( is_singular() ) {

        $id = get_queried_object_id ();

        // Check if the post/page has featured image
        if ( has_post_thumbnail( $id ) ) {

            // Change thumbnail size, but I guess full is what you'll need
            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'full' );

            $url = $image[0];

        } else {

            //Set a default image if Featured Image isn't set
            $url = '';

        }
    }

    return $url;
}

Jetzt können Sie dies verwenden, um die URL des vorgestellten Bildes in der Kopfzeile wiederzugeben.

<?php echo wpse207895_featured_image();?>

Zum Beispiel:

<header class="site-header" style="background-image: url('<?php echo wpse207895_featured_image();?>');">
    ....
    ....
</header>
2
Abhik