Modifier la photo de profil des membres de votre site MODx

Modifier la photo de profil des membres de votre site MODx

Retrouvez la solution qui vous permet de modifier la photo de profil des utilisateurs inscris sur votre site MODx

1. Installation

La première étape est de créer un snippet nommé "photo" par exemple, qui va contenir le code permettant d'uploader la photo de profil sur votre serveur. 

Dans ce snippet vous devez coller le code que vous trouverez à cette adresse : 
https://github.com/meltingmedia/Tools/blob/develop/core/components/tools/elements/snippets/hook.photo.php

Dans l'onglet des propriétés de ce snippet vous devez ajouter les 3 propriétés ci-dessous :

1. photo_path
• Chemin absolu vers le répertoire où vous souhaitez que les photos soient stockées
2. photo_path_url
• Url permettant d’acceder au répertoire défini dans la propriété path
3. photo_field
• Nom du champ (input) du formulaire à utiliser pour récupérer les informations de l’image ( dans l’exemple ci-dessous : « picture » ). Veuillez à ne pas utiliser un champ nommé « photo ».

Une quatrième propriété existe : photo_filename. Elle permet de définir le nom de l’image. Ce nom doit être unique pour chaque utilisateur (afin d’éviter les conflits/écrasements).

Par défaut le nom sera : {nom d’utilisateur}-profile.{extension du fichier}, exemple : toutsurmodx-profile.jpg

2. Utilisation

Afin de pouvoir modifier la photo de profil, vous devez créer un formulaire avec un champ permettant d'ajouter la photo.

En plus de ce formulaire, vous devez appeler le snippet UpdateProfile qui permettra de modifier les infos de l'utilisateur.

[[!UpdateProfile? &postHooks=`photo` &useExtended=`0`]]
<form action="[[~[[*id]]]]" method="post" enctype="multipart/form-data">
 <label for="picture">Photo [[+error.picture]]</label>
 <input type="file" name="picture" />
 <input type="submit" name="submit" value="submit" />
</form>

Dans cet exemple, l’utilisation des champs étendus a été désactivé afin de ne pas créer une entrée pour le champ « picture » (qui est un array).

Si vous désirez utiliser les champs étendus, penser à indiquer : &excludeExtended=`picture` dans votre appel de snippet (où picture est le nom du champ input type = "file").

Il est possible de définir ou « d’écraser » les paramètres dans votre appel UpdateProfile, par exemple :

[[!UpdateProfile?
 &postHooks=`photo`
 &useExtended=`0`
 &photo_path=`/chemin/absolu/vers/dossier/`
 &photo_path_url=`url/vers/dossier/`
 &photo_field=`nom_du_champ_de_photo`
 &photo_filename=`nom_unique-[[!+modx.user.id]]`
]]

Maintenant vos photos devraient être uploadé dans le dossier défini ci-dessus lorsqu'un utilisateur connecté validera ce formulaire.

Pour afficher l'image ensuite, il suffit d'appeler le snippet Profile et d'appeler la variable [[+photo]] dans une balise img. Le snippet Profile ou UpdateProfile devra être appelé avant la variable pour que celle-ci puisse s'afficher.

[[!Profile]]
[[+photo:notempty=`<img src="[[+photo]]" alt="[[+username]]"/>`]]

Merci à Romain Tripault, qui a développé cette solution.