2

I have the following problem:

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:

model.py

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')

admin.py

class BGImagesAdmin(admin.ModelAdmin):
    list_display = ['image1', 'image2', 'image3']

admin.site.register(BGImagesModel, BGImagesAdmin)

url.py

urlpatterns = [
    url(r"^$", "bg_images.views.images", name="images"),
]

views.py

def images(request):
    context = {'context_images': BGImagesModel.objects.all()}
    return render(request, 'index.html', context)

.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.

index.html

        <div class="carousel-inner">

            <!-- The first background image via admin panel-->
            <div class="active item one">
                {% for image in context_images %}
                <div class="fill">
                    <div>
                        <img src="{{ image.image1.url }}" />
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- The second background image using inline CSS -->
            <div class="item two">
                <div class="fill" style="background-image:url({% static 'img/2nd.jpg' %});"></div>
            </div>

            <!-- The third background image using inline CSS -->
            <div class="item three">
                <div class="fill" style="background-image:url({% static 'img/3rd.jpg' %});"></div>
            </div>

        </div>

I've tried to find answer in the internet looking for the similar topics but didn't manage to do this.

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.

I would be really thankful for your help!

UPDATE

If I change my index.html like:

<!-- The first background image via admin panel-->
<div class="active item one">
    <div class="fill">
        <div>
            <img src="{{ context_images.image1.url }}" />
        </div>
    </div>
 </div>

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:

<div>
    <img src="">
</div>

There is no queryset in the <img src="">. What the reason may it be?

Moveton
  • 253
  • 2
  • 12
  • what is the resulting html? – Håken Lid Feb 11 '16 at 08:53
  • @HåkenLid, the one, presented above. That is what I have for now. – Moveton Feb 11 '16 at 10:44
  • What is the output of that template? – Håken Lid Feb 11 '16 at 11:34
  • @HåkenLid, the output is an empty place where this image had to be. Or I don't understand you question correctly? – Moveton Feb 11 '16 at 20:17
  • the html output. What is the rendered content of this div `
    `
     – Håken Lid Feb 11 '16 at 20:23
  • @HåkenLid, it is just a white page and nothing more. Another 2 images (which are hard-coded) change each other every 5 seconds (I used JS for this purpose) but when time of the image1 comes - it is only a white page. By the way, I have updated my explanation (kindly look at it), maybe it could help somehow.. – Moveton Feb 11 '16 at 20:27
  • The change you made to the template does not make any sense. What is the rendered html output of the original template? Are you sure that the BGImagesModel instances you are passing in actually has content in `image1` and that `image.image1.url` is a proper url that the browser can reach. – Håken Lid Feb 12 '16 at 11:05
  • @HåkenLid, it looks like I cannot understand "rendered html output". As I do understand, rendered html output is a white background space. If I use a hard-code, I get an image but in this particular event (downloading via admin panel) I get a white background instead of the image. As fo the BGImagesModel, yes, it has content in image1 (I've checked it in the media folder and admin panel). As for the url.. I cannot say "I am sure" but I have no other idea. – Moveton Feb 12 '16 at 11:10
  • The meaning of template rendering is explained here https://docs.djangoproject.com/en/1.9/topics/templates/# So part of the rendered html output could be something like this `
    `     – Håken Lid Feb 12 '16 at 11:20
  • @HåkenLid, oh, I am so sorry for being a dummy..) I will figure it out in 8 or 9 hours (now have no access for this project), ok? The second variant renders '
    ' but have already told this is a senseless realisation.     – Moveton Feb 12 '16 at 11:25
  • In the second case it's because `context_images` is a queryset and it doesn't have an attribute called `image1`. In the first example you access `BGImagesModel.image1.url`, which should be a valid attribute name. But it might still return an empty string or a url that your browser can't find. – Håken Lid Feb 12 '16 at 11:33
  • @HåkenLid, thank you for your explanation, it makes more sense than reading pages of manuals) As for the render, that's what I have -
    - it looks like everything that is inside the for-loop doesn't appear (I used Firebug). Smth wrong with url?     – Moveton Feb 12 '16 at 20:02
  • If BGImagesModel.objects.all() is empty you would get that result, since the for loop doesn't have anything to loop over. – Håken Lid Feb 12 '16 at 23:34
  • @HåkenLid, you were right, it looks like BGImagesModel.objects.all() is empty (I used {% if %} and {% else %} to figure it out). But I cannot understand, why. BGImagesModel has 3 fields: image1, image2, image3. I have uploaded an image to the image1 via admin panel and I can see it in the media folder and in the admin panel. Could you please give an advise? – Moveton Feb 13 '16 at 20:23

0 Answers0