imath

En juin prochain, à l’occasion du WordCamp de Lyon, j’animerai un atelier sur BuddyPress afin de tenter de vous faire entrevoir toute la puissance de ce plugin et tous les services qu’il peut vous rendre dans la gestion de certains de vos projets de site WordPress. D’ailleurs, les 4/5e des exemples que je fournirai n’abordent pas la problématique du « réseau social »!

L’idée de ce sujet m’est venue au fil de mes participations à des meetups parisiens, et en réaction aux « combinaisons savantes pluri-extensions » que certains d’entre vous utilisent pour répondre à des besoins qui pourraient être couverts par BuddyPress et donc en un seul plugin 🙂 D’ailleurs, si vous regardez cette partie de mon site, combien de plugins certains auraient dû activer pour historiser mes tweets, mes réponses aux supports de mes plugins, lister mes dépôts WordPress ou github et intégrer un CV me présentant ? Ma réponse est : BuddyPress + un fichier de config !

Ce plugin fourmille d’API super utiles et il est tout à fait possible de « n’activer » que les parties de BuddyPress dont on a besoin étant donné la modularité de sa conception. Si vous êtes sur Lyon le 5 juin, vous ne voudrez pas manquer cet atelier 🙂

Comme je n’évoquerai que très rapidement la « BP Attachments » API lors de cet atelier, j’ai pensé partager avec vous mon enthousiasme à son sujet en vous décrivant comment je vais utiliser chacune de ses fonctionnalités pour le plugin BP Avatar Suggestions. Je reconnais que l’intérêt des apports de ce plugin perso est relativement limité : proposer des suggestions d’Avatar. En revanche, avec les travaux que j’ai entrepris ce week-end à l’occasion de sa 1.3.0-beta (qui requiert la dernière version de BuddyPress – trunk), je crois qu’il devient très intéressant pour les personnes cherchant à utiliser la « BP Attachements » API en vue de gérer les media générés par leurs utilisateurs.

« BP Attachments » API ?

Il s’agit d’un ensemble de fonctions, de templates et de classes dont l’objectif premier est d’améliorer la gestion locale des avatars incluse dans BuddyPress. Techniquement un avatar est un fichier (une image) qui est « uploadée » depuis le front-end du site par un utilisateur et qui servira à l’identifier dans de nombreux loops BuddyPress (Activités, Membres, Messages privés…). Ce qui veut dire que l’API est utilisable pour gérer tout besoin lié à la gestion de fichiers soumis par des utilisateurs. Je distingue 3 parties dans cette API :

1. la classe BP_Attachment que je décris dans cet article du codex de BuddyPress et qui vous permet de dialoguer avec WordPress pour récupérer le ou les fichiers, les valider (extensions autorisées – gestion des erreurs – taille de fichier..) et les entreposer dans un sous-répertoire du répertoire uploads de votre choix.
2. L’interface générique de gestion des uploads répartie dans des fonctions PHP, un javascript et un template Backbone
3. L’interface de gestion des avatars, elle aussi, répartie dans des fonctions PHP, des javascripts et des templates Backbone

BP Avatar Suggestions – 1.3.0-beta

Historiquement ce plugin s’appuie sur un article (en mode brouillon) auquel sont liés des attachments WordPress qui représentent les suggestions d’avatar. Cette organisation me permettait de profiter de la gestion des media de WordPress et notamment de la fonction media_handle_upload(). Bien entendu, si à l’époque j’avais pu disposer de la BP Attachments API, j’aurai procédé différemment. Mais cette organisation me permet de démontrer comment utiliser les points 1 et 2 décrits plus haut pour disposer d’un contrôle plus direct, en tout état de cause beaucoup moins alambiqué pour :

• uploader un fichier ;
• créer une taille d’image spécifique pour ces fichiers (et non pas pour tous les media, autrement dit, vous ne la retrouverez pas dans les options des media de votre administration et elle ne s’appliquera pas à vos autres media) et éviter ainsi de générer une version medium/large…;
• et enfin valider l’image avant de l’enregistrer, car figurez-vous que certains utilisateurs envoient des images dont la hauteur et la largeur sont inférieures à celles des avatars!

Si vous aussi vous rêvez d’une telle interface potentiellement portable dans n’importe quelle partie de votre site, je vous invite à observer cette classe, ces fonctions et ce javascript :

• Avatar_Suggestions_Attachment (github)
• Avatar_Suggestions_Admin->enqueue_script() (github)
• Avatar_Suggestions_Admin->admin_display() (github)
• Avatar_Suggestions_Admin->handle_upload() (github)
• bp-as-admin.js (github)

Côté front, BuddyPress 2.3 proposera une interface beaucoup plus dynamique pour gérer l’avatar de l’utilisateur. L’interface s’organise en onglets pour « Uploader – Cropper » un avatar, pour « Prendre une photo » (Nécessite Chrome ou Firefox) ou si l’avatar existe pour le « Supprimer ». Pour plus de détail à ce sujet, je vous invite à lire cet article du o2 de l’équipe de développement de BuddyPress.

Plus dynamique car chacune des opérations énumérées plus tôt se fait sans rechargement de la page! (Merci AJAX, jQuery, underscore et Backbone!). Et le plus beau est que cette interface est extensible!! J’ai donc rajouté un nouvel onglet pour permettre à l’utilisateur de choisir une suggestion.

J’ai par ailleurs profité du dynamisme de l’interface pour faire en sorte que la navigation disparaisse si toutefois l’utilisateur télécharge un avatar ou prend une photo!

Si vous aussi, vous souhaitez enrichir cette interface d’un nouvel onglet, je vous invite à observer ces hooks et ce javascript:

• add_filter( 'bp_attachment_avatar_script_data', array( $this, 'include_script' ), 10, 2 ); (github)
• add_filter( 'bp_attachments_avatar_nav', array( $this, 'suggestions_nav' ), 10, 2 ); (github)
• add_action( 'bp_attachments_avatar_main_template', array( $this, 'js_template' ) ); (github)
• add_filter( 'bp_attachments_get_plupload_l10n', array( $this, 'suggestions_strings' ), 10, 1 ); (github)
• avatar-suggestions-front.js (github)

Dés que la version 2.3 de BuddyPress sera publiée, je publierai la version 1.3.0 de BP Avatar Suggestions, bien entendu, si le coeur vous en dit vous pouvez d’ores et déjà beta tester ces évolutions, il s’agira de vous assurer que vous utilisez la version de développement de BuddyPress.