pyeb theme 2 dotclear - Tag - DC2

Dotclear 2.1 : freshyOne et tabsOne, possibilité d'ajouter un widget hors de la barre de navigation

pyeb — Tue, 11 Nov 2008 10:39:00 +0100

Depuis Dotclear 2.1, il est possible d'inclure un widget particulier à n'importe quel endroit d'une page d'un blog. Donc, il est maintenant possible d'ajouter un widget au menu de navigation de freshyOne et tabsOne.

Pour ce faire, il faut modifier le fichier _menu.html qui est dans le dossier tpl de chacun des deux thèmes. Il est d'abord nécessaire d'ajouter un lien dans le menu de navigation. Chaque élément du menu est encadré par la balise html li. Il suffit d'ajouter le code suivant à l'endroit où vous voulez positionner ce nouvel élément mais en dehors du premier et dernier élément. Le code est, ici, différent selon les thèmes. L'exemple repose sur le widget Derniers commentaires. Je m'appuie sur le template de localisation multilingue. Il est possible d'écrire directement les termes mais il faudra veiller à utiliser du code html pour les caractères accentués.

Pour freshyOne

<li class="page_item"><a href="#tablastconmments">{{tpl:lang Last comments}}</a></li>

Pour tabsOne

<li><a href="#tablastconmments">{{tpl:lang Last comments}}</a></li>

Après avoir nommé l'élément de menu, voici le code pour afficher le widget. Il n'est pas obligatoire de positionner le code dans le même ordre que pour le menu mais cela est plus pour s'y retrouver. Le code est commun aux deux thèmes.

<div id="tablastcomments" class="fragment">
    <tpl:Widget id="lastcomments">
          <setting name="homeonly">0</setting>
     </tpl:Widget>
</div>

Il est obligatoire de définir au moins un paramètre pour que template widget fonctionne, ici l'affichage pour toutes les pages du blog. Ce paramètre doit rester à 0.

La feuille de style a été modifiée pour que le titre du widget - balise html h2 - ne s'affiche pas. De fait, le paramètre - <setting name="title"> ne s'affichera donc pas s'il est défini. Pour un widget texte contenant une balise html h2, il faudra ajuster la feuille de style en conséquence.

Mise à jour des thèmes pour Dotclear 2.1.1 et le plug-in ContactMe

pyeb — Tue, 11 Nov 2008 10:29:00 +0100

Pour Dotclear 2.1.1, j'ai mis à jour les styles pour coller avec l'arrivée des sous-catégories. Cela concerne tous les thèmes. Pour les thèmes ayant des fichiers templates .html, j'ai mis à jour category.html ainsi que les diverses modifications apportées depuis DC 2.0.

Pour prendre en compte les plug-in Contact Me, j'ai modifié certaines règles de styles et ajouté un fichier contactme.html si nécessaire.

Blog

123 - 123 Blue - 123 Ice - altowithjquery - bredrerode - Cinema - Chocolate & biscuit - DoTunes - doublOrange - freshyOne - Lueurs - monsterinlove - One - Orangeworld - Pastel - Pastel light - Pastel large - slottbacken - Sober - tabsOne - thamesstreet

Mise à jour des thèmes photoblog

pyeb — Tue, 26 Aug 2008 13:47:00 +0200

Je pensais qu'il y avait des problèmes entre mes thèmes photoblog et lightbox. En fait, ce n'était que problèmes de cache... Donc, voici les versions pour Dotclear 2.0 :

greyOne - ornamentals

Version finale de Dotclear 2.0 : mise à jours des thèmes

pyeb — Thu, 21 Aug 2008 16:21:00 +0200

Après plusieurs mois de lourd travail, l'équipe de Dotclear et Olivier Meunier, son géniteur, ont sorti la version finale de dotclear 2.0 après de nombreuses mais toujours fonctionnelles bêtas et autres RC.

J'ai donc mis à jour mes différents thèmes pour qu'ils adoptent les dernières modifications des templates - et elles sont nombreuse ! - entre la RC1 et la version finale. Pour le moment, les mises à jour pour les thèmes pour photoblog sont en attente.

Blog

123 - 123 Blue - 123 Ice - Absolut - altowithjquery - bredrerode - Cinema - Chocolate & biscuit - DoTunes - doublOrange - freshyOne - Lueurs - monsterinlove - One - Orangeworld - Palissade - Pastel - Pastel light - Pastel large - RedSky - slottbacken - Sober - tabsOne - thamesstreet

