une galerie de photos dans Plume c'est pas si compliqué !
Melody Nelson
pour le site que je fais avec Plume, j'ai besoin d'une galerie
photos... dans un premier temps, j'ai installé un outil de galerie
(gallery2 - très bon outil au demeurant) mais réussir à intégrer de
manière transparente cette galerie dans Plume a été mission
impossible (c'est sûrement possible pour un développeur avancé)...
du coup, je me suis penchée sur la solution galerie au format wiki
proposée dans Plume et voilà le résultat en images...
les galeries :
http://img204.imageshack.us/img204/170/galerie1ox3.png
une galerie simple :
http://img219.imageshack.us/img219/5797/galeriebasiqueqa5.png
une galerie multipages (moi je dis que c'est la totale classe !) :
http://img204.imageshack.us/img204/8926/galerie2fa2.png
on peut aussi imaginer des variantes comme celle-ci (mais pour être
honnête, j'ai pas réussi à modifier correctement le code pour que
les titres et descriptions soient dynamiques) :
http://img245.imageshack.us/img245/9102/galerietitredescriptionsm2.png
pour arriver à ce résultat, voici dans les grandes lignes comment
j'ai procédé :
- création d'un nouveau type de ressource "galerie" qui est associé
au type "article"
- création d'un gabarit spécifique aux galeries
- création d'une fonction pour naviguer entre les différentes pages
de la galerie sur le modèle de la navigation entre les différents
chapitres d'un article
- quelques petites adaptations du code qui génère la galerie wiki
- un peu de mise en forme CSS
pour créer une galerie :
- j'ajoute un article de type "galerie" dans ma catégorie "photos"
- la description contient une photo (syntaxe wiki galerie) et un texte
- j'ajoute un chapitre contenant autant de photos que je veux
- je peux aussi choisir de mettre ma galerie sur plusieurs pages en
créant autant de chapitres que nécessaire (les titres des chapitres
permettront de naviguer dans la galerie)
bon, ça a l'air un peu compliqué mon histoire mais ça ne l'est pas
vraiment et le résultat est plûtot sympa... serais-je devenue accro
à Plume ?
Nicolas LASSALLE
à terme, ie dans quelques mois, je te proposerais d'utiliser luxbum.
C'est un script de galerie photo que je développe et qui a pour
vocation d'être très simple. A l'état actuel des versions sorties, il
n'est pas possible de l'intégrer à plume-cms, mais je suis entrain de
réécrire le moteur d'affichage, et il sera très facile d'en faire un
plug-in pour plume !
Je ne manquerais pas de vous en reparler, mais pour l'instant le
développement n'est pas assez avancé !
Voici la page du projet luxbum :
http://nico.tuxfamily.org/PHP/Support-LuxBum
Pour voir ce que ça donne (avec la version de développement) :
- http://pics.iode.info/ (le thème par défaut de luxbum)
- http://nlassalle.linux62.org/luxbum/index.php (un autre thème
radicalement différent qui montre un peu la relative "souplesse" du
nouveau moteur d'affichage :p)
Rendez vous dans quelques temps pour d'autres infos
Nico
Le Sun, 20 Aug 2006 20:52:27 -0700,
"Melody Nelson" <melodyn...@gmail.com> a écrit :
Léo Studer
critique mais un compliment.
Moi qui suis justement en train de concocter un thème ZenPhoto...
Nicolas LASSALLE a écrit :
Nicolas LASSALLE
pas le thème par défaut de luxbum ! Je compte écrire encore au moins
deux autres thèmes complets afin de vérifier que le moteur d'affichage
est suffisamment générique, mais en attendant j'ai d'autres choses à
faire sur luxbum !
Le Mon, 21 Aug 2006 09:50:56 +0200,
Léo Studer <leo.s...@wanadoo.fr> a écrit :
Loic d'Anterroches
C'est simplement superbe !
Cela fait vraiment plaisir de voir comment tu arrives à utiliser le
système de manière élégante. Dis-moi les changements que tu as fait sur
la syntaxe wiki, histoire de voir si c'est "juste pour toi" ou si cela
pourrait être intéressant pour d'autres.
a+ et encore merci pour cette belle démonstration des possibilités de
Plume !
loïc
Luigi
> pour arriver à ce résultat, voici dans les grandes lignes comment
> j'ai procédé :
> - création d'un nouveau type de ressource "galerie" qui est associé
> au type "article"
> - création d'un gabarit spécifique aux galeries
> - création d'une fonction pour naviguer entre les différentes pages
> de la galerie sur le modèle de la navigation entre les différents
> chapitres d'un article
> - quelques petites adaptations du code qui génère la galerie wiki
> - un peu de mise en forme CSS
On va commencer par crier Wahouuu ! ;o) Très très joli et en plus ca
a l'air simple comme apllication.
Plusieurs questions pour etre sur de bien avoir tout compris.
- ton nouveau type de ressource "gallerie" est une extension du type
article ?
- quel est exactement le gabarit dont tu parles, en fait d'une manière
générale, qu'est ce qu'un gabarit sous Plume (j'ai un peu de mal avec
la syntaxe de manière générale)
- pourquoi as-tu eu besoin d'une fonction pour naviguer entre les pages
de ta galerie ? Si j'ai bien suivi, vu que ca étend "article" la
navigation entre pages d'un article existe déjà...
- la syntaxe wiki, je suppose que c'est rapport au positionnement des
images ?
Bref ca me ferait vraiment très plaisir si tu pouvais créer une
archive avec les fichiers que tu as modifié, pour que je vois comment
tu as fait ca.
Et maintenant quelques questions pour Loic:
- est-ce que ce genre de manip pourrait se trranformer en un plugin
(cad au lieu de retoucher les fichiers à la main, avoir une sorte
d'automatisation ?) Encore une fois, je ne sais pas vraiment comment ca
marche, donc peut-etre que je mélange des concepts.
- quelles sont les pistes de documentation pour comprendre les
ressources afin d'etre capable de créer un nouveau type ?
Merci
Loic d'Anterroches
Luigi wrote:
> Melody Nelson wrote:
>> pour arriver à ce résultat, voici dans les grandes lignes comment
>> j'ai procédé :
>> - création d'un nouveau type de ressource "galerie" qui est associé
>> au type "article"
>> - création d'un gabarit spécifique aux galeries
>> - création d'une fonction pour naviguer entre les différentes pages
>> de la galerie sur le modèle de la navigation entre les différents
>> chapitres d'un article
>> - quelques petites adaptations du code qui génère la galerie wiki
>> - un peu de mise en forme CSS
>
> On va commencer par crier Wahouuu ! ;o) Très très joli et en plus ca
> a l'air simple comme apllication.
> Plusieurs questions pour etre sur de bien avoir tout compris.
[...]
> Et maintenant quelques questions pour Loic:
> - est-ce que ce genre de manip pourrait se trranformer en un plugin
> (cad au lieu de retoucher les fichiers à la main, avoir une sorte
> d'automatisation ?) Encore une fois, je ne sais pas vraiment comment ca
> marche, donc peut-etre que je mélange des concepts.
Cela serait plutôt un nouveau jeu de gabarits/theme pour site. Si Melody
est ok, on pourrait faire un petit tutoriel à partir de son travail.
> - quelles sont les pistes de documentation pour comprendre les
> ressources afin d'etre capable de créer un nouveau type ?
Tu crées un fichier "resource_nouveau.php" que tu mets dans ton
repertoire des gabarits de ton theme. Tu vas sur l'onglet "sites" et tu
cliques sur le lien pour gérer les types de ressources. Tu ajoutes un
type d'article ou de brève avec le gabarit "nouveau.php".
a+
loïc
Melody Nelson
contente d'apprendre qu'un plug-in de "vraie" galerie devrait voir le
jour, ça sera un énorme plus pour Plume !
je vais essayer maintenant de répondre aux différentes questions...
la syntaxe wiki que j'évoque figure sur l'aide "règles du formatage
wiki" quand on se trouve sur le formulaire de modification d'un article
(et également sur l'onglet "Aide" dans le manager), c'est la commande
:
$ ((liens vers l'image|texte alternatif|gal:200x200|description de
l'image))
j'ai créé une fonction pour naviguer dans les pages de la galerie
uniquement pour avoir une présentation spécifique aux galeries et ne
pas modifier l'affichage des chapitres pour un article "classique"...
dans un article classique, la liste des chapitres s'affiche sous forme
de liste numérotée (<ol>)... pour une galerie, ma fonction va
générer un <ul class="gallery">
Loïc :
merci pour les compliments... ça fait plaisir, mais ça n'aurait pas
pu voir le jour sans Plume !
l'idée du tuto, je suis complètement d'accord mais ça serait bien je
pense que je vois si je peux encore améliorer certaines choses (faire
d'autres tests notamment avec des images de taille variable et
peaufiner la CSS)... le must serait d'apporter quelques petits + à
Plume pour rendre la personnalisation des galeries encore plus simple
(l'utilisateur n'aurait qu'à créer le gabarit et retoucher à la CSS
s'il veut apporter des modifications)
la fonction pour les "chapitres" de la galerie (dans
manager/inc/lib.frontend.php) :
function pxGalleryListPages($s = '%s', $return=false)
{
$result = '';
if ($GLOBALS['_PX_render']['art']->pages->nbRow() > 1) {
$index = $GLOBALS['_PX_render']['art']->pages->getIndex();
$GLOBALS['_PX_render']['art']->pages->moveStart();
$lp = '<ul class="gallery"><li>Photos : </li>'."\n";
while (!$GLOBALS['_PX_render']['art']->pages->EOF()) {
$active = ($index ==
$GLOBALS['_PX_render']['art']->pages->getIndex()) ? ' class="current"'
: '';
$page =
($GLOBALS['_PX_render']['art']->pages->f('page_number') == 1) ? '' :
$GLOBALS['_PX_render']['art']->pages->f('page_number');
$lp .= '<li'.$active.'><a
href="'.$GLOBALS['_PX_render']['art']->getPath().$page.'">'.$GLOBALS['_PX_render']['art']->pages->f('page_title').'</a></li>'."\n";
$GLOBALS['_PX_render']['art']->pages->moveNext();
}
$lp .= '</ul>'."\n";
$GLOBALS['_PX_render']['art']->pages->move($index);
$result = sprintf($s, $lp);
}
if ($return) return $result;
echo $result;
}
pour l'affichage de la galerie (inc/wikirenderer_xhtml.conf.php), j'ai
fait quelques modifs mineures
1) il manquait le texte alternatif sur l'image (note : ça n'apporte
rien en tant que tel à la galerie) et j'ai enlevé la légende pour la
mettre ailleurs
code original :
// gallery layout
if ($ok) {
return '<div class="gallery-img"><a href="'.$attribs['src']
.'" title="'.$attribs['alt'].'"><img
class="gallery-thumb" '
.'src="'.$thumburl.'" alt="" '.$thumbsize[3]
.' /></a><p
class="gallery-legend">'.$attribs['longdesc']
.'</p></div>'."\n";
}
nouveau code :
// gallery layout
if ($ok) {
return '<div class="gallery-img"><a href="'.$attribs['src']
.'" title="'.$attribs['alt'].'"><img
class="gallery-thumb" '
.'src="'.$thumburl.'" alt="'.$attribs['alt'].'"
'.$thumbsize[3]
.' /></a></div>'."\n";
}
2) pour faciliter la mise en forme de la galerie, voici le code que
j'ai retouché
code original :
class xhtml_gallery extends WikiRendererBloc
{
var $type = 'gallery';
var $regexp = '/^\$(.*)/';
var $_openTag = "<div class=\"gallery\">\n<div
class=\"gallery-top\">\n \n</div>";
var $_closeTag = "<div
class=\"gallery-bottom\">\n \n</div></div>";
nouveau code (il n'est pas finalisé) :
class xhtml_gallery extends WikiRendererBloc
{
var $type = 'gallery';
var $regexp = '/^\$(.*)/';
var $_openTag = "<div class=\"gallery\">\n<div
class=\"gallery-top\">\nmon titre\n</div>";
var $_closeTag = "<div class=\"gallery-bottom\">\n<p
class=\"gallery-legend\">ma description</p>\n</div></div>";
en fait, ce serait bien d'avoir un paramètre en plus dans la syntaxe
wiki qui permettrait de donner un titre à l'image (en plus du texte
alternatif et de la description)... et dans le code que je propose ici,
remplacer "mon titre" par le titre de l'image et "ma description" par
la description de l'image... ça serait possible ?
au niveau de la mise en forme, il faut ajouter 2 images qui vont
permettre de générer l'ombre (voir :
http://www.alistapart.com/articles/cssdropshadows/) et compléter la
CSS :
/* LISTE DES PAGES D'UNE GALERIE */
ul.gallery {
display: inline;
list-style-type: none;
}
ul.gallery li {
display: inline;
list-style-type: none;
padding-right: 1em;
}
ul.gallery li.current a {
font-weight: bold;
color: #9ac41e;
}
/* MISE EN FORME GALERIE SYNTAXE WIKI */
.gallery {
float: left;
padding: 0.2em;
margin: 0.2em;
}
.gallery-img {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.gallery-img img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
/* AFFICHE UNIQUEMENT LES IMAGES - DESACTIVER CETTE PARTIE POUR
AFFICHER LE TITRE ET LA LEGENDE DES PHOTOS */
.gallery-top {display: none;}
.gallery-bottom {display: none;}
/* AFFICHE LE TITRE ET LA LEGENDE DES PHOTOS - ACTIVER CETTE PARTIE
POUR AFFICHER CES INFORMATIONS
.gallery-top {
width: 200px;
text-align: center;
font-size: 0.70em;
font-weight: bold;
}
.gallery-bottom {
width: 200px;
}
.gallery-legend {
font-size: 0.70em;
font-weight: normal;
padding: 4px;
}
*/
voilà donc comment j'ai fait cette mini galerie dans Plume... je vais
l'améliorer et m'assurer qu'elle passe bien sur tous les navigateurs
(pour l'instant les tests sont positifs sur mac et windows avec IE,
Firefox et Safari)
Luigi
> Tu crées un fichier "resource_nouveau.php" que tu mets dans ton
> repertoire des gabarits de ton theme. Tu vas sur l'onglet "sites" et tu
> cliques sur le lien pour gérer les types de ressources. Tu ajoutes un
> type d'article ou de brève avec le gabarit "nouveau.php".
Ok, j'ai sans doute pas été assez clair dans ce que j'envisageais.
Concretement je croyais que Melody avait créé un type différent
(back end et pas front) pour gérer les galleries. Ce qui n'est pas
vraiment le cas (c'est pas un reproche, le résultat est magnifique,
c'est juste moi qui n'avait pas compris). Là elle a juste modifié la
"sortie" pour que le résultat soit graphiquement chouette.
Ce que je cherche à faire, c'est prendre la classe news, et lui créer
un sous type (qui bénéficie des même fonctions) mais avec quelques
petits ajouts. En particulier, il faudrait que la page de création
soit différente (pour le moment, j'ai pas encore trop réfléchi au
front mais ca devrait être assez simple) avec des champs
supplémentaires / différents. Or là on ne touche pas au fichier
resource_machin (enfin pas encore) mais plutôt à class_machin. C'est
correct ce que je dis jusque là ? Est-ce que Plume permet ce genre de
choses ?
cilia
Melody Nelson a écrit :
>
>[snip: manipulations pour arriver à la jolie galerie]
je me disais, comme ça, que ça pourrait être une bonne chose d'avoir ta
contribution sur le wiki à propos de ta personnalisation de la galerie.
Si tu as un peu de temps à y consacrer :)
cilia
Loic d'Anterroches
Pas pour le moment, mais la structure du système permettrait de faire
cela. En fait c'était prévu à la base, puis bon, j'ai eu/pris le temps.
a+
loïc
Loic d'Anterroches
En rupture totale de l'étiquette je réponds directement "au dessus".
Tu as fait beaucoup de modifications, elles sont mineures, mais beaucoup
quand même pour inclure directement ce code.
Pour éviter de faire écraser ta fonction pxGalleryListPages à chaque
upgrade. Tu crées un répertoire manager/tools/melody/ et dedans tu mets
un fichier "register.php" qui contient juste ta fonction. Elle sera
dispo ensuite dans tes gabarits.
Je regarderai avec toi après la 1.2 pour faire évoluer le wiki et le
reste pour faire plus facilement tout ce que tu as fait.
Encore merci !
loïc
Melody Nelson
grosses journées pour moi en ce moment, j'ai pas eu le temps de
remettre le nez dans Plume... et j'ai du boulot qui m'attend en
quantité industrielle... du coup, pas eu le temps de continuer les
tests sur la galerie...
merci pour l'info sur le fichier pour sauvegarder mes fonctions, ça
peut servir... jusqu'à présent les mises à jour se passent bien car
je tiens à jour un fichier où je note tout ce que je fais (j'ai
changé d'autres trucs dans les fonctions standard, j'ai donc plutôt
intérêt à les noter)
quand tu parles du wiki, tu parles de la doc ou de la syntaxe ? c'est
pour savoir si une fois la mini galerie validée, je fais un ajout ou
pas dans la doc wiki comme l'a suggéré cilia
Loic d'Anterroches
> grosses journées pour moi en ce moment, j'ai pas eu le temps de
> remettre le nez dans Plume... et j'ai du boulot qui m'attend en
> quantité industrielle... du coup, pas eu le temps de continuer les
> tests sur la galerie...
Jours avec, jours sans...
> merci pour l'info sur le fichier pour sauvegarder mes fonctions, ça
> peut servir... jusqu'à présent les mises à jour se passent bien car
> je tiens à jour un fichier où je note tout ce que je fais (j'ai
> changé d'autres trucs dans les fonctions standard, j'ai donc plutôt
> intérêt à les noter)
>
> quand tu parles du wiki, tu parles de la doc ou de la syntaxe ? c'est
> pour savoir si une fois la mini galerie validée, je fais un ajout ou
> pas dans la doc wiki comme l'a suggéré cilia
Je vais voir pour permettre la modification de la syntaxe wiki via un
plugins. Mais cela sera après la 1.2. Comme cela tes petites
modifications pourront toutes être mises dans un plugin. Cela
simplifiera ta vie.
a+
loïc