pyeb theme 2 dotclear - Tag - Fluide

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.

Ouverture de pyeb.net, Absolut en bonus

pyeb — Sat, 25 Nov 2006 21:17:00 +0100

Les pages perso de Free, c'est sympa mais ça tombe souvent en rade. Donc, j'ai décidé de m'offrir un hébergement. Juste le service de base de 1and1.fr. Et vu que je me retrouve avec deux domaines, j'en dédie un pour les thèmes de dotclear 2. Pour éviter le spam par les rétroliens, je continue à n'accepter que les commentaires. Tribune Libre ne fonctionne plus avec les dernières modifications des svn de dotclear.

Et pour une ouverture, un cadeau est obligatoire donc voilà Absolut. Je voulais un thème plutôt sombre en jouant sur les gris. Un côté pro des applications Mac. Puis par même veine d'inspiration, le thème a tendu vers le thème negative des gandiblog. Le résultat est un thème classique et sobre.

Absolut est un thème fluide 2 colonnes. Télécharger le thème.

Bienvenue sur pyeb.net !

3 colonnes, version kit

pyeb — Mon, 30 Oct 2006 22:27:00 +0000

Cela fait 15 jours qu'il fonctionne correctement mais bon… 123 est une base pour faire un thème 3 colonnes. Sa structure anime déjà 123 Blue. 123 est en version fluide. Les couleurs sont là pour se faire une idée et permettent d'utiliser l'alternance pair/impair.

Télécharger le fichier.

One

pyeb — Thu, 31 Aug 2006 21:30:00 +0000

Nouvel exercice de style. One est un thème fluide. Il ne possède pas d'objets flottants, la barre de navigation suit les billets. Ce thème est donc plutôt approprié pour un affichage avec un billet par page. La recherche, les liens de navigations et les liens de syndication sont positionnés dans le haut de page.

Et le thème est un peu orange avec un peu de vert pour éviter l'overdose.

Télécharger le thème.

Mise à jour : j'ai modifié le lien pour télécharger le fichier.

Màj 2: les pièces jointes s'affichent correctement.

DoublOrange

pyeb pyeb — Sun, 09 Jul 2006 14:07:00 +0000

DoublOrange est un thème fluide avec 3 colonnes - contenu à gauche et les 2 sidebars à droite. Il n'y a qu'une image pour le fond de la sidebar, le thème et la feuille de style sont légers et demandent peu de bande passante.

Télécharger le thème.