Configurer le thème : freshyOne, sober et tabsOne

pyeb — Tue, 01 Jul 2008 21:30:00 +0200

Depuis la RC1 de dotclear 2, il est possible de définir des préférences pour des thèmes. J'ai utilisé cette possibilité pour trois thèmes freshyOne, sober et tabsOne. Pour configurer les thèmes, je suis parti du travail de dsls et du portage du thème Freshy 2.

sober

Ce thème a été créé dans l'optique d'avoir plusieurs variations chromatiques : blanc/rouge, blanc/bleu/orange, noir, orange, olive et ciel. Il fallait modifier à la main le fichier style.css pour choisir la couleur ou prendre un thème particulier. Maintenant, il suffit de choisir sa variation.

freshyOne

Ce portage de thème Wordpress contient à l'origine la possibilité de choisir l'image d'en-tête ainsi que la couleur de fond lors du choix d'un élément. Ces deux paramètres sont accessible à partir de l'administration de DC2.

tabsOne

Ce thème contenait deux fichiers de style - bleu et magenta -, il suffit de choisir maintenant classique, bleu ou magenta.

YASH, le code !

pyeb — Sat, 28 Jun 2008 14:52:00 +0200

J'ai mis à jour les différents billets contenant du code html, javascript ou css en utilisant le plug-in YASH de pep, la présentation des billets est donc plus lisible et plus facile à copier.

Quelques amusements dans les jours qui viennent…

Retour d'un _head.html pour les thèmes altowithjQuery, freshyOne, tabsOne, greyOne et ornamentals

pyeb — Tue, 27 May 2008 21:43:00 +0200

Suite au problème dû à l'utilisation d'un user_head.html, tous les thèmes l'utilisant ont à nouveau un _head.html. Par la même, le plug-in lightbox utilisant jQuery, les appels jQuery n'utilisent plus jQuery.noconflict - le code javascript Lightbox original repose une autre libraire javascript - et ne génère plus de conflit avec lightbox. Comme quoi…

Pour ornamentals, j'ai abandonné la librairie imagebox. C'est un peu contraire à la démarche initiale du thème mais la maintenance est plus simple et le code plus léger.

Arrivée de Dotclear 2 RC1, mise à jour des thèmes

pyeb — Thu, 01 May 2008 20:46:00 +0200

Dotclear vient - enfin ! - de passer en Release Candidate. Avec cette version, les fonctionnalités sont gelées jusqu'à l'éradication des derniers bugs avant l'arrivée de la première version de DC2. Les nouveautés ont été apportées jusqu'aux dernières heures avant la sortie officielle. DC2 RC1 est même arrivée dés les premières secondes de ce premier mai 2008. Chapeau à toute l'équipe !

Pour les thèmes, la modularité de DC2 a été augmentée et l'organisation est plus cadrée. Les plug-ins pourront maintenant fonctionner sans modification de fichiers. Les fichiers templates html sont maintenant rangés dans un dossier tpl. Sinon, il n'y a pas de changement profond dans les styles.

Mes thèmes sont déjà fonctionnels pour les plug-ins Pages - inclus dans DC2 - et dayMode - créé par Pep.

Mes thèmes et la future RC de Dotclear 2

pyeb — Tue, 15 Apr 2008 20:11:00 +0200

Actuellement avec les nigthly builds de DC2, les thèmes utilisant des templates spécifiques ont des problèmes dus au changement de noms des fonctions pour la gestion des rétroliens - modifier le mot trackback par ping - sinon ils sont fonctionnels.

Les modifications pour mettre à niveau mes thèmes sont déjà effectuées. J'attendrai la sortie officielle de Dotclear 2 RC pour les mettre en ligne car :

les thèmes ne fonctionnent pas correctement avec la beta 7
des améliorations peuvent encore survenir d'ici le 1er mai 2008

Tester et développer ses thèmes Dotclear sous mac intel : vérifier la compatiblité avec Internet Explorer

pyeb — Fri, 14 Dec 2007 15:58:00 +0100

Depuis qu'Apple a sorti Safari, Microsoft a arrêté le développement d'IE sur Mac. Du moins, Microsoft a suspendu tout développement de ses navigateurs web pendant de longues années... Pour rappel, IE 5 pour Mac était le seul navigateur à la sortie de Mac OS X.
A présent pour les différentes versions d'IE, plusieurs choix sont ouverts : l'utilisation de site web faisant des captures de votre site ou la virtualisation.

