pyeb theme 2 dotclear - Photoblog

greyOne, photoblog thème

pyeb — Thu, 18 Oct 2007 18:37:00 +0200

Après plusieurs tentatives peu heureuses, j'ai fini par mettre en forme le thème photoblog qui me convient. Un cadre arrondi pour visualiser la photo, un style noir/gris aperture ou lightroom like, un peu web 2.0… Le menu est en javascript mais simple. Pas de librairie complémentaire à charger…

… sauf en utilisant dclightbox ou dcthickbox. Petit détail esthétique qui a son importance, le positionnement des images doit être soit aucun soit centré.

greyOne est un thème liquide de 950 px avec une colonne et peut accepter des photos de 800 px.

Support opérationnel à partir de novembre 2007. :roll:

Télécharger le thème.

Ornamentals thème pour photoblog, partie 2 - intégration des effets jQuery

pyeb — Tue, 11 Sep 2007 20:01:00 +0200

Voici, la seconde partie sur la conception du thème pour Photoblog ornamentals.

Ornamentals est un thème fluide, mais avec #content fixé à 700px, et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.

Télécharger le thème.

Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3

Mise en place de l'effet accordéon dans la barre de navigation

La librairie Accordion permet de n'afficher le contenu que d'un seul élément d'un menu. Pour afficher, le contenu d'un autre menu, il suffit de cliquer sur le titre du menu.

Fonctionnement

Le chargement de la librairie Accordion se fait ainsi dans le fichier _head.html.

<script type="text/javascript" src="tpl:BlogThemeURL/jquery.accordion.pack.js"></script>

Le code jQuery pour l'effet accordéon est le suivant. Il s'applique à toutes les divisions de #sidebar, le titre est une balise h2 et la division ouverte est celle avec une balise h2@ ayant une classe selected. L'élément navigation: true permet une utilisation correcte d'Accordion et des listes, ici ul li@@.

$("#sidebar div").Accordion({
header: 'h2',
active: 'h2.selected',
navigation: true
});

La version 1.4 d'Accordion encadre les différents éléments affectés par la librairie par une balise fieldset. Elle m'a sauvé des griffes d'IE 7 qui ne réagissait pas correctement avec les marges et la balise li. Ainsi, la barre de navigation fonctionne avec des marges de 30px sans bug graphique. Comme tout navigateur normal, respectueux des normes W3C et bien codé devrait fonctionner…

Le contenu de la barre de navigation

La barre de navigation contient les liens vers les catégories, les tags, les archives et les liens. Il y a deux fichiers _sidebar.html et _sidebarnonav.html, le premier contient également les vignettes de photoblog et est utilisé uniquement par home.html et post.html.

Pour plus d'explication sur le fonctionnement des templates, voir le billet.

Pour les fichiers templates html autres que home.html et post.html, la barre de navigation est affiché par l'ajout de tpl:include src="_sidebarnonav.html" dans la division #sidebar.

Mise en place d'Imagebox

Le choix de la librairie Imagebox

Ce thème n'utilise que le javascript jQuery. Il serait utilisable avec dclightbox en modifiant le code jQuery comme l'explique ce billet. Mais le but est de faire un thème tout en un, sans ajout de plug-in et sans intervention de l'utilisateur du blog.

Il existe plusieurs librairies avec effet lightbox en jQuery. La plus connue - et ayant le plus de fonctionnalités - est thickbox mais elle a deux problèmes :

les photos sont ajustées à la résolution de la fenêtre du navigateur et sous windows, le rendu est catastrophique
l'activation passe par la déclaration d'une classe plutôt que par une balise rel.

Imagebox était donc la librairie parfaite, pas de réduction, activation par rel et proche en fonctionnalités de lightbox. Mais Interface, la suite comprenant Imagebox, est quasi non fonctionnelle sous Safari. Comme c'est mon navigateur par défaut…
Le libre étant ce qu'il est, j'ai trouvé une version modifiée qui fonctionne avec Safari. J'ai fait les corrections nécessaires pour compacter la librairie, elle en avait besoin. Mais, il en reste… :roll: La version non compactée est là.

