Ajouter une image en vedette sur des messages uniques

Publié: 2013-10-10

L'image sélectionnée de vos archives (Post Thumbnail) sera extraite de l'image sélectionnée, quelle que soit la façon dont vous l'ajoutez sur votre écran Edit Post.

L'image affichée avant ou après le titre de votre entrée de publication unique est extraite de la 1ère image que vous insérez dans la publication, à moins que vous ne la supprimiez.

Vous pouvez supprimer ou modifier le code qui affiche une image avant ou après vos titres d'entrée de publication unique en utilisant l'un des extraits de code sur cette page.

Si vous ajoutez une image en tant qu'image en vedette, elle sera affichée dans vos archives sous forme de vignette de publication et non en tant qu'image en vedette après le titre de votre publication unique.

Si vous n'ajoutez pas d'image en vedette, la 1ère image de votre publication sera affichée avant ou après les titres de votre entrée de publication unique ainsi que sur vos pages d'archives.

Dans cet article, je vais vous fournir quelques lignes de code PHP que vous pouvez simplement coller à la fin de votre fichier functions.php de thèmes enfants.

Le code vous permettra d'afficher l'image de votre publication, avant ou après votre titre sur des publications individuelles.

poster une image avant le titre unique

Dan a récemment posé cette question :

J'ai creusé mon cerveau en cherchant, en utilisant différents codes trouvés dans ce forum et j'ai abouti à la création d'un nouveau message.

En utilisant Minimum Pro, je voudrais simplement afficher l'image en vedette d'un article dans une page "un seul article". De préférence au-dessus du contenu du texte. J'ai trouvé du code sur ce forum et je l'ai mis dans functions.php. Il affiche l'image en vedette, mais supprime simultanément le contenu du texte. Donc évidemment je fais quelque chose de mal.

Remarque : Veuillez utiliser le dernier extrait de code PHP dans cet article si vous utilisez l'ancien balisage XHTML et non HTML 5, car les crochets ont changé.

Afficher l'image sélectionnée après le titre

Ce code affiche l'image après le titre de votre article unique.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Afficher l'image en vedette avant le titre

Ce code vous affiche l'image avant le titre de votre article unique.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Afficher l'image en vedette sur les pages statiques

Si vous souhaitez également que cela fonctionne pour les pages simples statiques, ajoutez simplement une page au code comme ceci :

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Afficher l'image en vedette sur les pages statiques et les messages uniques

Si vous souhaitez également que cela fonctionne pour les pages statiques et les publications, ajoutez simplement la page au code comme ceci :

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

La position d'affichage de votre image sélectionnée peut être déterminée à l'aide du troisième paramètre de priorité de positionnement.

Dans le code ci-dessus, il s'agit simplement de changer le 3ème paramètre de 5 à 15.

Modifier la taille de l'image

Voici un exemple d'utilisation de la grande taille en fonction de vos paramètres multimédias.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Vous pouvez également utiliser l'une des autres tailles par défaut configurées dans Paramètres > Média.

Miniature
moyen
grand
plein

Vous pouvez également utiliser toutes les tailles personnalisées que vous avez ajoutées dans votre fichier de fonctions.

Exemple:

portefeuille

 add_image_size( 'portfolio', 540, 340, TRUE );

Utilisation d'anciens crochets de boucle XHTML

Si vous utilisez toujours XHTML et que vous n'avez pas encore converti en HTML 5, vous devrez utiliser les anciens Loop Hooks :

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Ajout d'espace entre le titre et l'image

Voici un exemple de code CSS que vous pouvez ajouter à la fin de votre fichier style.css de thèmes enfants avant le code pour Media Queries qui ajoute une marge entre votre image en vedette et votre titre d'entrée sur des articles uniques.

 .single .post-image { margin-bottom: 30px; }

Utilisez cet exemple pour les pages :

 .page .post-image { margin-bottom: 30px; }

Aligner l'image sélectionnée (post-image) à droite

Vous pouvez également aligner vos images de publication à droite.

Ajoutez simplement ce code CSS avant vos Media Queries vers la fin de votre fichier style.css de thèmes enfants :

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

Le code ci-dessus alignera l'image que vous ajoutez en tant qu'image sélectionnée dans tous les messages individuels à droite de votre contenu afin que son texte soit enveloppé comme ceci :

publier une image

Vous pouvez également ajouter la classe alignright au code PHP plutôt que d'utiliser CSS.

 'class' => 'alignright'

Remplacez simplement post-image dans le code PHP par alignright et votre texte s'enroulera autour de votre image sur le côté droit de votre contenu.

Aligner l'image sélectionnée (post-image) à gauche

Vous pouvez également aligner les images en vedette de vos publications individuelles sur la gauche.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

Et voici le résultat :

flotter à gauche

Vous pouvez également ajouter la classe alignleft au code PHP plutôt que d'utiliser CSS.

 'class' => 'alignleft'

Remplacez simplement post-image dans le code PHP par alignleft et votre texte s'enroulera autour de votre image sur le côté gauche de votre contenu.

Remarque : Ce code CSS s'applique aux thèmes enfants Genesis 2.0 HTML 5 et peut ne pas fonctionner sur d'autres thèmes qui utilisent une classe différente pour les images de publication/images en vedette.

Supprimer un lien href de l'image sélectionnée

Un membre m'a demandé comment supprimer le lien du code alors le voici :

Remplacez simplement cette partie du code :

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

Avec ça:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;