Capture d'écrans

Le plus simple est l'utilisation de site prenant des captures d'écrans comme Total Validator - merci Kozlika. Ce site permet la vérification xhtml & css ainsi que la capture d'écran pour différents navigateurs.
Un point négatif apparaît, c'est plutôt statique. Il est lent de vérifier toutes les pages et les différents éléments. Ensuite, la moindre correction demande une capture.

Bootcamp et virtualisation

Avec l'arrivée des Mac intel et de Bootcamp, il est facile de créer une partition Windows et d'installer le nécessaire (serveur web, dotclear). Mais comme IE 6 et IE 7 réagissent différemment - ont des bugs différents, c'est selon - et ne peuvent installer en même temps, le problème n'est régler qu'à moitié. De plus, il faut redémarrer... Mais bon, pour les feuilles de styles, il faut utiliser les règles standards puis adaptés le code à IE.
Une solution de virtualisation est obligatoire. De fait, il est nécessaire d'avoir deux systèmes. Comme VMWare et Parallels peuvent utiliser la partition Bootcamp, il faut juste une deuxième partition. Cela reste lourd et long mais cela fonctionne parfaitement ! Et il possible de trifouiller les règles css tout en vérifiant que cela ne casse pas la compatibilité avec les navigateurs modernes sur mac.

Bientôt tout en local ou presque : Wine et IEs4mac

Une troisième solution de virtualisation existe, c'est wine. Et il existe des projets qui porte IE sous linux, IEs4linux, et par extension sous mac, IEs4mac. Mais malheureusement, si IE 6 for mac fonctionne, IE 7 for mac est trop lent et l'affichage n'est pas toujours fait dans sa totalité. Le support d'IE 7 n'est encore qu'en beta et n'est pas utilisable actuellement en état.
Le plus simple est d'avoir Bootcamp avec IE 7 et d'utiliser IE 6 for mac.

Tester et développer ses thèmes Dotclear sous mac intel : les navigateurs disponibles

pyeb — Fri, 14 Dec 2007 15:01:00 +0100

Ce billet fait suite au billet sur les outils de développement pour dotclear sous mac.

Logiciel d'édition de texte avec coloration du code

J'utilise désormais TextMate. Pour la simple raison que je l'ai acheté en bundle avec d'autres logiciels - MacHeist ou MacUpdate ? - mais surtout qu'il est possible de rajouter des langages en les téléchargeant ou en les créant. Il y a le support de jQuery. Waouh !
Site de TextMate

Navigateurs disponibles sous Mac OS X

Safari

Depuis Panther 10.3, Mac OS X est livré avec Safari. Il utilise comme moteur de rendu Webkit qui est dérivé de KHTML.
La version 3 du navigateur vient de sortir et est inclus dans Léopard 10.5 ainsi que dans la mise à jour de Tiger 10.4.11. Cette version est plus véloce, gère mieux le javascript - enfin ! - et propose des outils de développement.

Safari 3 continue de supporter les extensions aussi bien les InputManager que ceux utilisant SIMBL. Pour trouver un listing d'extensions, il suffit de jeter un oeil sur Pimpmysafari. Par exemple, Safari Tidy indique les erreurs et les avertissements W3C et Safari Source colorie le source de la page.
J'utilise Safari comme navigateur par défaut car son rendu est supérieure à Firefox et que les extensions de Safari, que j'utilise, remplacent celles existantes sur Firefox (Saft, SafariBlock, Inquisitor).

Ces outils (inspecteur web, console javascript…) sont accessibles à partir du menu Debug dont il faudra autoriser l'affichage par la commande suivante à partir de l'application Terminal : defaults write com.apple.Safari IncludeDebugMenu 1

Par ailleurs, un debugger javascript Drosera est disponible avec les « nightly builds » du webkit.

Pour information, Shiira et Omniweb utilise également le moteur webkit. De même pour les téléphones mobiles, l'iPhone utilise bien sûr Safari 3 mais Nokia utilise également le webkit.

Firefox

Le panda rouge utilise le moteur de rendu Gecko mais sur Mac, il est plus lourdeau que sur PC. Du moins dans sa version 2. A priori la version 3 devrait être mieux intégré à Mac OS X.
La plupart des extensions sont compatibles PC/Mac dont l'indispensable Web Developper. L'extension IETab qui demande la présence d'Interner Explorer ne fonctionne évidemment pas sur Mac...

