Phare perdu

Tout d'abord, qu'est-ce que cette extension?

• Le principe de yapb c'est une image=un billet. Quand vous écrivez un billet vous pouvez mettre une image avec le texte qui va avec.
• Vous pouvez afficher les informations EXIF de chaque photo (temps d'exposition, flash, diaphragme, ...)
• Vous pouvez faire des miniatures dans la liste des billets
• Et si vous touchez un peu au code, vous pouvez faire des choses sympas...

Si vous voulez voir un exemple, vous pouvez visiter mon blog photo: Ti Arz.

Pour ceux qui ne l'ont jamais fait, voici comment on installe un blog. Laissez vos commentaires pour les points d'ombre:

1. Pour commencer, vous devez avoir un hébergeur. Si vous êtes ici c'est que vous devez en avoir un... Pour moi, free va très bien.
2. Téléchargez la dernière version de WordPress.
3. Décompressez le fichier obtenu, et mettez le contenu de l'archive sur votre site internet. Pour le faire, vous devez utiliser un logiciel FTP comme FileZilla: installez le logiciel, lancez le, indiquez vos paramètres de connexion (ex pour free, hôte: ftpperso.free.fr; utilisateur: phareperdu; mot de passe: *****; port: 21), et glissez déposez les fichiers de WordPress vers le serveur distant (=votre site internet).
4. Allez sur la page d'accueil de votre site afin d'installer le blog en entrant toutes les informations nécessaires.
5. Choisissez (ou pas) votre propre thème, vous en trouverez sur le site de WordPress ou vous pouvez prendre des thèmes faits pour yapb, puis téléchargez le.
6. Décompressez votre thème et copiez le sur votre serveur dans le répertoire /wp-content/themes/
7. Allez dans l'interface d'administration et cliquez sur le thème que vous venez d'installer.

On va enfin pouvoir se pencher sur le blog photo:

1. Télécharger l'extension Yet another photoblog.
2. La décompresser et mettre le dossier /wp-content/plugins/ sur le serveur.
3. Activez l'extension yapb dans l'administration.

Et voilà, vous pouvez dès à présent utiliser votre blog photo. Vous pouvez définir les paramètres dans le panneau d'administration. Suivant le thème que vous avez, vous pouvez mettre des miniatures avec les dernières photos dans la barre latérale.

Pour afficher les informations EXIF dans les billets, vous pouvez insérer le code suivant dans le fichier index.php de votre thème (/wp-content/themes/~votre theme/) :
Remplacez:

<div class="postmetadata">
</div>

par:

<div class="postmetadata">
<?php if (yapb_is_photoblog_post()): ?>
<?php if (is_single()): ?>
<h3>EXIF</h3>
<ul>
<?php
yapb_exif(
'li-exif',   // CSS Class for the LIs
': ',        // Separator between EXIF token name and value
'<strong>',  // HTML before EXIF token name
'</strong>', // HTML after EXIF token name
'<i>',       // HTML before EXIF token value
'</i>'       // HTML after EXIF token value
)
?>
</ul>
<div class="endExif"></div>
<?php endif ?>
<?php endif ?>
</div>

Si vous voulez un aperçu du billet précédent et suivant, insérez juste après:

<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

le code:

<div class="navigation">
<div class="alignleft">
<?php // Use the WP Infrastructure to get the next post
 $theNextPost = get_next_post(); 
 //print_r($theNextPost);
 // Check if we've gotten something
 if (!empty($theNextPost)) {
   // Yes, we have a next post
   // Let's check if it has an image attached:
   if (!is_null($image = YapbImage::getInstanceFromDb($theNextPost->ID))) {
     // Yes, we have an image
     // Let's define the thumbnail configuration
     $thumbnailConfiguration = array(
       'w=75', // 75 pixels width
       'h=75', // 75 pixels height
       'zc=1'  // crop the image
     );


     // And output the image tag
     echo '<a href="' . get_permalink($theNextPost->ID) . '">';
     echo '<img ' .
       'border="0" ' .
       'src="' . $image->getThumbnailHref($thumbnailConfiguration) . '" ' .
       'alt="To the previous post" ' .
       'width="' . $image->getThumbnailWidth($thumbnailConfiguration) . '" ' .
       'height="' . $image->getThumbnailHeight($thumbnailConfiguration) . '" ' .
       '/> &laquo; ';
     echo $theNextPost->post_title.'</a>';
   } else {
     // no image - we display a text link
     echo '<a href="' . get_permalink($theNextPost->ID) . '">To the previous post</a>';
   }
 }

?>
</div>
<div class="alignright">
<?php

 // Use the WP Infrastructure to get the next post
 $thePreviousPost = get_previous_post(); 
 //print_r($theNextPost);
 // Check if we've gotten something
 if (!empty($thePreviousPost)) {
   // Yes, we have a next post
   // Let's check if it has an image attached:
   if (!is_null($image = YapbImage::getInstanceFromDb($thePreviousPost->ID))) {
     // Yes, we have an image
     // Let's define the thumbnail configuration
     $thumbnailConfiguration = array(
       'w=75', // 75 pixels width
       'h=75', // 75 pixels height
       'zc=1'  // crop the image
     );

     // And output the image tag
     echo '<a href="' . get_permalink($thePreviousPost->ID) . '">'.$thePreviousPost->post_title;
     echo ' &raquo; <img ' .
       'border="0" ' .
       'src="' . $image->getThumbnailHref($thumbnailConfiguration) . '" ' .
       'alt="To the next post" ' .
       'width="' . $image->getThumbnailWidth($thumbnailConfiguration) . '" ' .
       'height="' . $image->getThumbnailHeight($thumbnailConfiguration) . '" ' .
       '/>';
     echo '</a>';
   } else {
     // no image - we display a text link
     echo '<a href="' . get_permalink($thePreviousPost->ID) . '">To the next post</a>';
   }
 }

?>


</div></div>

Et voilà, vous pouvez déjà faire quelque chose de sympa avec ça. Vous modifiez le style CSS de la page en fonction de vos goûts et le tour est joué!

Je vous expliquerai dans un autre billet comment faire une page façon mosaïque avec toutes vos photos.