[plugin] vignette: ajout d'une image d'illustration à vos articles

rockyhorror

Bonjour à tous,

Voici un petit plugin, qui permet d'ajouter simplement, une image d'illustration à vos articles.

Un champs "vignette" s'ajoute dans la sidebar d'édition de vos articles. Vous pouvez selectionner un image qui s'affichera en en-tête de votre article.

L'intégration peut etre automatique, ou manuelle (option).

N'hésitez pas à me faire part de vos suggestions, remarques, améliorations.

Téléchargement ici

Jerry Wham

Bonne idée. Il me semble que danielsan en a fait un équivalent (champArt de mémoire).
Il serait bien de mettre un lien vers les medias pour pouvoir choisir l'image. Mais, je sais, c'est plus facile à écrire qu'à coder...

rockyhorror

Jerry Wham a écrit:

Bonne idée. Il me semble que danielsan en a fait un équivalent (champArt de mémoire).
Il serait bien de mettre un lien vers les medias pour pouvoir choisir l'image. Mais, je sais, c'est plus facile à écrire qu'à coder...

C'est prévu , faut que j'adapte le popup des médias.

danielsan

effectivement, champArt fait ça ...

rockyhorror

Hop,


Nouvelle version, avec l'ajout du popup de sélection des média quand on clique dans le champs.

Je suis ouvert à toute suggestion.


disponible ici

JulienCognito

Salut;

J'utilise beaucoup ce plugin (souvent au coté de artGalerie, d'ailleurs) mais je suis obligé de le customiser à la hache:
Modifier \$srcCode =... dans le fichier vignette.php pour convenir à mon design. Je me disais donc que l'intégration automatique que tu propose pourrait être une option plutôt que le principal. Un truc du genre <?php eval($plxShow->callHook('vignette')); ?> à placer directement dans le template ne serait il pas plus "personnalisable"?.
Ou mieux! Pouvoir écrire :

[== HTML ==]
<div class="vignette">
<img src="<?php $plxShow->template(); ?>/script/timthumb.php?src=<?php eval($plxShow->callHook('vignette')); ?>&h=200&w=200" alt="<?php $plxShow->artTitle(); ?>" />
</div>

Ca permettrait d'ailleurs d'autres manips, parce que là, par exemple, j’essaie d'utiliser la vignette comme galerie de portfolio, et je bloque puisque l'appel à la vignette dépend de l'affichage du chapo et/ou du contenu. Mon rien en php me défend de toucher au code suivant if(!empty(\$art)){... même si je me doute que c'est là qu'il faut gratter
Bon, sinon je me tournerai vers le plugin champArt, mais l'intégration du gestionnaire de média à Vignette est quand même sacrément pratique!

Merci

J/

rockyhorror

Hello,

Je vais regarder comment customiser le code d'affichage de la vignette.

JulienCognito

Merci RockyHorror;

Je pense que ça amènera un vrai plus à ton plugin. Son intégration à l'admin est déjà parfaite; une possibilité de customisation sur les thème devrait en faire un "must-have"

Pour ma part, j'ai triché pour une home & catégorie en vignette+titre sans contenu en cachant les <p> en css ainsi

[== CSS ==]
article > section p {display:none;}

.
Mais c'est pas très propre :8

rockyhorror

Bonsoir à tous,

