[Résolu] the_post_thumbnail() dans background-image

  • WordPress :5.2
  • Statut : résolu
  • Ce sujet contient 10 réponses, 3 participants et a été mis à jour pour la dernière fois par Li-An, le il y a 4 semaines.
11 sujets de 1 à 11 (sur un total de 11)
  • Auteur
    Messages
  • #2285057
    barale61
    Participant
    Initié WordPress
    41 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : php 7.3 wp 5.3
    • Thème utilisé : perso
    • Extensions en place : aucune
    • Nom de l’hébergeur : localhost
    • Adresse du site :

    Problème(s) rencontré(s) :

    Bonjour,

    Je souhaite inclure the_post_thumbnail() dans un backgroun-image alors je fais comme ça:

    <div style="background-image:url('<?php the_post_thumbnail('taille-chanteurs', array('class' => 'img-fluid')); ?>');"></div>

    mais cela me donne ça:

    (voir image 1)

    et pourtant si je le place dans la div de cette façon, cela me donne ça:

    <div><?php the_post_thumbnail('taille-chanteurs', array('class' => 'img-fluid')); ?></div>

    (voir image 2)

    Je vous remercie de votre aide

     

    • Ce sujet a été modifié le il y a 4 semaines et 1 jour par barale61.
    • Ce sujet a été modifié le il y a 4 semaines et 1 jour par barale61.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2285062
    Li-An
    Modérateur
    Maître WordPress
    22858 contributions

    Bonjour, un fichier CSS est en langage CSS et on ne peut pas interpréter du code php à l’intérieur. Soit vous codez en dur l’appel au background dans votre template soit vous trouvez une autre solution. Peut-être une piste https://wordpress.stackexchange.com/questions/140162/php-in-css-file

    #2285083
    ferman
    Participant
    Maître WordPress
    1531 contributions

    Bonjour,

    <?php the_post_thumbnail(taille-chanteurs’……

    Je pense qu’il faudrait alterner entre guillemets simples et doubles (guillemet simple commençant et donc double avant taille-chanteurs et corriger la suite en conséquence).

    #2285099
    Li-An
    Modérateur
    Maître WordPress
    22858 contributions

    En effet, je dois dire des bêtises. Désolé, ça devrait être possible.

    #2285123
    ferman
    Participant
    Maître WordPress
    1531 contributions

    <?php the_post_thumbnail(taille-chanteurs’……

    Non, le problème n’est pas là. Je cherche mais pour le moment ne vois rien du tout.

    #2285126
    Li-An
    Modérateur
    Maître WordPress
    22858 contributions

    À mon avis, vous devez récupérer l’URL avec https://codex.wordpress.org/Function_Reference/the_post_thumbnail_url. La fonction telle quelle affiche l’image avec une classe en plus ce qui est incompatible avec background en CSS.

    #2285127
    barale61
    Participant
    Initié WordPress
    41 contributions

    Je n’y arrive pas de cette façon mais j’ai essayé comme ça et cela fonctionne bien sauf que je ne peux pas (ou n’arrive pas à ajouter ma taille d’image ainsi que ma class:

     

    						$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    						echo '<div class="background" style="background-image: url('.$url.')"></div>';

    je voudrais donc ajouter ça:

    'taille-methodologie', array('class' => 'img-fluid')

    comme dans:

    <div style="background-image:url('<?php the_post_thumbnail('taille-methodologie', array('class' => 'img-fluid')); ?>');">

    #2285130
    Li-An
    Modérateur
    Maître WordPress
    22858 contributions

    Je ne sais pas si ça va marcher mais vous appelez une classe CSS pour la miniature et logiquement

    <div class="background img-fluid"

    mais pas sûr que ça fonctionne pour background-image. Comment voulez-vous quelle soit affichée cette image. Il faudrait mieux gérer son affichage directement par les possibilités de background en CSS. Tout n’est pas possible.

    #2285131
    barale61
    Participant
    Initié WordPress
    41 contributions

    La class img-fluid doit être sur l’image mais je peux le faire das le css par contre, la taille de images ‘taille-methodologie’ c’est ma taille perso dans mon functions.php et elle redimensionne automatiquement les image au téléversement.

    #2285218
    barale61
    Participant
    Initié WordPress
    41 contributions

    Finalement j’ai trouvé avec le lien de Li-An plus haut et j’ai fait comme ça:

     

    wp_enqueue_style( 'theme-css', get_template_directory_uri() . '/style.css' );
    						$featured_id = (int)get_post_thumbnail_id();
    						if ( !empty ( $featured_id ) ) {
    							$image_bg_methodologie = wp_get_attachment_image_src( $featured_id, 'taille-methodologie' )[0];
    							$background_image_methodologie = '#banner{background-image:url(' . esc_url ( $image_bg_methodologie ) . ');}';
    
    							wp_add_inline_style( 'theme-css', $background_image_methodologie );
    						}
    						?>
    
    						<?php
    						$image_a_la_une = wp_get_attachment_url ($featured_id);
    						echo '<div class="background" style = "background-image: url('.$image_bg_methodologie.');"></div>';

    Cela respecte la taille définie plus haut et sélectionne donc dans le dossier UPLOAD du thème l’image concernée. Cela ajoute le style en mode inline dans la source.

    Merci pour votre aide à tous les deux.

    #2285224
    Li-An
    Modérateur
    Maître WordPress
    22858 contributions

    Merci pour le code.

11 sujets de 1 à 11 (sur un total de 11)
  • Vous devez être connecté pour répondre à ce sujet.