 Bonjour, bonjour. Petite correction, je ne suis pas le créateur de Body Press, il s'agit d'Andy Pitling, mais merci de m'avoir attribué cette création, c'est un très beau plugin. On va parler de la gestion des médias pendant 20 minutes. Je suis Mathieu, via un décor développeur du projet Open Source Body Press, c'est un plugin qui vise à enrichir votre WordPress de fonction communautaire. Vous pouvez me lire sur imati.u, vous pouvez me voir et m'écouter à l'occasion des podcasts de vrfranshtrip.com et on peut se rencontrer à l'occasion des meet-ups organisés par l'association d'UEP Paris.fr. Alors, il se trouve qu'à l'occasion des deux dernières versions de Body Press, c'est en fait depuis un bon moment, je baigne dans les médias, dans les fichiers et aujourd'hui, j'aimerais partager avec vous un certain nombre de choses que j'ai pu observer, apprendre et accomplir. Alors, qu'est-ce que c'est qu'un média ? C'est un fichier stocké sur votre serveur web référencé dans WordPress selon le type de contenu attachement et dont les informations font l'objet d'un enregistrement en base de données. Alors, généralement, on retrouve les fichiers dans un répertoire bien spécifique de votre WordPress, WP Content Uploads, et ils sont répartis dans des sous-répertoires en fonction de l'année et du mois de téléchargement. Mais vous pouvez aussi paramétrer WordPress pour que ce soit ailleurs, du moment que cet ailleurs reste dans l'arboréissance de votre site web. Pour ça, vous allez éditer votre fichier d'où l'épicconfig.php, définir la constante upload à ailleurs. Ça veut dire que, comme on est dans l'arboréissance web, les médias, à partir du moment où j'ai leur adresse URL, j'y accède, je peux les télécharger, ce sont donc des objets publics. Quand vous êtes développeur, on vient de voir qu'il y avait en fait différentes possibilités de configurer l'endroit où sont stockés les fichiers. Quand vous êtes développeur WordPress, la fonction centrale la plus importante dans la gestion des médias, c'est WP Upload.dir, c'est celle qui va vous donner les informations sur où se trouve le répertoire pour vos médias, pour le téléchargement des médias. Dans la base de données, ça joue d'abord dans la table des postes. Les médias ou plus précisément les attachements sont des types de contenus qui cohabitent avec les autres types de contenus plus classiques comme les articles ou les pages. Le champ post par an de l'attachement peut être utilisé pour informer de l'insertion de cet attachement dans un des articles ou d'une page ou d'ailleurs des types de contenus personnalisés de votre WordPress. Ensuite, WordPress utilise la table des postes méta pour sauvegarder un certain nombre de métas à donner. La première, il l'utilise systématiquement, ça lui sert à avoir l'information sur le chemin relatif par rapport au répertoire des uploads des médias. La seconde concerne plus particulièrement les images, les vidéos et les sons, et il va s'occuper d'un certain nombre de données du fichier pour les images, ça va être par exemple les exifs, plus il va rajouter quelques autres données, c'est la liste des tailles alternatives utilisées par WordPress lorsque vous uploadz une image, souvenez il y a miniature, medium, large, full. Les deux fonctions qui font appel à la fonction générique d'écriture de WordPress qui s'appelle double pay and upload qui va retourner à l'information, oui, le média est écrit sur le serveur et à ce moment là, nos deux fonctions dédiées vont enregistrer des informations qu'on veut juste de voir dans le slide précédent en base de données et c'est cette opération qui va faire en sorte que les deux fonctions dédiées de WordPress, que votre fichier est intégré dans la bibliothèque des médias de WordPress. Alors j'attire votre attention sur le fait que les opérations d'écriture de fichier ou même d'édition d'image d'ailleurs sont localisées dans l'administration, dans le contexte de l'administration de WordPress, ça veut dire que si vous avez besoin d'utiliser ces fonctions en frontaine, il ne faudra pas oublier d'intégrer ces fichiers sinon vous avez un superbe white screen of death. Alors on dispose aussi de toutes les fonctions bien entendu liées au type de contenu et attachement et là j'ai donné exemple pour deux qui peuvent être utiles, la première ça a récupéré en fait le chemin absolu vers votre média et la seconde son URL. Alors WordPress a introduit les médias dans la version 2.0, 10 ans, un peu plus de 10 ans depuis maintenant mais je pense pas que ça soit la date la plus importante, la date la plus importante c'est le 11 décembre 2012. C'est le jour où la version 3.5 de WordPress a été publiée, elle a été surnommée Elvin et cette version contient une révolution, un gestionnaire des médias complètement repensés. C'est le fruit en fait d'un travail colossal et intense de Cooper Smith qui en un peu plus de 4 mois a construit une véritable application web monopage qui garantit aux utilisateurs une gestion simple, intuitive pour leurs médias, quel que soit le navigateur et surtout quel que soit l'équipement. Alors je crois que cette performance a marqué un tournant quant à la perception de JavaScript par les développeurs de la communauté WordPress. JavaScript c'est une des clés majeures pour améliorer l'expérience utilisateur et comme vous avez pu constater depuis un certain nombre de versions de WordPress c'est de plus en plus de présents dans le corps. Alors sur le slide j'ai listé la plupart des scripts que notre gestionnaire de médias va charger et en gras j'ai mis ceux qui pour moi me paraissent les plus importants et les plus intéressants. Alors d'abord Backbone. Backbone c'est le framework que WordPress a choisi pour organiser le code de son gestionnaire de médias. Backbone est particulièrement adapté lorsque vous avez besoin de développer une application web monopage et on vient de voir que c'était le cas ici parce que tout s'est effectué sans rechargement de la page grâce à des requêtes à synchrons. Grâce à Backbone on dispose d'objets que je qualifierai de communicant pour nos données les modèles et les collections de modèles et ces objets vont pouvoir éventuellement d'ailleurs faire persister leur état en base de données et surtout informer de leur évolution les autres objets et en particulier les vues. Les vues présentent les données bien entendu mais aussi observent les actions des utilisateurs et mettent à jour si besoin les modèles et les collections. Le deuxième fichier important c'est WP Backbone.js et là c'est là qu'on retrouve le gestionnaire des vues de WordPress il a créé son propre gestionnaire pour manager l'implication des vues de son gestionnaire de médias. Underscore vous propose un certain nombre de fonctions visitaires très intéressantes pour manipuler les objets et surtout l'une d'entre elles est essentielle à WordPress puisque c'est celle dont il se sert. Dans WPutile pour l'étendre et en même temps faire le templating des vues au moment de l'affichage du gestionnaire de médias. Si vous souhaitez approfondir ce super sujet je vous invite à vraiment regarder l'excellente conférence de Marc Jacobs qui l'a donné à l'occasion de WorldCamp San Francisco 2014 et personnellement c'est ma conférence préférée sur WordPress TV. Alors ce qu'il faut retenir des médias publics ce sont des objets publics et en quelque sorte ce sont des accessoires au service des rédacteurs de contenu alors qu'on utilise le terme rédacteur en fait d'exclu contributeur abonné visiteur. Et vraiment quand je regarde le code de la bibliothèque de médias j'ai envie de dire que la philosophie de cette bibliothèque c'est vraiment d'être exhaustive et de ressensé tous les fichiers qui pour permettre la réalisation de ces fichiers par les rédacteurs dans leur contenu. Alors si on a une attente un peu particulière en matière de gestion de fichiers et qu'elle ne peut pas rentrer dans ce cadre par exemple on peut avoir envie de protéger les téléchargements. On peut avoir envie que le fichier ne soit pas forcément dans la bibliothèque de médias ou on peut avoir envie que tout le monde puisse créer des médias. Alors dans ce cas là il va falloir faire appel à une gestion alternative. Et moi je connais bien une fonctionnalité qui n'entre pas dans ce cadre c'est la gestion locale des avatars de body press alors bien que ce soit des objets publics les avatars concernent tous les utilisateurs et pas les contenus des rédacteurs. Historiquement l'organisation dans le répertoire des uploads de workpress ne s'est pas fait en fonction de l'année ou du mois mais plutôt en fonction du type de l'objet. Est-ce que c'est un avatar d'utilisateur ? Est-ce que c'est un avatar de groupe ? Et en fonction de l'identifiant de l'objet ? Est-ce que c'est un user ID ou est-ce que c'est un group ID ? Et comme on a un avatar par objet en fait cette organisation nous a permis d'économiser une insertion en base de l'aide. Alors vous êtes content de l'apprendre et alors figurez-vous que nous avons complètement revu cette gestion locale avec la version 2.3 et qu'on a introduit une nouvelle API très générique laquelle peut vous faire gagner du temps. Si vous avez besoin de développer des gestions alternatives de média ça vous évitera de partir de zéro. Alors Livio version 2.3 3 juin 2015 on a intitulé notre version du nom d'une pizzeria de la région parisienne et alors si workpress est fan de jazz nous à bodypress on est fondu de pizza. Alors elle introduit cette version les fondations pour la mise en oeuvre de fonctionnalité de partage communautaire de média donc je vous ai dit on se repose sur une nouvelle API et une interface utilisateur la particularité c'est que toutes les deux elles sont extensibles et que potentiellement vous pouvez les utiliser pour tout type d'objet. Alors si dans la salle il y a certains d'entre vous qui ont eu l'excellent idée d'activer bodypress vous pouvez directement en profiter pour les autres. Je vous invite à lire le code de la BP attachment API parce que ça va vous inspirer en tout cas ça vous donnez un certain nombre d'éléments pour éviter d'oublier quelque chose quand vous implémenter votre gestion alternative des médias. Voilà la BP attachment API c'est magnifique alors concrètement qu'est-ce qui se passe. Je vais définir le sous réperteur de ces uploads spécifique à mettre les chargements et s'il existe pas je le crée ensuite je vais définir les messages d'erreur qui peuvent intervenir lors du transfert de fichiers. Et j'ai m'assuré de charger les scripts requis pour l'écriture de ces fichiers ce que je vous ai dit tout à l'heure que sinon on avait un petit écran blanc. On valide le fichier et ensuite on va le copier dans notre répertoire de gestion celui qu'on a créé en tout début de parcours. En modifiant temporairement le répertoire par défaut de WordPress après on rétabit tout. Voilà ce que fait cette BP attachment API ensuite on a une interface de gestion pour nos avatar qui repose en fait sur les mêmes piliers que ceux de la gestion des médias de WordPress. Alors bien entendu elle est beaucoup plus minimaliste mais elle nous permet d'optimiser l'expérience utilisateur quel que soit son navigateur quel que soit son équipement alors elle se démarque néanmoins sur un point. On utilise un fichier d'échange très générique avec plus de la différence de WordPress qui lui type très tôt le fichier en tant qu'attachement. Plus de pour ceux qui ne connaissent pas c'est en fait une librairie qui permet d'envoyer de manière à synchrone un ou plusieurs fichiers sur le serveur. Ok on a conçu cette interface en fait pour qu'elle soit extensible ça veut dire qu'on peut ajouter des méthodes pour créer les avatars mais on peut permettre au plugin également de l'utiliser pour gérer ses propres objets. Alors je me suis amusé à faire un plugin pour vous montrer comment je pourrais l'utiliser éventuellement dans un autre plugin. Qui s'appelle WPAG stream et qui permet en fait de faire de la soumission d'idées en frontend. Et l'idée c'est d'ajouter la fonctionnalité de partage de médias d'insertion de médias dans dans ce plugin. Alors la mère alors d'abord ça va être pratique. Je ne résiste pas à l'envie de vous montrer notre fabuleuse et minimaliste gestion des avatars. Et on a ajouté donc la possibilité d'envoyer un fichier de le tailler et ce qu'on a fait aussi c'est que sur les navigateurs qui le supportent on peut prendre une photo. Alors sinon je peux l'utiliser pour donc ce plugin et donc j'ai ajouté la possibilité d'envoyer des fichiers ici et on va aller jusqu'au bout. Merci Mathieu donc est ce que vous avez des questions à poser à Mathieu. Sinon il y a une conférence importante c'est à 14 heures avec Sylvie Clément qui va vous parler de Body Press. Elle en parle beaucoup mieux que moi. En attendant 14 heures personne question à poser à Mathieu. Bonjour Mathieu Cyril. J'ai un petit problème personnel il m'arrive quelques fois de me retrouver avec des images qui ne sont pas dans l'année et le mois qui correspond au moment du téléchargement. Mais qui correspond peut-être à la date de l'article. Non plus non plus. T'as amené ton on peut accéder à ton site. Non là non. Non non mais est-ce qu'il peut y avoir. Oui oui d'accord d'accord mais il peut y avoir enfin c'est quoi c'est ça peut être la date de l'article. Ça peut pas être la date du fichier. Non. La date de l'article la date de le téléchargement du fichier. Mais date. Pas le exif ou quelque chose comme ça qui ferait que. Je crois pas je crois pas on vérifie vérifier. D'accord merci. Bonjour j'ai une petite question à quand une organisation des images un petit peu plus optimisé avec par exemple des répertoires qu'on pourrait créer directement dans la bibliothèque des médias. Alors donc les médias ça la librairie c'est vrai que. C'est vrai que. Par exemple dans ce cas de gestion de soumission de fichiers en frontaine ça veut dire que les médias ils vont arriver avec les médias dont se servent les rédacteurs. Donc ça va être un petit peu compliqué à gérer et dans le plugin que je vous ai mis là en fait je me suis amusé à ajouter des petites choses et ici je peux. N'afficher que ceux qui sont qui ont été chargés en frontaine ou sinon j'ai le reste donc j'essaie de les enlever. Ce que j'ai fait aussi c'est que je vais récupérer ceux que moi j'ai envoyé des fois ça peut être intéressant. Donc c'est un petit plugin vous avez. J'enverrai sur le Twitter URL qui peut vous donner des idées de comment faire effectivement pour déjà essayer. D'organiser cette bibliothèque de médias ensuite. C'est vrai qu'on pourrait imaginer ajouter une c'est un type de contenu donc on peut faire une taxonomie et organiser la bibliothèque des médias. Il y a certains plugins qui le font. Alors vous avez. Vous avez. 50 000 téléchargements. 50 000 installations actives je crois. J'ai testé les deux avant en préparant cette conférence. Et je préfère celle qui a moins d'actes. Le moins de. L'installation active. Je trouve qu'il y a beaucoup d'options. Et j'étais très intrigué parce que ici en fait on est dans des vues backbone et. C'était très intrigué de savoir comment il faisait et. Je. Ça ne m'a pas forcément plus qu'il faut faire en fait donc. Mais bon ça fonctionne. Mais je pense qu'il faudrait qu'on arrive à il y a peut-être. Des efforts à faire par rapport pour WordPress. Pour créer. Ce qu'on pourrait appeler des hook. En JavaScript. Pour que ce soit peut-être plus simple à étendre mais backbone le permet normalement donc. Bago non peut étendre tous les objets. Mais ça fonctionne mais je préfère le deuxième. Si j'ai un conseil à vous donner. Oui. Oui bonjour jouer ça jouer savoir est-ce que de plug-in que tu a créé il peut. On peut par exemple. On pourrait mettre en changer l'url du. De la ressource par exemple mettre statique. Mon site. Pour pour pour aider pour le temps de chargement pour mettre ça sur un sous-domain. D'autres et du coup ça procède. C'est clair ce que j'ai dit. Et. En fait je. Oui c'est clair. Sur le plugin que j'ai fait c'est vraiment un truc de démonstration. Vous n'allez pas activer ça sur votre serveur. On est d'accord. Mais en réalité je ne fais que. En fait je n'utilise la BP attachment API là juste pour. Le côté front-end l'interface de gestion mais vous verrez si vous regardez le code que je le mets dans la bibliothèque parce que j'ai pas eu le temps de. Créer une interface d'administration donc je le mets dans la bibliothèque ça veut dire que si dans la bibliothèque si ton plugin il fonctionne pour les. Les médias classiques de WordPress dans l'absolu ça fonctionne là aussi. C'est la même chose. Les mêmes ou que vont se vont s'exécuter et donc ton plugin qui met les images sur un CDN ou enfin vous ne sais pas trop fonctionnera. Vous avez d'autres questions. Je crois que tu voulais poser une question. Bonjour alors moi j'ai une question par rapport à des projets clients au bout de quelques iterations fin de plusieurs iterations on va se retrouver avec des centaines d'images qui ont été applaudés dans la. Dans 15 20% sont réellement utilisés et les autres occupent de l'espace disc inutilement et j'ai testé plusieurs plugins pour m'en débarrasser et aucun n'est capable d'identifier. Les images non utilisées ni par le thème ni par les contenus est-ce que vous avez une stratégie des conseils par rapport à la gestion des images inutilisées. Oui. Non parce qu'en fait tout à l'heure j'ai dit qu'on pouvait attacher avec le champ post-parent mais en réalité. Ça ça ça c'est quand vous êtes dans l'éditeur. Mais en été vous pouvez avoir une vous allez attacher l'image à votre contenu et je peux se produire aussi un effet c'est que vous allez supprimer cette image mais votre contenu va afficher toujours en fait le playsolder pour l'image et ça va faire un truc pas très joli quoi. Donc si on n'arrive pas déjà à éviter ça je vois pas comment vous pourrez arriver à faire ce que vous demandez. Il faudrait parser le contenu. Retirer la balise image à chaque fois qu'on fait un update ou à chaque fois qu'il s'affiche plutôt d'ailleurs parce qu'on va peut-être pu mettre à jour un article qui date. C'est pas évident. Bonjour Mathieu. J'ai une question au niveau administration on a souvent des clients qui nous demandent pour un poste une page de pouvoir uploader des médias. Ce soit un image ou un PDF et de pouvoir eux-mêmes décider de l'indexer ou non. C'est pas s'il existe un plug-in interfaçage qui permettrait en back-end au client bah vous allez dans les médias ou sélectionner vous mettez du no index et on est sûr que et l'attachement et le fichier vraiment le chemin du fichier qui a été uploadé n'est pas visible par les moteurs de recherche. Sans devoir utiliser un robot sous autre et vraiment que le côté quand back-end le client puisse le faire lui-même. Ouais mais là je suis pas au courant de plug-in qu'il fasse ça. C'est des demandes qu'on a souvent et je sais pas si j'ai eu l'occasion de mettre ça en place non. J'ai eu l'occasion de protéger les téléchargements mais ça non. Je t'en prie désolé. Oui bonjour Mathieu Benjamin tu insiste sur tes sur tes slides sur le fait que les médias soient publics. Est-ce que ta solution permet d'avoir des médias privés par exemple quand on met le juste privé qui pour moi est fait pour ça mais finalement ça ne protège pas du tout les attachments. Donc est-ce qu'on a une solution avec avec body press pour justement avoir des médias privés. Oui. En fait mais cette solution en fait c'est difficile d'avoir réellement un média privé en réalité cette solution elle va fonctionner uniquement sur apache. Le problème c'est qu'après on rentre dans des problématiques serveurs sur apache on peut mettre un ht access à la répertoire de la racine du répertoire d'un des sous répertoire des oppos dédire ici non. La paroi de récupérer les fichiers après ça veut dire qu'il va faire créer les fonctions php pour justement. Permettre le téléchargement si la personne est autorisée à le télécharger ça va pas marcher du coup sur n gx et ça marchera pas non plus sur deux y est. Donc la seule manière vraiment de protéger les téléchargements de mon point de vue qui marche partout. C'est de sortir les fichiers de l'arborécence web c'est-à-dire vous avez votre web et vous les mettez au-dessus quoi et vous les récupérez avec php et ça vous protéger vos downloads. Alors dans le presse il y a. Une solution qui existe qui s'appelle body drive et qui va marche qui va fonctionner sur apache. Et l'auteur du plug-in est plutôt sympa et fait des conférences lors d'avoir. De paris en particulier. Merci. Merci Mila j'ai une question plutôt sur les fonctionnalités de base de WordPress je me suis aperçu que quand on applaude un média dans la dans la librairie. Automatiquement une page est créée qui s'appelle page du fichier attaché. Est-ce qu'il y a moyen de supprimer cette création de page. En fait c'est pas une page enfin ça se matériesent par une page sur le frontaine mais en réalité c'est parce que comme j'expliquais tout à l'heure. Un média finalement c'est comme un article si tu veux et donc ça rentre dans la table des postes et donc. Ça fait ça génère finalement on peut requêter dessus et afficher la page. La seule manière de faire c'est de je pense de supprimer le template de cette. Mais déjà quand tu insers l'image tu peux dire que je ne veux pas qu'il y ait de lien associé à cette image. Ou tu peux dire que je veux que le lien ce soit le fichier image lui-même t'es pas obligé d'avoir l'attachement. Mais je pense même si je coche pas de lien sur cette image là ça va me générer une page derrière qui s'appelle. C'est-à-dire que WordPress va répondre à la requête de l'URL qui dit je veux afficher la page d'attachement donc. Il faut quand même quelqu'un qui te fasse l'URL pour que la page se crée en fait. Il y a l'URL de l'image mais il y a l'URL de l'attachement de cette page de cette page. Cette page m'embaite beaucoup parce qu'il y a par défaut il y a le formulaire de contact dedans dont je n'ai pas besoin. Je me suis rendu compte sur mes premières créations de WordPress. C'était souvent un peu la faille. On peut faire en sorte de rediriger peut-être l'utilisateur sur sur une autre page à ce moment-là. Mais oui de toute façon elle existera cette page parce qu'en fait c'est dans la table des postes. Est-ce qu'il y a d'autres questions ? Hello. Oui du coup ma question c'est comment pas trop difficilement on peut externaliser la bibliothèque de média carrément sur un autre serveur. C'est-à-dire je vais avoir plusieurs sites qui vont avoir par exemple la même bibliothèque de média partagé sur un autre serveur. Alors moi je sais le bidouiller mais pour bien le faire à ton avis. En fait ça ne me fait penser plus à des services de type Amazon parce que ce que tu veux c'est qu'en fait dans une autre bibliothèque on peut le faire. Oui on peut le faire. On regarde tout à l'heure parce que ça va être compliqué à expliquer. Je crois que je vous ai déjà assommé avec deux trois fondements de fonction donc je ne sais pas. Très bien merci Mathieu.