Un slider dans votre application Django

Dans ce tutoriel, nous intègrerons un slider d’images dans un projet Django.

slider

Installation

Tout d’abord, installons Django et la library.

Création du projet

Ensuite créons un nouveau projet, puis une nouvelle application

Configuration

A présent, ajoutez ces applications dans votre projet Django.

Renseignons ensuite le chemin localisant les images du diaporama.

Les chemins “static” seront utilisés pour stocker les ressources nécessaires au diaporama ( javascript, gestion des images ).

Les chemins “media” identifient les répertoires contenant les ressources visibles ( image, vidéo, audio ).
Les images du diapo seront stockées à l’intérieur de “media”.

Templates

Créez un dossier templates dans demo et ajoutez s’y le fichier suivant.

Ensuite, nous réécrivons le template du slider afin de le rendre facilement modifiable.
Pour cela, dans templates, créez le fichier suivant.

Ajoutons ensuite les chemins pour accéder au diaporama et aux fichiers statiques.

Pour plus de renseignements, la documentation Django est disponible.

Intégration d’image dans le slider

Afin d’accéder à l’administration, créons premièrement un compte superuser.

Une fois connecté à l’administration, de nouveaux menus apparaissent.

  • Folder: organise les images dans des dossiers
  • Thumbnail options: permet de créer une dimension prédéfinie pour les miniatures
  • Slider item categorys: permet d’organiser les diapositives en catégorie
  • Slider items: autorise la création de diapositive

Libre à vous d’ajouter des images pour les voir s’afficher dans votre diapo.

Ce tutoriel est terminé, vous êtes maintenant capable d’intégrer un diaporama dans votre application Django, Félicitations !

Merci au créateur ! Lien du projet => ici.
Le projet réalisé durant le tutoriel est disponible sur github sous la branche upidev-tuto-slider.

Pour des informations complémentaires, vous pouvez m’envoyer un email via Contact.

Laisser un commentaire