Par bonheur, les effets d'animation d'Interface fonctionne sous Safari.

Fonctionnement

Imagebox fait partie de la suite Interface, il faut charger par morceaux les différents éléments non buggés. Ainsi, il faut charger toutes les librairies à partir du fichier _head.html :

<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/imagebox_pck.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifx.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxblind.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxdrop.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxslide.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/iutil.js"></script>

Les librairies ifx….js permettent les effets, iutil.js sert de librairie ressource. Ce sont des versions compactes pour réduire le poids et le temps de téléchargement.

Ne pas oublier la feuille de style à rajouter, elle est de type media="screen". Elle permet la transparence, le positionnement des éléments et les couleurs du cadre.

@import url(tpl:BlogThemeURL/imagebox/imagebox.css);

Le billet d'une photographie n'est affiché qu'avec les fichiers templates home.html et post.html, le code est donc inséré uniquement dans ses fichiers. Tout d'abord, il est nécessaire de nettoyer le code produit par Dotclear dans une utilisation standard. Vous avez la possibilité de positionner les images comme vous le souhaitez pour utiliser des thèmes différents. Le thème centre toutes les photos donc il faut supprimer les styles supplémentaires permettant l'alignement à droite par exemple.

$(".post-content img").removeAttr("style");

Il faut ensuite affecter l'effet Imagebox à un lien vers l'image. Le nom de l'image sert de titre. Cela n'interfère pas avec les autres liens présents dans le billet.

$(".post-content a").attr({rel: "imagebox", title: "tpl:EntryTitle"});

Ce code fonctionne pour un billet précis donc pour post.html. Pour home.html, il faut choisir, comme précédemment, un billet courant.

<tpl:Entries lastn="1">
$(".post-content a").attr({rel: "imagebox", title: "tpl:EntryTitle"});
</tpl:Entries>

La pagination reste également fonctionnelle. Le code précédent est placé avant la classe .post-content, le suivant servant à initialiser l'effet est placé, lui, après. Les options utilisées comprennent la taille du cadre, le lien vers un gif animé pour attendre le chargement de l'image ainsi que le lien vers l'image d'arrêt de l'effet.

$.ImageBox.init( {
border: 20,
loaderSRC: 'tpl:BlogThemeURL/imagebox/loading.gif',
closeHTML: '<img src="tpl:BlogThemeURL/imagebox/close.gif" />'
});

Pour quitter Imagebox, il faut aussi possible d'utiliser le bouton esc.

Mise en garde

Par contre, Imagebox a un gros défaut, il y a un bug graphique avec Tabs. Il est surtout sensible sous Internet Explorer, les onglets sont au-dessus des photos…

Quelques fioritures

Affichage du nombre de commentaires et de rétroliens

J'ai utilisé les templates de Mirovinben pour afficher uniquement le nombre de commentaires et de rétroliens. Ils sont aussi présent dans moreTpl de Kozlika.

Afficher/Masquer Ajouter un commentaire

J'ai utilisé le même principe que pour AltowithjQuery tout en ajoutant un icône dont l'état est contrôlé par les classes showul et hideul. Par ailleurs, j'ai ajouté la classe h3form au titre de l'ajout de commentaire, division #comment-form, pour que le titre de la zone de prévisualisation, division #pr, ne soit pas pris en considération.

<script type="text/javascript">
$(document).ready(function() {
if ($('#pr').is(':visible')) {$('.hidecomment-form').show()} else {$(".hidecomment-form").hide()};
$("#comment-form .h3form").addClass("hideul").click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp("fast");
$(this).removeClass("showul");
$(this).addClass("hideul");
} else {
answer.slideDown("slow");
$(this).removeClass("hideul");
$(this).addClass("showul"); }
});
});
</script>

Modifier #top

