title: Python / Django / Bootstrap - How to add images to the bootstrap carousel via website admin panel?
body: <p>I have the following problem:</p>
  
  <p>For now I have a working static bootstrap carousel with 3 images. The main idea is to add an app which allows to change these images via the website admin panel. Now I have:</p>
  
  <p><strong>model.py</strong></p>
  
  <pre><code>class BGImagesModel(models.Model):
      image1 = models.ImageField(upload_to='images/%Y/%m/%d')
      image2 = models.ImageField(upload_to='images/%Y/%m/%d')
      image3 = models.ImageField(upload_to='images/%Y/%m/%d')
  </code></pre>
  
  <p><strong>admin.py</strong></p>
  
  <pre><code>class BGImagesAdmin(admin.ModelAdmin):
      list_display = ['image1', 'image2', 'image3']
  
  admin.site.register(BGImagesModel, BGImagesAdmin)
  </code></pre>
  
  <p><strong>url.py</strong></p>
  
  <pre><code>urlpatterns = [
      url(r"^$", "bg_images.views.images", name="images"),
  ]
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def images(request):
      context = {'context_images': BGImagesModel.objects.all()}
      return render(request, 'index.html', context)
  </code></pre>
  
  <p>.html file is the following one. There are 3 main divs' for the images: the first one, where I tried to add an image via admin panel, just doesn't produce any image. The result is - empty. The second one and the third one (where images are hard-coded) do their job perfectly. </p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>        &lt;div class="carousel-inner"&gt;
  
              &lt;!-- The first background image via admin panel--&gt;
              &lt;div class="active item one"&gt;
                  {% for image in context_images %}
                  &lt;div class="fill"&gt;
                      &lt;div&gt;
                          &lt;img src="{{ image.image1.url }}" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% endfor %}
              &lt;/div&gt;
  
              &lt;!-- The second background image using inline CSS --&gt;
              &lt;div class="item two"&gt;
                  &lt;div class="fill" style="background-image:url({% static 'img/2nd.jpg' %});"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- The third background image using inline CSS --&gt;
              &lt;div class="item three"&gt;
                  &lt;div class="fill" style="background-image:url({% static 'img/3rd.jpg' %});"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>I've tried to find answer in the internet looking for the similar topics but didn't manage to do this. </p>
  
  <p>One more time about the problem issue: having a try to add an image to the bootstrap carousel via website admin panel fails. An empty slide appears.</p>
  
  <p>I would be really thankful for your help! </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>If I change my <strong>index.html</strong> like:</p>
  
  <pre><code>&lt;!-- The first background image via admin panel--&gt;
  &lt;div class="active item one"&gt;
      &lt;div class="fill"&gt;
          &lt;div&gt;
              &lt;img src="{{ context_images.image1.url }}" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>then I get an empty page as well BUT with an icon of broken image in the upper-left part of the window. Using Firebug gives the following:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img src=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is no queryset in the <code>&lt;img src=""&gt;</code>. What the reason may it be?</p>