feat(annonces): permet l ajout des images et leur affichage

develop
François Poulain 2019-02-25 21:44:03 +01:00 commité par François Poulain
Parent 0d573c4b23
révision bf1a66ff6e
2 fichiers modifiés avec 57 ajouts et 0 suppressions

Voir le fichier

@ -1111,6 +1111,11 @@ class AnnonceIndex(mixins.UniqPage, mixins.SiteCommonIndex, SitePage):
]
class Image(ClusterableModel):
annonce = ParentalKey('Annonce', related_name='images')
image = models.ImageField ("Image")
class Annonce(SitePage, mixins.GeoLocated):
"""
Elle sert à publier une annonce.
@ -1236,6 +1241,13 @@ class Annonce(SitePage, mixins.GeoLocated):
content_panels = Page.content_panels + [
MultiFieldPanel([FieldPanel(field) for field in fields], title)
for title, fields in fieldsets
] + [
InlinePanel(
'images',
label="Images associées",
max_num=4,
panels=[FieldPanel('image')],
),
]
# Expiration

Voir le fichier

@ -66,6 +66,51 @@
{{ annonce.prix }} € {{ annonce.unite_prix }}
</div>
{{ annonce.description | linebreaks}}
{% if annonce.images.all %}
{% for image in annonce.images.all %}
<div class="modal fade" id="modal-annonce-{{ forloop.counter0 }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ image.image }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<a href="{{ image.image.url }}">
<img class="d-block" style="margin:0 auto; max-width:100%" src="{{ image.image.url }}" alt="{{ image.image }}">
</a>
</div>
</div>
</div>
</div>
{% endfor %}
<div id="carouselAnnonces" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for image in annonce.images.all %}
<li data-target="#carouselAnnonces" data-slide-to="{{ forloop.counter0 }}"{% if forloop.first %} class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in annonce.images.all %}
<div class="carousel-item{% if forloop.first %} active{% endif %}" style="height:300px">
<a data-toggle="modal" data-target="#modal-annonce-{{ forloop.counter0 }}">
<img class="d-block" style="object-fit: contain; height: 300px; max-width:90%; margin:0 auto;" src="{{ image.image.url }}" alt="{{ image.image }}">
</a>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselAnnonces" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
<a class="carousel-control-next" href="#carouselAnnonces" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Précédant</span>
</a>
</div>
{% endif %}
</div>
{% endwith %}
{% endwith %}