Pour mieux séparer visuellement #top du contenu du blog, il est possible d'utiliser un fond blanc. Dans le fichier style.css, il suffit d'ajouter */ à toutes les lignes /* header blanc ce qui décommentera la règle css. Il faudra également commenter les règles qui fixent un fond noir en supprimant */ à toutes les lignes /* header noir */.

Utiliser des widgets

Le code n'est pas présent mais il est possible d'utiliser des widgets. Il suffit de rajouter le code suivant avant </fieldset> dans les fichiers _sidebar.html et _sidebarnonav.html. N'oubliez pas d'ôter les widgets Liste des catégories, Tags, Liens de navigation, Liens d'abonnement et Liens pour éviter d'avoir les informations en double.

<div id="blognav">
tpl:Widgets type="nav"
</div>
<div id="blogextra">
tpl:Widgets type="extra"
</div>

Ornamentals thème pour photoblog, partie 1 - intégration du thème au greffon Photoblog

pyeb — Fri, 07 Sep 2007 20:20:00 +0200

Avec l'arrivée de Dotclear 2, il est possible de faire du multiblog c'est à dire avoir plusieurs blogs avec une même base de données et la même interface d'administration. Donc au lieu d'un blog fourre-tout, il est facile d'avoir un blog principal et de déporter ces photos sur un photoblog.

Julien Mudry - zeiram sur le forum de Dotclear - avait créé un greffon Photoblog pour DC1. Une alpha pour DC2 est sortie. Petite mise en garde, le greffon est en alpha donc il fonctionne correctement mais il est encore en phase de débugage.

Pour ce thème, plusieurs choix ont été privilégiés :

la mise en valeur des photographies
une interface de navigation réduite
l'intégration d'un effet lightbox

Ornamentals est un thème semi-fluide - le #content fixé à 700px - et un fond noir. La navigation est habillée avec la librairie jQuery Accordion tandis que la librairie jQuery Imagebox - partie de la suite Interface - s'occupe de l'effet lightbox.

Télécharger le thème.

Mise à jour du 17/09/07 : compatible avec la pre alpha 5 Mise à jour du 17/11/07 : compatible avec Safari 3

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à.

Ornamentals, mon premier thème pour photoblog (màj : 05/08/07)

pyeb — Tue, 31 Jul 2007 16:46:00 +0200

Ceci est mon premier thème pour photoblog, il utilise le greffon photoblog 0.1 pre-alpha--2--4 de Julien Mudry ou zeiram sur le forum de Dotclear. ~~Pour la présentation de ce greffon, je vous invite à lire le billet de présentation.~~ Petite mise en garde, le greffon est en alpha donc il fonctionne mais il est encore en phase de débugage.

Le thème est, lui aussi, en version beta. Il a été testé sous Firefox 2 (Mac & PC), Safari 2 et 3 (Mac & PC), IE 6 & 7 (après de longues épreuves…) ainsi que sous Opera 9.2 (Mac). En dehors du greffon photoblog, il y a une condition obligatoire pour qu'il soit pleinement fonctionnel : cocher, lors de l'ajout d'une photo, En tant que lien vers l'image originale. Et pourquoi ?

Ornamentals est un thème utilisant la librairie jQuery et les librairies Accordion et imagebox en version modifiée. Pour mettre en valeur les photos, la barre latérale ne montre qu'une division à la fois en accordéeon. Imagebox est la version la plus proche de lightbox en jQuery, il suffit de cliquer sur la photo. D'où la présence d'un lien sur la photo.

Il est possible de mettre du texte dans un billet en plus de la photo. Par contre, il faudra séparer la photo du texte soit par 2 retours à la ligne ou l'utilisation du retour chariot dans la barre d'outil de l'édition de billet sinon cela perd de son charme…

L'explication de texte et débugage pour plus tard. Après quelques retours et autres demandes. Cliquez sur la photo pour accéder au photoblog de test.

màj 05/08/07 : J'ai adapté le thème à la dernière version du greffon et de ses nouveaux templates. La barre de navigation utilise l'effet N&B/couleur, les flux RSS sont envoyés dans le footer et J'ai corrigé quelques bugs.

Télécharger le thème.