In need of urgent help regarding dynamic image display v

[Aritra Ray]

Hi, 

I've been building a Django E-commerce website and I'm facing this problem.

I have created a Banner model which will take in images via django.ResizedImage and then display it in the homepage. But I'm unable to process them in CSS.

Kindly help me out.

PS: I'll have to process it as background-image orelse when passed as <img> in html, we're getting extra wrapped spaces which aren't needed.

Below given are: views.py, models.py, index.html, css block. 

Kindly help me out as it is urgent. Thank you for your support in advance.

Regards,

Aritra

class HomeView(ListView):
    context_object_name = 'items'
    template_name = "index.html"
    queryset = Items.objects.all()

    def get_context_data(self, **kwargs):
        context = super(HomeView, self).get_context_data(**kwargs)
        context['banners'] = Banner.objects.all()
        return context

class Banner(BaseModel):
    image = ResizedImageField(upload_to="banner", null=True, blank=True)
<div class="banner header-text">
    <div class="owl-banner owl-carousel">
      {% for banner in banners %}
        <div class="banner-item-01" style= --item: {{banner.image.url}}></div>
      {% endfor %}
    </div>
</div>
  .banner-item-01 {
   padding:300px 0px;
   background-size: cover;
   background-image: url(var(--item));
   background-repeat: no-repeat;
   background-position: center center;
}  

[Arjun Kumar]

Hi all,

Anyone having complete practical knowledge of Django. Kindly help me to do so.

Warm regards,

Arjun Kumar

Delhi, India

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAFecadvDi5V4%3DuetJhSZo1FSyOyGsvLH_s7K%2Bhc-vMLU%2BHLBpA%40mail.gmail.com.

[Ayush Bisht]

I think there is 2 method which you can do to get the work done. ...

1 : first one .. you can declare a property decorator which just return the url of that image 

 

          class Banner(BaseModel):
                image = ResizedImageField(upload_to="banner", null=True, blank=True)

                @property

                  def get_image_url(self):

                          return str(self.image.url).replace(" ", "")

 

and then you can simply access this function like normal attributes.. 

 <div class="owl-banner owl-carousel">
{% for banner in banners %}

<div class="banner-item-01" style= --item: {{banner.get_image_url}}></div>
{% endfor %}

............................

2 Method :  you can create a   root path for static files as well 

 

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]

now , with this root path I can access all the file belonging to that particular folder ........

folder structure ....... 

* static
       *Banner

             *banner1.jpg

now u can simply access all the stuff ...

.banner-item-01 {
padding:300px 0px;
background-size: cover;

background-image: url('/static/Banner/banner1.jpg');

background-repeat: no-repeat;
background-position: center center;

} 

[Aritra Ray]

Thank you, it worked.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/241a1f08-a093-4f3a-a01f-46e0a3e73ce1n%40googlegroups.com.