我想在我的django
Web应用程序中设置一个Bootstrap
或Javascript carousel
一点点特殊。到目前为止,据我所知,轮播图片是由开发人员在后端代码中定义的。
我想制作一个轮播,其中由管理员从带有出版物选择列表的模板中定义图片。
每个出版物都有一个封面。因此,管理员用户可以检查一个或多个发布,并且放置在另一个模板中的轮播会加载以前选择的图片。
我对这个想法有不同的疑问:
非常感谢您提出任何建议!
我有我的模型文件:
class Publication(models.Model):
new_publication = models.BooleanField(verbose_name=_('new publication'), default=True)
cover = models.ImageField(upload_to='media/', verbose_name=_('cover page'), default='')
我认为这是一堂课:
class HomeView(CreateView):
""" Render the home page """
template_name = 'index.html'
def get_context_data(self, **kwargs):
kwargs['publication_list_newest'] = Publication.objects.filter(new_publication=True).order_by('pub_id')
return super(HomeView, self).get_context_data(**kwargs)
在我的模板中,我正在尝试设置以下内容:
<div class="row">
<h3>{% trans 'Newest publications' %}</h3>
<hr>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
{% for publication in publication_list_newest %}
<li data-target="#myCarousel" data-slide-to="{{ publication.id }}" class="active"></li>
{% endfor %}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Cover page" style="width:100%;">
</div>
{% for publication in publication_list_newest %}
<div class="item">
<img src="{{ publication.cover.url }}" alt="{{ publication.cover }}" style="width:100%;">
<div class="carousel-caption">
<h3>{{ publication.title }} ({{ publication.pub_id }})</h3>
</div>
</div>
{% endfor %}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
通过这种方式,图片会自动显示,因为它考虑了属性new_publication
。但是用户必须有选择自己的可能性,该出版物将显示在轮播中。