Voici un nouvelle version.
Au menu:
- Le style des vignettes est déporté dans le fichier vignette.css (plus facile à changer, sans toucher au code du plugin)
- La prévisualisation des articles fonctionne avec la vignette
- Ajout d'un paramètre de configuration du plugin, permettant de désactiver l'intégration automatique dans les articles
- Ajout d'un Hook 'showVignette' pouvant etre appelé dans vos template, pour un affichage où vous le souhaitez.
- Le Hook 'showVignette' peut prendre un paramètre "true" permettant de n'afficher que le chemin de la vignette, pour une intégration dans des script, ou une customisation complète de l'affichage. (lisez l'aide)
- diverses corrections de code

Dispo ici

@JulienCognito: Dans ton cas, tu pourras désactiver l'intégration automatique dans la configuration du plugin et utiliser le code suivant:

[== HTML ==]
<div class="vignette">
<img src="<?php $plxShow->template(); ?>/script/timthumb.php?src=<?php eval($plxShow->callHook('showVignette', 'true')); ?>&h=200&w=200" alt="<?php $plxShow->artTitle(); ?>" />
</div>

JulienCognito

MMMh, RockyHorror!

Tout ce dont je rêvais [post=36299]ici plus haut[/post]!!!
Avec le travail que tu viens de faire, il ne me reste plus qu'à parfaire un thème "portfolio" pour la 5.3 basé sur ton plugin & à le partager ici!

Merci encore!

Julien

fab56

Bonjour,

Le plugin est bien sympa et s'approche de ce que je cherche à faire : afficher des images illustrant les articles listés en page d'accueil.

[== HTML ==]
<div class="entry">
 <section>
  <div class="vignette"><img src="<?php eval($plxShow->callHook('showVignette',true));?>" alt="<?php $plxShow->artTitle(); ?>" /></div>
 <?php $plxShow->artChapo(); ?>
 </section>
</div>

Seul problème, la méthode showVignette() s'occupant d'écrire directement le contenu du champ, je n'ai pas moyen de tester si il est vide ou non avant l'affichage.
Je me retrouve donc avec le contenu de l'attribut "alt" pour tout les articles sans vignette.

Une astuce ?

fab56

Bon en fait j'ai trouvé la solution tout seul
Il suffisait de lire le code du module.

[== PHP ==]
$vignette=$plxMotor->plxRecord_arts->f('vignette');
if(!empty($vignette))

JulienCognito

Comme promis, tentative de tuto concernant l'utilisation de "vignette" comme centre d'un portfolio [topic=4387]ici[/topic]

Merci encore!

Julien

rockyhorror

Bonjour,

Merci pour ces retours.
@JulienCognito: beau travail.

@fab26: si je comprend bien ton code, tu veux personnaliser le "alt" des vignettes. Je peux proposer d'ajouter un deuxième argument à la méthode showVignette, qui serait un "alt" personnalisé. Tu n'aurais plus besoin de chercher à savoir s'il y à une vignette, ce serait géré par le plugin. ça donnerais quelque chose comme ça:

[== PHP ==]
eval($plxShow->callHook('showVignette',array(false, "mon alt custom")));

et ça sortirais ça (uniquement si l'article à une vignette):

[== HTML ==]
<div id="vignette"><img src="/path/to/monimage.png" alt="mon alt custom" /></div>

Dite moi.

fab56

Non mon problème n'était pas de personnaliser le "alt" mais simplement de savoir si la vignette existe ou non.

Mais si ta méthode retourne le code html complet si (et seulement si) il y a une vignette, cela peut être une solution.

Je pense qu'il faudrait alors passer un nouveau paramètre à ta méthode permettant de personnaliser le code html généré.
Par exemple dans mon cas, je n'utilise pas un [em]"id"[/em] par un "class" pour l'attribut de mon div car il y a potentiellement plusieurs vignettes affichées dans mes pages (listes d'articles).

rockyhorror

En l'état, si tu appel la méthode showVignette sans paramètre, ça te retourne le code html complet uniquement s'il y à une vignette.

[== PHP ==]
eval($plxShow->callHook('showVignette'));

te retourne ça (uniquement s'il y à une vignette):

[== HTML ==]
<div id="vignette"><img src="/path/to/monimage.png" alt="vignette" /></div>

Par contre c'est avec un "id", et non un "class", je vais changer ça par défaut pour utiliser un "class" c'est plus logique.

Je vais voir pour ajouter un paramètre permettant de personnaliser le code.

rockyhorror

Bonjour,

Nouvelle version:
[list=*]
[*]Ajout d'un deuxième paramètre de format pour le hook 'showVignette'[/*]
[*]Utilisation d'une class "vignette" au lieu d'un Id[/*]
[*]Correction pour pluxml 5.3, le CSS du plugin s'edite directement dans l'administration des plugins[/*]
[/list]

Lisez l'aide.

Comme d'hab dispo ici

Deevad

Merci Rockyhorror pour se super plugin. Je l'utilise partout à présent. C'est simple d'utilisation, jolie et efficace. :cool:

NaBiSs

Un gros merci pour ton plugin, très pratique et personnalisable .

JulienCognito

Salut,

Il semble qu'il y ait un 'tit bug concernant la personnalisation du css dans la partie admin (vignette 0.5 & pluxml 5.3.1):

Les modifs effectuées à la classe vignette via l'admin sont bien prises en compte dans le fichier /plugins/site.css appelé par <?php $plxShow->pluginsCss() ?>
Mais le plugin rajoute juste avant </head> l'appel à /plugins/vignette/site.css hors dans celui-ci, les modifs ne sont pas prises en compte.
En supprimant cette dernière fonction dans vignette.php (lignes 89 à 97), le problème est réglé. Un restant d'une ancienne version, j'imagine.

Merci encore pour ce super plugin

Julien

rockyhorror

Merci pour le retour, je vais regarder ça.

Pierre

Bonjour,

Je cherche un moyen d'adresser le champ XML "vignette" comme les autres dans une liste d'articles qui n,est pas reliée à Home ou même une catégorie particulière, la mienne est installée dans le Sidebar. Ça fonctionne à moitié sur la page Home mais la liste change sans arrêt sur les autres pages.

Je rêve de pouvoir faire

$plxShow->lastArtList('<li ><a href="#art_url" title="#art_title"><img src="#vignette"></a></li>');

Vous voyez le genre. J'ai essayé avec plxMotor ça me donne les problèmes expliqués plus haut. C'est ma dernière étape avant que tout fonctionne, quelle frustration!

Merci à l'avance

Pierre

Pierre

Pour ceux qui voudront m'accompagner dans l'aventure, je vous donne le paragraphe complet désiré:

[== Indéfini ==]
<ul>
	<?php
	$i=1;
	while(($plxShow->plxMotor->plxRecord_arts->loop()) AND ($i<=3)):?>
		<li>
			<a href="<?php $plxShow->artUrl('link'); ?>">
				<img src="<?php eval($plxShow->callHook('showVignette','true'));  ?>" height="50px" alt="<?php $plxShow->artTitle();?>" />
			</a>
			<?php $plxShow->artTitle('link');?>
		</li>
		<?php 
		$i=$i+1;
	endwhile; ?>
</ul>

Je vous rappelle que la page d'accueil produit le résultat désiré mais pas les pages de catégorie ou d'article. Je n'abandonne pas de mon côté, merci pour la thérapie de groupe...

Sissone

@pierre, j'essaye exactement de faire la même chose, et je rêve aussi d'un #art_vignette à insérer dans lastartlist .
L'idée étant de faire un accueil avec des présentations différentes selon les catégories, et donc des vignettes de taille et d'alignement différent.

Pierre

Après voir bidouillé pendant des semaines pour contourner les restrictions de mode et tout le tralala, au bord de l'épuisement et sur le point de balancer Pluxml avec l'eau du bain et de revenir en arrière, j'y suis arrivé. Des semaines de cauchemars remplis de hooks et de plugins pour enfin me résigner et me rabattre sur le seul petit bout de l'univers Pluxml où j'y comprenais quoi que ce soit: les fonctions php propres à Pluxml... Après avoir été mis en garde (avec raison) par Stéphane de ne pas trop modifier les fichiers "core" et de voir tout ça balayé par une prochaine mise à jour, j'ai étudié les paramètres d'un champ assez similaires à ma bien-aimée vignette, l'opération n'a pas pris 10 minutes, ma victime se nomme "chapô".

Rappelons-nous que le rêve caressé était de pouvoir taper quelque chose comme:

[== PHP ==]
$plxShow->lastArtList('<li><a href="#art_url" title="#art_title"><img src="#art_vignette"></a></li>');

pour voir s'afficher une liste d'images pointant vers leur article respectif.

Alors, qui m'aime me suive... (roulement de tambours) à vos risques et périls..., il vous faudra retrousser vos manches et ajouter à un seul fichier trois petites lignes (QUOI! c'est tout!?) Eh... désolé, si ça vous choque, imaginez moi.

Sans plus tarder, vous visitez le répertoire "core/lib", vous ouvrez le fichier "class.plx.show.php" descendez à la fonction "public function lastArtList" (autour de la ligne 844), descendez quelques lignes et apercevez

[== PHP ==]
$chapo = plxUtils::truncate($art['chapo'],$strlength,$ending,true,true);
$row = str_replace('#art_chapo('.$strlength.')','#art_chapo', $row);
$row = str_replace('#art_chapo',$chapo,$row);

Vous copiez copieusement les trois lignes en question, les recollez juste en-dessous, et modifiez ce nouveau trio par

[== PHP ==]
$vignette = plxUtils::truncate($art['vignette'],$strlength,$ending,true,true);
$row = str_replace('#art_vignette('.$strlength.')','#art_vignette', $row);
$row = str_replace('#art_vignette',$vignette,$row);

Et voilà le travail. Je n'ai pas précisé le pointage du répertoire d'image puisqu'il peut être changé à votre guise mais avouez que nous y sommes, tout de même.

Alors, mission accomplie, bravo à Rockyhorror pour le plugin Vignette, désolé Stéphane les traces de pieds dans ton terrain de sable. Espérons que mes trois lignes diaboliques apparaîtront dans la prochaine mise à jour!

On parlera de mes pirouettes comme du bon vieux temps où tout était plus difficile...


Pierre
un disciple (désormais) convaincu

je-evrard

Je ne pense pas que ce bout de code rentre dans la prochaine release. Ce n'est pas à pluxml de s'adapter a la spécificité d'un plugin mais au plugin de répondre éventuellement à certaines exigences.

J'ai si tu le désires un code qui permet de récupérer la première image des derniers articles et de l'afficher. Simple et efficace.

A+

jéjé

Pierre

Merci pour l'offre mais j'ai déjà exécuté l'extraction à partir de la chaîne de caractères du "#art_content" des articles. Au moins, les manipulations génériques des variables PHP me sont très familières, ce sont vraiment les hooks et les plxMotormachins qui m'ont fait suer cette fois-ci. J'accepte avec plaisir leur simplicité d'opération, mon code est maintenant allégé d'une centaine de lignes qui ne faisaient qu'afficher mon découragement devant l'inconnu.

On verra bien ce qui fera partie ou non d'une éventuelle prochaine mouture de Pluxml, au pire j'ajouterai les même lignes si rien n'a été touché. À mon avis, le concept de vignette, exactement comme intégré par ce plugin, devrait faire partie intégrante du Pluxml de toutes façons. Avec quelques douzaines de blogs à mon actif, roulant sous 5 ou 6 CMS différents, tous sans exception intègrent un champ d'image "dédiée qui peut servir ailleurs dans un carrousel sur la une, un sidebar qui affiche une petite image à côté du titre d'article, etc.

Ma méthode est d'automatiser le tout, le client n'a plus qu'à taper son article avec un titre, un chapo et une vignette et tout s'affiche tout seul. Pour une première fois sans base de données, je me sens plus léger...

Continuez votre bon travail.

Jerry Wham

J'ai plus simple et sans modifier une ligne de core. Tu places une image dans le chapo par exemple avant de taper un texte quelconque et tu places cette fonction dans ton fichier header.php de ton thème. Le but est que l'image doit être précédée d'une balise <p> :

/**
 * Fonction permettant d'encadrer la première image d'un paragraphe par un bloc div afin de la mettre en avant et d'appliquer des règles
 * css particulières (un float par exemple)
 * @param $content string le contenu du paragraphe
 *
 * @author Cyril MAGUIRE
 */
function vignettage($content) {
    $plxMotor = plxMotor::getInstance();
    switch ($plxMotor->mode) {
        case 'home':
        case 'tags':
        case 'categorie':
        	$count = 0;
            $return = preg_replace('!<p>(<img(.*)?src="(.*)\.(jpg|jpeg|png|gif)" alt="(.*(?:^data-spxtynimce="true")?)" (width="([0-9]*)" height="([0-9]*)")?(.*)?\/>)!i', '<div class="vignette"><img src="$3.$4" alt="" /></div><div class="wrap-art"><p>', $content,-1,$count);
            if ($count>0) {
            	$return = str_replace('</article>', '</div><!--Fin wrap-art --></article>',$return);
            }
            break;
        case 'article':
        case 'preview':
        	$count = 0;
            $return = preg_replace('!<p>(<img(.*)?(src="(.*)\.(jpg|jpeg|png|gif)" alt="(.*)") (width="([0-9]*)" height="([0-9]*)")?(.*)?\/>)!i', '<div class="vignette"><img $3 /></div><div class="wrap-art"><p>', $content,-1,$count);
            if ($count>0) {
            	$return = str_replace('</article>', '</div><!--Fin wrap-art --></article>',$return);
            }
            break;
        
        default:
            # code...
            break;
    }
    if (isset($return)) {
    	return $return;
    } else {
    	return $content;
    }
    
}

Il faudra peut-être l'adapter un peu en fonction de ton thème mais l'idée est là.

Enjoy.

Pierre

Je laisserai les collègues décider de leur façon préférée pour régler le problème quand ils le rencontreront mais je trouve la solution de mes modestes 3 lignes pas mal plus simple. Surtout que ça respecte les standards sur la façon d'utiliser une variable de champ dans la chaîne de caractères de la fonction.

Mon désir de ne pas toucher au code "core" ne va pas jusqu'à l'intégrisme, je préfère l'éviter mais quand c'est si simple et si inoffensif pour les autres fonctions, mon choix est vite fait. Par contre, si je mettais en danger la bonne marche de Pluxml, j'opterais sans doute pour une solution à même les gabarits de pages, juste au cas.

Iron

Bonjour Pierre et merci pour ta méthode.

Par contre tu as précisé :

Je n'ai pas précisé le pointage du répertoire d'image puisqu'il peut être changé à votre guise mais avouez que nous y sommes, tout de même.

Tu peux me dire ce que je dois saisir exactement et où, en prenant en compte le répertoire par défaut (data/images) ?

Pierre

C'est le répertoire que j'utilise aussi alors tout respecte à la lettre les répertoires d'origine. Mon exemple réduisait le champ de vignette à sa plus simple expression pour raccourcir la ligne mais le chemin par défaut serait plutôt <img src="data/images/#art_vignette"> . Dans mes applications, je l'utilise avec un peu plus de complexité (souvent avec l'utilitaire externe TimThumb) ce qui rend la ligne encore plus chargée mais je voulais ici montrer la simplicité de la démarche et éviter de faire intervenir trop de sujets qui font l'objet d'un autre article.
(puisqu'on y est: http://forum.pluxml.org/viewtopic.php?pid=39858#p39858 )

Alors, une chose à la fois. Pour le cas présent, on installe tout bien à sa place, Pluxml de base et le plugin Vignette. On fait les petites retouches suggérées et c'est immédiatement fonctionnel. Le gestionnaire de médias dépose toutes les images dans "data/images" comme à l'habitude et c'est l'endroit où le plugin Vignette les y trouve comme prévu. Il ne reste plus qu'à décider de la mise en page de ce que deviendra la suite d'articles avec lastArtList et de bâtir la string en insérant allègrement <img src="data/images/#art_vignette"> et tous les paramètres imaginables pour voir défiler la parade.

Je fais une exception et vous donne le fruit de mon travail pour cette première expérience avec Pluxml, la cliente n'y verra pas d'inconvénient. Vous trouverez le tout en pleine action au http://nadinecaron.com

Si vous vous demandez où a été utilisée ma modeste contribution, la réponse est : presque partout. Du carrousel de la une à toutes les pages de catégories, incluant celle de blogue (qui est en fait une forme élaborée de page de catégorie) jusqu'à la petite grille du pied-de-page, toutes les listes successives d'articles qui comportent une image de vignette (pratiquement toutes) utilisent lastArtList avec un formattage approprié.

Bonne chance dans vos projets,

Pierre