Un slider dans votre application Django

par

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

slider

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.

0

Laisser un commentaire