Utilisation du greffon Photoblog et de ses templates

Conditions d'utilisation du thème avec le greffon

Pour utiliser photoblog, il suffit de choisir une photo dans le gestionnaire de media et l'insérer dans le contenu du billet. Pour le thème, une condition est obligatoire, un lien vers l'image doit être défini. Deux options, soit En tant que lien vers l'image originale en utilisation normale de Dotclear 2 soit En tant que lien vers l'image originale avec effet Lightbox si vous souhaitez utiliser d'autres thèmes utilisant le plug-in dclightbox.

Le choix de l'effet Lightbox n'interfère pas avec le thème, le code est modifié. Comme le choix de l'Alignement de l'image n'interfère pas avec le thème, le code est nettoyé. Les modifications seront présentées dans la partie consacrée à Imagebox.

Il est possible d'intégrer du texte dans le billet. Pour un meilleur rendu graphique du billet, il est nécessaire de séparer la photo soit par deux retours chariot soit en appuyant sur le bouton Passage à la ligne de la barre wiki après le lien vers la photographie.

Mise en place de la navigation dans les billets

Photoblog permet d'afficher les miniatures des photos contenues dans les billets. Ce thème utilise une navigation verticale, au plus, les deux billets suivants et précédents. Le template PhotoblogNav comprend différentes options :

  • dir permet de choisir la direction des billets : -1 pour précédent, 0 pour billet courant (défaut) et 1 pour suivant
  • nbEntries permet de choisir le nombre de billets précédents/suivants
  • reverse permet de choisir le sens de la chronologie : 0 chronologique (défaut), 1 antéchronologique

La photo du billet courant sera affichée en couleur alors que les précédentes et les suivantes seront affichés selon la teinte que vous avez choisi dans photoblog (sépia, argent…). Le template pour afficher le lien vers la vignette est PhotoblogGetThumb, les options sont :

  • type permet de choisir la couleur : bw pour la teinte (défaut) et color pour la vignette normale
  • archive, les vignettes pour la navigation ou les archives peuvent être différentes : 0 pour navigation (défaut), 1 pour archive

Les vignettes peuvent avoir des tailles personnalisées, il est donc impossible d'utiliser les feuilles de styles en cascade pour prendre en compte leur dimension. Il faudra utiliser le template PhotoblogThumbSize, les options sont :

  • size permet de choisir entre : height la hauteur et width la largeur
  • archive, les vignettes pour la navigation ou les archives peuvent être différentes : 0 pour navigation (défaut), 1 pour archive

Code html
La barre de navigation a ses éléments centrés, cela demande un peu gymnastique avec les miniatures… Présentation du code pour les billets suivants, les commentaires sont inclus dans celui-ci.

<div id="navigation">
…
<tpl:PhotoblogNav nbEntries="2" dir="1" reverse="1">
/*Affiche les deux billets suivants, l'ordre est inversé pour commencer par le plus récent*/
<li class="thumbnail"><p><a href="tpl:EntryURL" title="tpl:EntryTitle"
style="background-image: url(tpl:PhotoblogGetThumb type="bw");
/*Utilisation de la balise style pour introduire des règles css, choix des vignettes de navigation avec teinte*/
width: tpl:PhotoblogThumbSize dimension="width"px;
height: tpl:PhotoblogThumbSize dimension="height"px;">
/*L'espace d'affichage a la taille des vignettes de navigation fixé dans les préférences*/
<img src="tpl:BlogThemeURL/img/spacer.gif" style="width: tpl:PhotoblogThumbSize dimension="width"px;
height: tpl:PhotoblogThumbSize dimension="height"px;"
alt="transparent"/>
/*Image transparente dont la surface d'affichage est de la taille des vignettes, cela est obligatoire pour que l'espace soit réellement affiché*/
</a></p></li>
</tpl:PhotoblogNav>

Pour les billets précédents, le code est le même sauf les options de PhotoblogNav où dir="-1" et reverse="0". Le code suivant est pour la vignette du billet courant, elle est en couleur et occupe l'espace des vignettes.

<li class="thumbnail current"><p>
<img src="tpl:PhotoblogGetThumb type="color"" style="width: tpl:PhotoblogThumbSize dimension="width"px;
height: tpl:PhotoblogThumbSize dimension="height"px;" alt="Miniature de la photo courante" />
</p></li>

Effet teinte/couleur
Les vignettes teintées contiennent deux parties, une teintées et l'autre en couleur, leur hauteur est le double de celle des préférences. Il suffit de jouer sur leur positionnement, bottom/right ou top/left, pour afficher la partie en couleur dans l'espace d'affichage lors d'un survol de la souris.

.thumbnail a {
background-position: bottom right;
background-color: transparent;
background-repeat: no-repeat;
display: block;
}
.thumbnail a:hover {
background-position: top left;
}

Centrage des vignettes
Pour le centrage des vignettes, il a fallu utiliser jQuery. La largeur de la barre de navigation est 250px moins 30px de marge soit 190px utiles. Le centrage des vignettes se fait par l'ajout d'une règle d'espacement - padding - aux éléments de la liste non ordonnée - li.

var padthumb = (190-tpl:PhotoblogThumbSize dimension="width")/2;
$("#navigation ul li").css({padding:"0 "+ padthumb + "px"});

Inclure la navigation dans les billets pour les templates html
La navigation est uniquement présente pour les templates home.html et post.html puisque les autres modes ne sont pas utilisés pour l'affichage d'un billet unique. Le code jQuery est donc ajouté uniquement pour ces pages.
Par ailleurs, PhotoblogNav doit connaître le billet courant. Le fichier post.html est positionné sur un billet précis, ce n'est pas le cas de home.html qui est un mode d'affichage de plusieurs billets. Il est donc nécessaire de préciser un billet courant, ici le billet le plus récent et sans afficher son contenu, dans le fichier home.html. Le fichier _sidebar.html contient le code de la barre de navigation.

<tpl:Entries lastn="1" no_content="1"> tpl:include src="_sidebar.html" </tpl:Entries>

Le fichier post.html ne comprend que tpl:include src="_sidebar.html" dans la division #sidebar.

Catégories, tags et archives

Photoblog permet l'affichage des vignettes pour différents modes. Il est possible d'obtenir toutes les miniatures d'une catégorie, d'un tag ou d'un mois particulier. Voici le code pour category.html et tag.html. Comme précédemment, les dimensions de la division est définie sur celles des vignettes des archives.

<tpl:Entries lastn="49"> <div class="post-thumbnail"> <div class="post-thumbnail-image"><p><a href="tpl:EntryURL" title="tpl:EntryTitle" style="background-image: url(tpl:PhotoblogGetThumb archive="1"); width: tpl:PhotoblogThumbSize dimension="width" archive="1"px; height: tpl:PhotoblogThumbSize dimension="height" archive="1"px;"> </a></p></div></div> … </tpl:Entries>

La taille par défaut des vignettes est 90px x 90px alors que le contenu de la division #content est limité à 700px, cela équivaut à 7 vignettes par lignes avec des marges de 5px. D'où le choix de limiter le nombre maximal de vignettes à 49 par page, cela soulagera le serveur tandis que la pagination permettra de charger les éléments suivants.
Pour archive_month.html, il n'y a pas de limite. En standard, il n'y a pas de pagination.

Pour l'effet teinte/couleur, le code css est identique à celui présenté précédemment. Pour faire flotter les divisions et définir les marges, la règle css suivante est nécessaire.

.post-thumbnail { float: left; margin: 5px; }

La seconde partie porte sur l'intégration des effets javascript jQuery est là.