Vignette+TimThumb=PortFolio
JulienCognito
Member
dans Modifications
Suite aux additions que RockyHorror a apporté à son plugin [topic=3626]Vignette[/topic], je l'ai utilisé pour créer un portfolio sous notre Pluxml.
Basé sur Pluxml 5.2 & son thème par défaut, ce premier tuto va nous amener à créer une catégorie dont nous allons personnaliser l'affichage afin de rajouter un portfolio à côté du blog & des pages statiques.
C'est un exercice sans prétention qui me permet aujourd'hui d'espérer rendre à la communauté ce qu'elle m'a jusque là apporté.
On y va:
1: Les Ressources
Il va nous falloir d'abord installer le plugin Vignette de RockyHorror, essentiel. Explications là & téléchargement ici.
L'activer ensuite dans les paramètres de pluxml. On choisiras alors de désactiver l'intégration automatique dans sa configuration.
Ensuite, il s'agit de rajouter le script TimThumb à notre thème. Explications là & téléchargement ici
On choisiras de copier le fichier timthumb.php dans un dossier "script" que l'on aura crée à la racine de notre thème du type votrepluxml/theme/defaut/script/timthumb.php).
2: Le Contenu
Tout d'abord on crée une catégorie que l'on nommera Portfolio et dont l'identifiant sera 2. Vous pouvez bien sûr la nommer autrement et changer l'identifiant, mais attention, en fin de tuto, je me sert de cet ID de catégorie. On reviendra plus tard paramétrer cette catégorie.
Ne nous reste plus qu'à créé quelques articles dont la catégorie sera portfolio et qui contiendront nécessairement une vignette choisie en bas à droite de la zone de rédaction.
3: La Personnalisation du thème
3.a) la catégorie
Je rappelle que tout ce tutoriel se base sur la version pluxml 5.2 et surtout son thème par défaut. Je pars donc ici d'un thème vierge de toutes modifs préalables.
Depuis un moment, Pluxml nous permet de choisir son gabarit (template) pour chaque catégorie, page statique, ou article (source). Nous allons donc maintenant creer un template categorie-porfolio. Avec notre éditeur préféré, nous allons créer un fichier categorie-portfolio.php inspiré du categorie.php. Son contenu commenté:
On peut donc dés maintenant aller paramétrer les option de la catégorie portfolio:
Nb/Art/Page: 20 (ou plus, ou moins, mais 5 ça fait léger)
Menu: masquer
Option: Afficher ces articles sur la page d'accueil:Non
Option: template: categorie-portfolio
Vous pouvez dés à présent vérifier l'affichage en vous rendant sur votrepluxml/index.php?categorie2/portfolio. La mise en page vient bientôt.
3.b) les articles
C'est maintenant le fichier article.php que nous allons personaliser. Pas beaucoup de travail ici puisque nous allons simplement rajouter
entre notre titre & notre contenu au fichier article.php (ou article-full-width si vous voulez vous passer de la sidebar) pour creer un article-portfolio.php. Il faudra alors attribuer ce template article-portfolio.php à chacun des article que l'on aura créer pour cet exercice.
Je vous laisse d'ailleurs décoder le code pour le personaliser plus tard.
3.c) le css
Juste quelques class à rajouter au fichier style.css
3.d) Le lien Portfolio
Petite modif de la barre de navigation dans le header.php d'après Stéphane (légerement modifié pour afficher une catégorie active cachée)
Voilà. Si vous êtes bien parti d'un thème vierge, on n'aura rien cassé, et ça devrait rouler.
A suivre: aller plus loin dans l'affichage de l'article (galerie...) et de la catégorie (filtrage par tag...).
A suivre encore: création d'un thème complet autour de cet idée.
Mais d'abord: vos retours
Basé sur Pluxml 5.2 & son thème par défaut, ce premier tuto va nous amener à créer une catégorie dont nous allons personnaliser l'affichage afin de rajouter un portfolio à côté du blog & des pages statiques.
C'est un exercice sans prétention qui me permet aujourd'hui d'espérer rendre à la communauté ce qu'elle m'a jusque là apporté.
On y va:
1: Les Ressources
Il va nous falloir d'abord installer le plugin Vignette de RockyHorror, essentiel. Explications là & téléchargement ici.
L'activer ensuite dans les paramètres de pluxml. On choisiras alors de désactiver l'intégration automatique dans sa configuration.
Ensuite, il s'agit de rajouter le script TimThumb à notre thème. Explications là & téléchargement ici
On choisiras de copier le fichier timthumb.php dans un dossier "script" que l'on aura crée à la racine de notre thème du type votrepluxml/theme/defaut/script/timthumb.php).
2: Le Contenu
Tout d'abord on crée une catégorie que l'on nommera Portfolio et dont l'identifiant sera 2. Vous pouvez bien sûr la nommer autrement et changer l'identifiant, mais attention, en fin de tuto, je me sert de cet ID de catégorie. On reviendra plus tard paramétrer cette catégorie.
Ne nous reste plus qu'à créé quelques articles dont la catégorie sera portfolio et qui contiendront nécessairement une vignette choisie en bas à droite de la zone de rédaction.
3: La Personnalisation du thème
3.a) la catégorie
Je rappelle que tout ce tutoriel se base sur la version pluxml 5.2 et surtout son thème par défaut. Je pars donc ici d'un thème vierge de toutes modifs préalables.
Depuis un moment, Pluxml nous permet de choisir son gabarit (template) pour chaque catégorie, page statique, ou article (source). Nous allons donc maintenant creer un template categorie-porfolio. Avec notre éditeur préféré, nous allons créer un fichier categorie-portfolio.php inspiré du categorie.php. Son contenu commenté:
[== PHP ==]
<?php include(dirname(__FILE__).'/header.php'); ?>
<section>
<div class="content">
<!-- changement de class en full-width -->
<div class="full-width">
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
<!-- appel de la vignette et du titre de l'article avec ajout de nouvelles class -->
<!-- + suppression de pas mal de choses (auteur, date, tags, etc) -->
<article role="article" id="post-<?php echo $plxShow->artId(); ?>" class="vignette-container">
<section>
<a href="<?php $plxShow->artUrl() ?>">
<div class="vignette-img">
<img src="<?php $plxShow->template(); ?>/script/timthumb.php?src=<?php eval($plxShow->callHook('showVignette','true')); ?>&h=160&w=250" alt="<?php $plxShow->artTitle(); ?>" />
</div>
<div class="vignette-title">
<?php $plxShow->artTitle(); ?>
</div>
</a>
</section>
</article>
<?php endwhile; ?>
<div style="clear:both;"></div>
<div id="pagination">
<?php $plxShow->pagination(); ?>
</div>
</div>
</div>
</section>
<?php include(dirname(__FILE__).'/footer.php'); ?>
On peut donc dés maintenant aller paramétrer les option de la catégorie portfolio:
Nb/Art/Page: 20 (ou plus, ou moins, mais 5 ça fait léger)
Menu: masquer
Option: Afficher ces articles sur la page d'accueil:Non
Option: template: categorie-portfolio
Vous pouvez dés à présent vérifier l'affichage en vous rendant sur votrepluxml/index.php?categorie2/portfolio. La mise en page vient bientôt.
3.b) les articles
C'est maintenant le fichier article.php que nous allons personaliser. Pas beaucoup de travail ici puisque nous allons simplement rajouter
[== PHP ==]
<div class="big-vignette-img">
<a href="<?php eval($plxShow->callHook('showVignette','true')); ?>">
<img src="<?php $plxShow->template(); ?>/script/timthumb.php?src=<?php eval($plxShow->callHook('showVignette','true')); ?>&w=320" alt="<?php $plxShow->artTitle(); ?>" />
</a>
</div>
entre notre titre & notre contenu au fichier article.php (ou article-full-width si vous voulez vous passer de la sidebar) pour creer un article-portfolio.php. Il faudra alors attribuer ce template article-portfolio.php à chacun des article que l'on aura créer pour cet exercice.
Je vous laisse d'ailleurs décoder le code pour le personaliser plus tard.
3.c) le css
Juste quelques class à rajouter au fichier style.css
[== CSS ==]
/* ---------- PORTFOLIO ---------- */
.vignette-container {width: 24%;float: left; height:auto; display:inline; margin: 2px 4px 10px 4px; padding: 2px; border: 1px solid #ccc;}
.vignette-img img {margin: 0; width: 100%;}
.vignette-title {text-align: center; font-size: 80%;}
.big-vignette-img {float: left; margin: 15px 5px 5px 0;}
/* ---------- RESPONSIVE PORTFOLIO ---------- */
@media (min-width:400px) and (max-width:799px) {
.vignette-container {width: 31%;}}
@media (max-width:399px) {
.vignette-container {width: 98%;}}
3.d) Le lien Portfolio
Petite modif de la barre de navigation dans le header.php d'après Stéphane (légerement modifié pour afficher une catégorie active cachée)
[== PHP ==]
<ul>
<li><a href="<?php $plxShow->racine() ?>">Accueil</a></li>
<?php
$idCat = '002';
if(isset($plxMotor->aCats[$idCat])) {
if($plxMotor->aCats[$idCat]['active']) {
$id = 'cat-'.intval($idCat);
$url = $plxMotor->urlRewrite('?categorie'.intval($idCat).'/'.$plxMotor->aCats[$idCat]['url']);
$name = plxUtils::strCheck($plxMotor->aCats[$idCat]['name']);
$active = ($plxShow->catId()==intval($idCat)?'active':'noactive');
echo '<li id="'.$id.'"><a class="'.$active.'" title="'.$name.'" href="'.$url.'">'.$name.'</a></li>';
}
}
?>
<?php $plxShow->staticList($plxShow->getLang(''),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
</ul>
Voilà. Si vous êtes bien parti d'un thème vierge, on n'aura rien cassé, et ça devrait rouler.
A suivre: aller plus loin dans l'affichage de l'article (galerie...) et de la catégorie (filtrage par tag...).
A suivre encore: création d'un thème complet autour de cet idée.
Mais d'abord: vos retours
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Par contre, crois-tu qu'il est vraiment nécessaire d'utiliser TimThumb ? Ne peut-on pas à la place, utiliser les chapo des articles (qui ne contiendraient alors qu'une image) ?
Timthumb permet de créer des vignettes à la volée de manière intelligente (changement w & h sans déformation) et automatique avec son appel dans le fichier du thème. Pratique pour une mise en page cohérente sans contraintes pour les images uploadées.
L'utilisation du chapeau permet en effet de se passer du plug-in vignette en y mettant simplement l'url de l'image. mais l'insertion de l'image passe souvent via un éditeur wysiwyg ce qui nécessite une verif à chaque fois.
Qd penses tu?
Tu penses donc que timthumb ralentirait sérieusement le rapide pluxml?
Des recherches g**gle me renvoient bien certaines choses, notamment sur le plugin wordpress & une faille de sécu mais rien de très précis.
Je ne saurais pas faire de tests fiables pour évaluer la charge de ce script; il met bien en cache les vignettes générées, mais effectivement, on passe systématiquement par lui. (en local, cache navigateur vidé, pas de franche différence entre avec timthumb & sans: 0.028s vs 0.027s affichée par plux).
Dans l'optique de ne pas contraindre l'utilisateur qd à son format original (d’expérience, les utilisateurs pour qui je fais ces petits trucs, mêmes quand ils sont plasticiens (!!!) ou architectes, se perdent dans les contraintes de proportions), l'autre solution pourrait être imgliquid, mais un script jquery, du coup, c'est plus contraignant... qd à la charge...?
Merci de me chatouiller Tes réserves sur l'inutile m'intéressent puisque je voulais faire un truc le plus 1)universel 2)propre 3)simple 4)light possible.
Pour timtumb, je vais essayer de m'en passer; grace à la mofication de la classe makethumb que j'ai proposé l'an passé : et qui me permet de faire des vignettes avec contraintes de hauteur et largeur sans utiliser timthumb, et tout en utilisant l'arborescance de pluxml ( ref :http://forum.pluxml.org/viewtopic.php?id=4085 ) Ayant utilisé Timthumb par le passé en production ; il m'a causé en effet quelques soucis : sécurités , lourdeur d'execution, liens images avec variables mauvais pour le referencement , un grand dossier de cache avec des droits d'access ne facilitant pas les backup en local , beaucoups de nouveaux calculs pour la redimension quand le cache expire... Mais son utilisation est super confortable.
Non, je n'avais pas laisser tombé le projet. Je bosse actuellement sur un fork du thème par défaut orienté portfolio histoire d'aller plus loin que la proposition initiale.
J'ai bien noté les réserves de Jerry & le retour d’expérience de Deevad concernant TimThumb; et je vous l'accorde, on peut bien demander à l'utilisateur de retailler son image "vignette" en local.
Par ailleurs, dans le cadre de la création d'une page statique qui listerait tous les articles de la catégorie "portfolio" (j’essaie de créer un thème ou l'utilisateur n'aurait pas besoin de passer par l'édition des pages du thème), j'utilise la fonction lastartlist dans un gabarit static-portfolio.php. Est-ce-que vous voyez une possibilité d'intégrer le "static-content" dans l'appel lastartlist : ça permettrait à l'utilisateur de renseigner simplement l'id de la catégorie dans le contenu, et hop. Parce que bien sûr, ne fonctionne pas.
Merci de vos idées,
Erreur 500
Je me documente sur ob_start et m'y met. C'est un principe de tempo pour échelonner les requêtes php s'y j'ai bien compris vite fait.
Mais pas ce soir parce-que... concert!
Pour info, mon code dans static-portfolio.php pour de vrai (fonctionnel): où 20 est le nombre d'article à afficher & 1 l'id de la catégorie
Merci de ton interet
J
Tu peux placer le content où tu veux...
Ton code marche parfaitement et me permet de rajouter le contenu staticContent() dans chaque article... mais mais mais, je souhaite l'utiliser pour les paramètres de lastArtList(), soit les chiffre après la virgule. J'utilise donc (après plusieurs essais de syntaxe 8o) : Le contenu de ma page statique est 20,1. J'ai vérifié: pas de <p> ou autre générés. Et bien le contenu staticContent() doit être modifié puisque seul le premier paramètre (nombre d'article) est appliqué, comme si j'avais écrit ...</article>,',20)
Qu'est ce qui se passe donc??? Sachant que si j'utilise ton code ($content dans le $format de lastArtlist), la virgule est bien présente .
C'est fou, non?
Je vais hard-coder le nombre d'articles à afficher sur la statique-portfolio , et appeler $content pour l'id de la catégorie.
J'ai du boulot encore sur le reste du thème.
A très bientôt, donc!
Merci encore, Jerry
Ça semblait bien en théorie mais ces mêmes habitués ont aussi vécu à maintes reprises la situation de la guillotine indésirée lorsqu'on tente de faire entrer la magnifique photo bien verticale de tante Gertrude dans une zone carrée, ou pire, horizontale. Par défaut, Timthumb se plante les pieds en plein centre avant de commencer à calculer les proportions et laisser tomber la tronçonneuse. Petite tranche (non mais...) de vie, jusqu'à ce que ce forum me fasse part de l'existence de la petite merveille qu'est Timthumb, mes espoirs s'arrêtaient là, mon script de rognage n'avait aucun paramètre de réglage à part la taille. Ses formules mathématiques effrayantes ne m'ont jamais offert le moindre indice sur la façon de conserver la tête de tante Gertrude.
Mais voilà, on entend les habitués de Timthumb dire "suffit le mélodrame", c'est très facile de "diriger" le script avec le paramètre "&a=t" pour le forcer à se relocaliser tout en haut avant de calculer les tailles de coupe. Mais voilà, très bien pour tante Gertrude, bravo, mais qu'en est-il d'oncle Jean bien allongé avec son charmant sourire tout à droite? Le template dicte à Timthumb de tailler le base de l'image pour sauver une tête, tant bien fasse à tante Gertrude, mais on voit l'horloge grand-père comme photo d'oncle Jean.
Le voilà le problème, le paramètre de "svp vous déplacer vers là avant de couper" est rattaché au template, les images dynamiques inconnues au moment d'écrire le gabarit n'offrent aucun indice, les photographes abondent, ils ont des préférences de cadrage, ils sont un peu artistes, bon, on veut pas les froisser en leur disant de viser bien au centre (ou au moins toujours pareil) avant de tirer la gachette.
Les novices salivent, les experts ont peut-être flairé la solution, peu importe, suffit le mélodrame. Le truc est "d'accrocher" l'instruction de "recadrage-avant-coupe" à l'image. Au moment de la charger dans la banque média (en fait, juste avant), on peut regarder l'image, se gratter un peu les méninges, trouver le point d'intérêt, espérant qu'il n'y en ait qu'un et modifier le nom du fichier d'image en lui incluant un petit paramètre.
Faites vos choix, tout fonctionne quand un standard est suivi. Pour ma part, je veux toujours simplifier la vie de mes clients futurs rédacteurs d'articles et ne pas leur faire mémoriser des paramètres complexes. Je leur demande d'imaginer qu'ils tranchent leur image en 9 cases, numérotées de 1 (en haut à gauche) à 9 (en bas à droite). Mon standard de nommage est rudimentaire, inclure à la fin du nom de fichier d'image "focus" et immédiatement le numéro de la case la plus importante. Tante Gertrude ayant la tête dans la case 2, le fichier s'est vu renommé "tanteGertrudeAlaPlage_focus2.jpg". Oncle Jean bien à droite s'est vu attribuer un beau "oncleJeanSurLeDivan_focus6.jpg"
Dernière étape, promis, est de "cueillir" ce précieux paramètre chèrement gagné, parce que Timthumb se foue éperdument de nos manigances. On n'a pas le choix, il faut retrousser nos manches et ouvrir le fichier timthumb.php et nager au-delà des bouées de baignade, dans le coin des lignes 530 et plus. Dieu merci, la variable à agripper (le nom du fichier) est assez simple à trouver ($localImage), le paramètre de l'alignement se nomme $align. Vous vous rappelez ma méthode de nommage, bien en poupe du nom de fichier blablabla_focusX.jpg . J'insère, après avoir bien inscrit des commentaires très clairs (tousser ici)
Vous avez tout, ma vie, mes désespoirs, votre aide, la lumière et la solution à un problème que vous ne saviez même pas...
Par contre, son fichier central est autonome et ne fait que son travail: recevoir l'adresse d'une image et quelques paramètres, traiter le tout et renvoyer un nouveau fichier de type "header('Content-Type: image/jpeg');" qui peut alors être intégré dans n'importe quelle page, Wordpress, Drupal, l'intrépide Pluxml ou autre.
Je n'ai pas le bénéfice de ton expérience, Jerry, de quel bug as-tu été la victime? J'ai maintenant passé des centaines d'images dans le script "vanille" en essayant un à un tous ses paramètres, sans jamais l'ombre d'un bug. Bien sûr je me suis couvert de ridicule quelques fois en réglant des paramètres avec des valeurs absurdes, provoquant des résultats visuellement désastreux, mais le pauvre Tim ne faisait qu'exécuter mes ordres sans broncher.
Sous Wordpress, on semble unanime pour déclarer BFIthumb comme son remplacement "de facto". Je remarque toutefois que son fonctionnement utilise le contenu de l'article comme source et "accroche" la première image insérée dans le texte. J'utilisais autrefois cette méthode avant la découverte de la petite merveille qu'est Pluxml et de son tout aussi merveilleux plugin Vignette. L'extraction plein texte fait le travail mais la première image d'un article n'est pas toujours celle que l'on aurait choisie. Par contre, pourquoi ne pas offrir les deux options.
Je pense jeter mon dévolu sur le dossier dans les jours qui suivent, une nouvelle installation sous PluXml me guette, aussi bien y installer des outils sécuritaires. N'attendez pas de moi un plugin, ceux qui me connaissent savent que c'est une grimace que ce vieux singe grincheux ne veut pas apprendre. Par contre, je compte bien offrir le script une fois tout bien testé.
Par contre, une recherche un peu plus poussée m'amène à la classe PHP
https://github.com/mosbth/cimage
qui promet mer et monde, on verra bien. Surtout que mon petit hack de rognage "dirigé" (mon machin focus2, focus6) auquel je devais dire adieu avec BFI est subitement de retour avec Cimage, pfiou...
Rien n'est fait encore mais j'ai une grande confiance que les jours de Timthumb sont comptés sur toutes mes installations.
ainsi pour un simple rognage, une ligne qui disait
<img src="timthumb.php?src=<?php eval($plxShow->callHook('showVignette','true')); ?>&w=1679&h=666">
se lira maintenant
<img src="imgp.php?src=<?php eval($plxShow->callHook('showVignette','true')); ?>&w=1679&h=666&crop-to-fit">
une simplicité qui se prend bien...
Je m'encombre encore de beaucoup de fichiers en attendant de bien comprendre ce que je peux enlever. Le fichier central s'appelle img.php et est optionnellement affublé d'un fichier img_config.php mais je suggère d'utiliser plutôt les packages qu'ils appellent "all-included", ils prennent les noms imgd.php, imgp.php (comme dans mon exemple), etc. Les "d" et "p" font référence à développement et production. Ces fichiers sont censés contenir tout ce qu'il faut pour faire rouler les fonctions.
Alors, plus d'excuses pour utiliser Timthumb avec ses dangers d'intrusion, Cname peut faire tout ce que faisait Tim, et cent nouvelles choses en plus.
N'ayant pas de routine d'installation, on finit par oublier que ce répertoire "cache" est nécessaire et qu'il faut tout bonnement le créer à la main, lui aussi au niveau racine de l'installation de Pluxml.