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.
