feat(annonces): permet l ajout des images et leur affichage
Parent
0d573c4b23
révision
bf1a66ff6e
|
@ -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
|
||||
|
|
|
@ -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">×</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 %}
|
||||
|
|
Chargement…
Référencer dans un nouveau ticket