web-dev-qa-db-fra.com

Comment afficher l'image sélectionnée d'une page?

Je souhaite obtenir l'URL de "l'image sélectionnée" d'une page, car je souhaite utiliser l'image sélectionnée de la page comme image d'arrière-plan de la bannière située en haut de la page. L’image d’arrière-plan de la bannière change en fonction de la page sur laquelle je suis, les images présentées étant différentes.

images
5
King Web Dev

Adapté de ce fil de discussion sur le WP forum:

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

Ajoutez ceci à votre modèle de page unique, après the_post(). Je recommanderais d'avoir une image d'en-tête par défaut afin que si la page ne comporte pas d'image sélectionnée, elle retourne à cette utilisation.

'single-post-thumbnail' peut plutôt être un tableau avec les dimensions d'en-tête idéales, telles que array(600, 30).

5
kittsville

Puisque vous utilisez l'image en dehors de la boucle, vous devez d'abord obtenir l'ID de la publication. Ensuite, utilisez cela pour obtenir l'URL de l'image sélectionnée.

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;
}

Vous pouvez maintenant utiliser ceci pour faire écho à l'URL de l'image présentée dans l'en-tête.

<?php echo wpse207895_featured_image();?>

Pour chaque exemple:

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