Les blogs sous WordPress ont la capacité à insérer beaucoup d’images ou autre médias dans les articles. Malheureusement, leurs affichages ne sont pas très avancés. WordPress dispose bien évidemment une galerie interne affichant les différentes images de votre article, mais il est seulement possible d’afficher les images dans l’article en lui-même et non à l’extérieur. L’affichage d’une galerie d’image concernant l’article est plutôt sympa, cela l’est encore plus s’il est possible de les afficher là où vous le souhaitez.
DigWp nous offres un article très complet concernant l’affichage des images. Grâce à de simples fonctions à insérer dans le fichier « functions » de votre thème, il est possible d’afficher et de personnaliser une galerie contenant les images de vos articles. Plutôt pratique pour les sites d’hôtels, blog photos, ou encore blog professionnel affichant beaucoup d’images dans leurs articles.
Le fonctionnement
À la fin de son article, il donne une fonction complète de quelques lignes vous permettant d’afficher n’importe valeur de vos images. On peut par exemple afficher : l’adresse de l’image, l’adresse de la page contenant l’image (attachement), le nom de l’image, l’adresse de l’article, l’image (code html). Le mieux étant d’afficher l’image (miniature) avec l’adresse de l’image en taille réelle et en option (tout dépend de votre style graphique) le titre de l’image ou de l’article.
La fonction
Voici la fonction vous permettant tout cela. À insérer dans le fichier « functions.php » de votre thème WordPress. Quelques fonctions ne vous sont pas nécessaires. Il vous suffit de les supprimer ou de les garder au cas où…
[php]
function attachment_toolbox($size = thumbnail) {
if($images = get_children(array(
‘post_parent’ => get_the_ID(),
‘post_type’ => ‘attachment’,
‘numberposts’ => -1, // Le nombre d’images (-1 = toutes)
‘post_status’ => null,
‘post_mime_type’ => ‘image’, // Le type
))) {
foreach($images as $image) {
$attimg = wp_get_attachment_image($image->ID,$size); // Code html brut de l’image
$atturl = wp_get_attachment_url($image->ID); // Adresse de l’image en taille réelle
$attlink = get_attachment_link($image->ID); // Adresse de la page de l’image
$postlink = get_permalink($image->post_parent); // Adresse de l’article
$atttitle = apply_filters(‘the_title’,$image->post_title); // Le titre de l’article
echo ».$attimg. »; // Affiche les données
}
}
}
[/php]
Utilisation
Dans le code précédé nous avons affiché l’image (miniature) avec le lien de l’image réelle. Si vous souhaitez personnaliser les différents éléments il vous suffit simplement de modifier les variables.
Nous avons en fait cinq variables différentes : attimg – atturl – attlink – postlink et atttitle. Vous pouvez facilement modifier les variables. Pour afficher le titre de l’image tout en gardant l’image et le lien il vous suffit d’ajouter la variable « atttitle ». Remplacer la ligne 17 – echo… – par celle-ci :
[php]
echo ».$attimg.’
‘.$atttitle.’;
[/php]
Installation du code
Une fois le fichier « functions.php » enregistré il vous suffit simplement de coller le code suivant là où vous souhaitez afficher la galerie. Vous pouvez bien évidemment son affichage en ajoutant une simple « div« .
[php]
[/php]
Le style graphique
Vous pouvez par exemple utiliser cette feuille de style pour personnaliser votre galerie. Les bordures de vos images seront arrondies (en option). L’apparence et les couleurs devront tout-de-même être en parfaite harmonie avec le reste de votre blog.
[css]
.galeriegk {
background-repeat: repeat-x;
padding: 10px;
margin: 10px 0 0px 30px;
width: 574px;
background-color: #EFEFEF;
color: #FFFFFF;
}
.galeriegk img {
height: auto;
overflow: hidden;
padding: 5px;
background-color: #c9d7d8;
-webkit-border-bottom-left-radius: 3px 3px;
-webkit-border-bottom-right-radius: 3px 3px;
-webkit-border-top-left-radius: 3px 3px;
-webkit-border-top-right-radius: 3px 3px;
float: left;
margin-bottom: 10px;
margin-top: 0px;
margin-left: 10px;
}
[/css]
Découvrir d’autres méthodes
Je vous propose de découvrir deux autres méthodes pour pouvoir essayer ou étudier une autre façon que celle présentée dans cet article. À vous de choisir la bonne méthode pour votre blog.
Publié à l'origine le : 2 septembre 2009 @ 12 h 30 min
