- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va ajouter nos images dans les fichiers HTMLet on va s'assurer également qu'elles soient visibles.Puisque pour l'instant, quand j'y accède via l'interface d'administration,j'ai un page not found.
00:00:11 :Donc la première chose que je vais faire, c'est vous montrer à quoi ressemble ce champ thumbnail ici.Je vais ouvrir un terminal et je vais lancer un shell,donc je vais faire python manage.py shell.
00:00:21 :Et à l'intérieur de ce shell, on va aller récupérer notre article de bloget je vais vous montrer la valeur qu'on a dans thumbnail.Donc je vais faire from post.model import blog post.
00:00:31 :On va récupérer le premier article, donc blog post.objects.firstpuisqu'on n'a qu'un seul article en ce moment dans notre base de données,donc ça va cibler cet article ici.
00:00:40 :Et si je fais p.thumbnail, vous voyez que ça nous retourne un image field fileet on a ici le chemin vers notre image.Donc ça, c'est un objet.
00:00:48 :Moi, ce que j'aimerais ici, c'est récupérer le chemin vers ce fichier.Donc pour ça, je peux faire thumbnail.url.Et si je valide, là, on a bien slash media slash blog slash article-python.png.
00:00:59 :Donc c'est vraiment l'URL à laquelle on va pouvoir accéder à notre média.Donc c'est à cette URL qu'on accède quand on clique sur notre image ici.
00:01:06 :On est bien sur slash media slash blog slash article-python.Donc cette URL, elle est pratique puisqu'on va pouvoir l'utiliserà l'intérieur de nos fichiers HTML.
00:01:13 :Si je reviens ici dans les templates,donc je vais aller voir ici dans mon blog post detailqui contient l'affichage d'un article,donc l'affichage d'un article que je retrouve.
00:01:22 :Si je vais dans mon blog, que je clique sur lire l'article,voilà, c'est cette vue qu'on a ici.Donc là, on a le h1 et moi, j'aimerais bien rajouter l'image.
00:01:30 :Donc je vais créer une balise d'image en HTML.Et dans la source, on va tout simplement insérer la variable post.thumbnail.url.Donc là, c'est bien une variable. On met bien deux accolades.
00:01:42 :Il faut bien distinguer ces variables ici,où on va chercher directement l'URL du fichier,de la variable statique que l'on utilise,par exemple, dans notre fichier de base.
00:01:51 :Donc si je vais voir dans les templates de base,donc j'ai mon fichier base.html,et là, on avait la balise load static,qui nous permet d'aller chercher les fichiers statiques.
00:02:00 :Donc là, c'est avec une accolade et un pourcentage,avec la balise statique, qu'on va résoudre le cheminà partir des fichiers statiques.Vous voyez que là, on a quelque chose d'un peu différentavec les fichiers de type média.
00:02:11 :On n'a pas une balise média.On a tout simplement notre modèle,donc le modèle post ici,sur lequel on va récupérer notre champ thumbnailet sur lequel on va récupérer l'URL de ce thumbnail.
00:02:21 :D'accord ?Donc là, maintenant, si j'actualise la page,vous voyez qu'on a malheureusement rien qui est affiché.Donc je vais redémarrer ici mon serveur,juste pour m'assurer que tous les changementsont bien été effectués.
00:02:33 :Je vais mettre ici dans le alt text, par exemple,l'image de l'article.Et si j'actualise cette page,vous voyez qu'on a bien notre alt text qui est affiché ici,mais l'image n'est pas affichée.
00:02:44 :Donc là, on retrouve le même problèmeque celui qu'on avait dans l'interface d'administration,c'est-à-dire que nos fichiers de médiane sont pas servis par notre serveur.
00:02:52 :Donc pour régler ce problème,il va falloir ajouter une ligne à l'intérieur de notre fichier d'URL.Donc si je vais dans mon projet ici,dans le fichier d'URL principal,dans mon blog ici, dans urls.py,
00:03:01 :on va aller ajouter une ligne ici.Cette ligne, vous pouvez la retrouver dans la documentation.Si vous cherchez gestion des fichiers statiques,vous avez une partie iciqui concerne les fichiers téléverséspar les utilisateurs durant le développement.
00:03:14 :Donc c'est exactement le cas dans lequel on se trouve,avec les fichiers de type média.Et vous avez ici la ligne qu'il faut ajouter.Donc on va prendre tout ça,et je vais vous expliquer en quoi ça consiste.
00:03:22 :Donc on met cette ligne ici,et là en fait, qu'est-ce qu'on a ?On a les ressources statiquesavec settings.mediaURL et settings.mediaRoute.Donc il va falloir importer plusieurs éléments ici.
00:03:31 :On va importer depuis blog le settings.Donc là, on pourrait faire un from.On va faire from blog import settings à la placepour qu'on ait rien à modifier ici.
00:03:40 :Donc ça, ça va nous permettre d'aller récupérer le médiaURL.Donc médiaURL, qu'est-ce que c'est ?C'est l'URL ici.Donc on va lier notre URL à nos fichiers iciqui sont à l'intérieur de MediaFiles.
00:03:50 :Donc c'est ce qui se passe ici en fait.Grâce à cette fonction statique,on va lier notre URL au médiaRoute,donc au dossier qui contient nos fichiers de médias.
00:03:59 :Là, on va importer static.Donc static, je vais utiliser l'ampoule icipuisque je ne me souviens jamais du nom du module.Donc c'est celui-ci, django.conf.urls.static.
00:04:08 :Donc on clique là-dessus.Si vous n'êtes pas dans PyCharm,vous pouvez donc faire l'import vous-mêmeen faisant from django.conf.urls.static import static.Donc ça en fait, ça va nous permettre de lier notre URL.
00:04:19 :Donc l'url.media.blog.articlesdepitons.Je ne me souviens plus exactement ce que c'était,mais c'était quelque chose du genre.Donc ça va nous permettre de lier ces URL à nos fichiers de médias.
00:04:30 :Donc là, si j'actualise la page,cette fois-ci, on a bien notre image qui s'affiche.Et si j'accède à mon interface d'administration,que je vais dans mes articleset que je clique donc sur cette imagepour me rendre à l'URL précise,donc l'url.media.blog.articles,
00:04:44 :là, notre image est bien accessible.OK, donc c'est vraiment ça ce qu'on fait ici.On associe des URL à des fichiers dans ce cas-ci.Comparativement à d'habitudeoù on associe des chemins d'URL à des vues,dans ce cas-ci, avec la fonction static,on va associer un chemin d'URL à des fichiers.
00:04:59 :Donc ça nous permet, dans le mode développement ici,de servir nos fichiers de médiaset de les afficher sur nos pages.Donc là, quand je reviens dans mon interface ici,j'ai bien mon fichier qui est affiché.
00:05:09 :Donc voilà, ça fait le tourde tout ce qu'on avait besoin de voirpour servir des fichiers statiquesou des fichiers de médias.Donc en ajoutant un champ de type image field ici,donc il faut bien penser à ajoutertoutes ces variables ici,avec les variables URL qui concernent donc les URL,
00:05:24 :comme leur nom l'indique,et les variables root qui, elles,concernent les dossiers dans lesquelson va ranger nos différents fichiers.Et ensuite, on peut utiliser,donc par exemple, le upload to icipour rajouter encore un niveau de classementpour organiser nos fichiers de type médiaset ne pas avoir tout en pagaille directement
00:05:39 :dans le dossier sources iciou dans le dossier médias files ici.Donc pour classer un peu mieux les choses,imaginez par exemple que vous ayezun modèle d'utilisateuret que vous permettez aux utilisateursde rentrer une image de profil,et bien dans ce champ ici,thumbnail pour votre modèle d'utilisateur,
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.