Deux autres applications utilisant le moteur Gecko existent. Tout d'abord Camino, ce navigateur s'appuie sur le look & feel de Mac OS X et sur les API d'Apple bien plus que Firefox. Ensuite, il y a Flock qui se présente comme le navigateur social et qui permet l'écriture de billets pour les blogs.

Opera

Le navigateur multiplateforme et multisupport Opera est disponible sous Mac sans problème.

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 à jour du 27/05/08 : suppression de la librairie imagebox, compatible avec le plug-in lightbox

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
Mise à jour du 27/05/08 : suppression de la librairie imagebox, compatible avec le plug-in lightbox

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.

Mises à jour mineures et majeures…

pyeb — Sun, 29 Jul 2007 21:27:00 +0200

… sur un air de Led Zep.

Comme le W3C a décidé de modifier son validateur, il fallait mettre à jour tous les templates .html. J'ai donc profité de cette amusement pour ajouter le bouton Envoyer pour les thèmes qui n'est profitaient pas. Tous les thèmes ont été mis à jour.

Moins trivial - enfin presque -, j'ai fait des modifications sur certains thèmes pour qu'ils utilisent les fichiers templates par défaut :

Pastel like et Orangeworld
DoTunes

Plus pervers, les images du thème Lueurs n'avaient pas un fond vraiment noir. J'ai repassé les images à la moulinette et fait quelques ajustements pour préserver les lueurs…

Bientôt quelques amusements en jQuery…

Les thèmes jQuery et dclightbox compatibles

pyeb — Thu, 26 Jul 2007 21:36:00 +0200

Grâce aux commentaires laissés par Gérald, il n'y a plus de conflit entre jQuery et dclightbox. Il suffisait d'utiliser les bons termes pour empêcher les conflits entre les librairies jQuery et prototype…

Dans le fichier _head.html de freshyOne, il faut remplacer les lignes du script par :

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#frame').tabs({fxSlide: true});
jQuery('a.presearch').click( function() {
jQuery('.menu li').removeClass('tabs-selected');
jQuery('div.fragment').hide();
jQuery('li.first_menu').addClass('tabs-selected');
jQuery('#tabsearch').show();
}); });

Par ailleurs, la version de altowithjquery est la version 1.1 sur le post initial.

Thèmes et Dotclear 2 beta 7

pyeb — Sat, 14 Jul 2007 15:11:00 +0200

La migration de mon blog sous DC2 b7, c'est déroulée sans anicroche. J'ai fait une vérification sous Safari et sous firefox, pour les thèmes en jQuery, et il ne semble pas qu'il est de problème.

Le retour de la revanche, une nouvelle librairie pour alto with jQuery

pyeb — Mon, 07 May 2007 21:15:00 +0200

J'ai trouvé une librairie qui fonctionne avec les principaux navigateurs ! C'est curvyCorners for jQuery. Les problèmes avec Safari sont résolus. Le bug avec post-tags sous Opera reste comme avec les autres librairies, cela me laisse perplexe…

En nouveauté, la prévisualisation des commentaires est correcte et la liste des pages connexes s'entoure d'un joli bleu. Sinon, toujours la même punition, je ne sais pas ce que cela donne avec une vidéo flash sous IE 7. A priori, cela devrait fonctionner.

Télécharger alto with jQuery 1.1.

Bréderode, Slottsbacken & Thames Street, pattern is hype

pyeb — Sun, 22 Apr 2007 00:38:00 +0200

En cette journée toute présidentielle, trois nouveaux thèmes avec une barre de navigation à gauche, à droite et au centre - en bas quoi. Surtout rien à l'extrême-droite ni rien sur l'identité nationale. Fini les grands aplats de couleur, le papier peint est à la mode. Nostalgie quand tu nous tiens ! Un cadre tout doré pour encadrer des photos, des tableaux.

Avec les navigateurs modernes - suivez mon regard… -, la transparence laisse paraître les motifs gris et bleus. Le rouge se marrie avec l'orange mais juste dans les rêves éveillés. Sous l'ineffable IE 6, la transparence disparaît et la structure devient fixe mais tout est fonctionnel. Ouf ! Un grand au revoir avant la prison.

Les thèmes sont plutôt adaptés à une résolution 1024 x 768 px même si le 800 x 600 px est fonctionnel.

Télécharger Bréderode, Slottsbacken et/ou Thames Street.