Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Afficher votre profil à la fin des articles

Rédigé par jack le 5 commentairese

Je vous propose d'afficher dans un encart à la fin des articles votre profil avec une photo et quelques lignes pour vous présenter. Si vous êtes plusieurs rédacteurs vous avez peut-être envie de mettre en valeur les personnes qui contribuent au contenu sur votre site. Voyons donc comment mettre tout ça en place et obtenir quelque chose qui ressemblera à cet affichage:

Renseigner ses informations de profil

Avant toute chose il faut renseigner son profil utilisateur dans l'administration de PluXml.
Aller dans le menu Profil et renseignez vos informations dans le champ Informations. Si vous n'utilisez pas d'éditeurs de texte, le texte à saisir est au format html, vous autorisant ainsi la mise en forme à partir du code html.
J'ai choisi d'afficher:
  • une photo
  • mon prénom en gras dans une police de caractère un peu plus grande
  • un texte pour me décrire
En html cela donne ceci: vous pouvez vous en servir comme modèle 

<div class="author-infos">
	<div style="float:left"><img src="https://pluxopolis.net/data/images/profile.jpg" title="Stéphane" alt="" /></a></div>
	<span>Stéphane</span><br />
	PluXml - Responsable Projet et Développement<br />
	Webmasteur et rédacteur du site <a href="http://pluxopolis.net" title="Pluxopolis">Pluxopolis</a> dédié à PluXml<br />
	Vous pouvez me suivre sur Twitter: <a href="https://twitter.com/pluxopolis" title="@pluxopolis">@pluxopolis</a>
</div>
Notez que le fichier de la photo profile.jpg est stockée dans le dossier data/images/.
Sa taille est de 75x75 pixels.

Ajouter l'affichage du profil dans son thème

Maintenant que nos informations de profil sont renseignées, pour les afficher à la fin des articles, éditez le fichier article.php stocké dans le dossier de votre thème.

Avant la ligne: 

<?php include(dirname(__FILE__).'/commentaires.php'); ?>
Ajoutez la ligne suivante: 

<?php $plxShow->artAuthorInfos('#art_authorinfos'); ?>

Mettre en forme l'affichage

Pour mettre en forme l'affichage, nous allons utiliser les propriétés css des balises html utilisées dans le contenu des informations du profil.
Éditez le fichier css de votre thème (généralement le fichier s'appelle style.css) et ajoutez à la fin du fichier les lignes suivantes: 

.author-infos {
	padding: 10px;
	font-size: 12px;
	background-color: #f9f9f9;
	border: 2px solid #ccc;
}
.author-infos img {
	border: 1px solid #dedede;
	padding: 3px;
	margin-right: 10px;
}

.author-infos span {
	font-size: 16px;
	font-weight: bold;
}
A vous maintenant de personnaliser l'affichage en fonction de vos préférences.

DClassé dans : PluXml ,Mots clés : PluXml, Thème, Profil

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

5 commentaires

flipflip a dit : #1

Ca fait un bout de temps que je veux intégrer ce genre de pied d'articles mais j'ai comme l'impression que t'a eu un loupé de copier/coller. Tu donne la version html mais la version php pour faire l'intégration dans le moteur de pluxml ?

Voila ma version :
<?php $plxShow->artAuthorInfos('<div class="author-infos"><div class="author-infos img"><img src="data/images/profiles/#art_author.jpg" title="#art_author"></div><br /><span>#art_author</span>#art_authorinfos</div>'); ?>

Ca pose juste un problème pour l'intégration de l'image dans le cas d'un blog multi-auteur. En fait il faudrait que l'image soit géré par la partie Profil de la page d'administration.

Stéphane a dit : #2

@flipflip :
Bonjour flipflip

1) je donne bien le code php à intégrer dans le thème: cf paragraphe "Ajouter l'affichage du profil dans son thème" avec l'utilisation de la fonction artAuthorInfos
2) je précise dans mon exemple que mon image profile.jpg est stockée dans le dossier data/images/. A chacun de stocker son image dans un dossier perso et d'adapter le chemin. Si PluXml est paramétré avec un dossier images perso pour chaque utilisateur (dans le cas d'un site multi-utilisateur), il sera facile pour chaque rédacteur d'avoir son image

Stéphane a dit : #3

@Stéphane :
:) Pas de problème

Didier a dit : #4

Bonjour,

Merci pour cette modification de pluxml.
J'adore cette signature.

Gwen a dit : #5

Super, merci ! c'est exactement ce que cherchais ;)

rFil RSS des commentaires de cet article

Les commentaires sont fermés.

Top