Dans ce tutoriel, nous intègrerons un slider d’images dans un projet Django.
Installation
Tout d’abord, installons Django et la library.
pip install Django==1.8 django-hero-slider django-bootstrap3
Création du projet
Ensuite créons un nouveau projet, puis une nouvelle application
mkdir -p myslider/static myslider/media cd myslider django-admin startproject mysliderproject cd mysliderproject python manage.py startapp demo
Configuration
A présent, ajoutez ces applications dans votre projet Django.
#settings.py INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.sessions', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.messages', 'django.contrib.staticfiles', 'bootstrap3', 'filer', 'easy_thumbnails', 'hvad', 'demo', 'hero_slider', )
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 ).
#settings.py STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, '../static/') STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'demo', 'static'), )
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”.
#settings.py MEDIA_ROOT = os.path.join(BASE_DIR, "../media/") MEDIA_URL = '/media/'
Templates
Créez un dossier templates dans demo et ajoutez s’y le fichier suivant.
#templates/demo/slider.html {% load staticfiles %} {% load bootstrap3 %} <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> <script src="https://code.jquery.com/jquery.min.js" type="text/javascript" ></script> {% bootstrap_css %} {% bootstrap_javascript jquery=1 %} </head> <body> {% load hero_slider_tags %} <div class="container"> <div class="col-lg-6"> {% render_hero_slider %} <script type="text/javascript"> $(document).ready(function() { // put all your jQuery goodness in here. $('.carousel').carousel({ /* interval: 3000 */ }) }); </script> </div> </div> </body> </html>
Ensuite, nous réécrivons le template du slider afin de le rendre facilement modifiable.
Pour cela, dans templates, créez le fichier suivant.
#templates/hero_slider/carousel.html <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> {% for item in slider_items %} <li data-target="#myCarousel" data-slide-to="{{ item.position }}" class=" {% if item.position == 1 %}{{ 'active' }}{% endif %}"></li> {% endfor %} </ol> <div class="carousel-inner" role="list-box"> {% for item in slider_items %} <div class="item {% if item.position == 1 %}{{ 'active' }}{% endif %}"> <a href="{{ item.get_item_url }}"> <img src="{{ item.image.url }}" alt="" /> <div class="carousel-caption"> {% with item.get_trans as item_trans %} {% if item_trans.title %}<h4>{{ item_trans.title }}</h4>{% endif %} {% if item_trans.description %}<p>{{ item_trans.description }}</p>{% endif %} {% endwith %} </div> </a> </div> {% endfor %} </div> {% if slider_items.count %} <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> {% endif %} </div>
Ajoutons ensuite les chemins pour accéder au diaporama et aux fichiers statiques.
#urls.py from django.conf.urls import include, url from django.contrib import admin from hero_slider import urls as hero_urls from django.conf.urls.static import static from django.conf import settings urlpatterns = [ url(r'^admin/', include(admin.site.urls)), url(r'^hero-slider/', include(hero_urls)), url(r'^$', TemplateView.as_view(template_name='slider.html')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
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.
python manage.py migrate # Génère la base de données à partir du modèle python manage.py createsuperuser
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.