Django Carousel,其中管理员在列表中从前端选择了图片

时间:2018-10-16 10:06:19

标签: javascript django twitter-bootstrap carousel

我想在我的django Web应用程序中设置一个BootstrapJavascript 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。但是用户必须有选择自己的可能性,该出版物将显示在轮播中。

0 个答案:

没有答案