djangoformset

Django Formset display currently images in BlogUpdate


i want to display currently images in BlogUpdate with custum label

how can i show blog related image in BlogUpdate

display currently images path with url

but not display currently images in img tag

i want to display currently images in blog_update.html

{{ img.media_files }} 
display currently images path

<img src="{{ img.media_files.url }}"> 
but not display currently images in img tag

forms.py

class BlogForm(forms.ModelForm):

    class Meta:
        model = Blog
        fields = ['title', 'text', ]

class BlogImagesForm(forms.ModelForm):

    class Meta:
        model = BlogImages
        fields = ['media_files', ]

    media_files = forms.ImageField(
        widget=forms.ClearableFileInput(attrs={'multiple': False,}))

BlogImagesFormSet = inlineformset_factory(
    Blog, BlogImages, form=BlogImagesForm,
    extra=6, max_num=6, can_delete=False, can_order=False
)

views.py

class BlogUpdate(LoginRequiredMixin, UpdateView):
    model = Blog
    form_class = BlogForm
    template_name = 'blog/blog_update.html'

    def get_context_data(self, **kwargs):
        data = super().get_context_data(**kwargs)
        if self.request.POST:
            data['images'] = BlogImagesFormSet(
                self.request.POST or None,
                self.request.FILES or None,
                instance=self.object
            )
        else:
            data['images'] = BlogImagesFormSet(instance=self.object)
        return data

    def form_valid(self, form):
        context = self.get_context_data()
        images = context['images']
        with transaction.atomic():
            form.instance.owner = self.request.user
            self.object = form.save()
            if images.is_valid():
                images.instance = self.object
                images.save()
        return super(BlogUpdate, self).form_valid(form)

blog_update.html

<form method="POST" enctype="multipart/form-data">
  <div class="girdbox">
    {% for img in images.forms %}
      <label for="{{ img.media_files.auto_id }}" class="blurfix">
        <img src="{{ img.media_files.url }}">
        <div style="padding-bottom: 50%;"></div>
      </label>
    {% endfor %}
  </div>
  {% csrf_token %}
  {{ form|crispy }}
  {{ images|crispy }}
  <button type="submit" class="btn btn-sm btn-primary w-100">
    Blog-update
  </button>
</form>

Solution

  • problem solved

    not worked

    <img src="{{ img.media_files.url }}">
    

    code updated to instance and worked

    <img src="{{ img.instance.media_files.url }}">
    

    full code

      <div class="girdbox">
        {% for img in images.forms %}
    
          {% if img.instance.media_files %}
            <label for="{{ img.media_files.auto_id }}" class="blurfix">
              <img src="{{ img.instance.media_files.url }}">
              <div style="padding-bottom: 50%;"></div>
            </label>
            {% else %}
            <label for="{{ img.media_files.auto_id }}" class="blurfix">
              <img src="/media/post.jpg" id="{{ img.media_files.auto_id }}Show">
              <div style="padding-bottom: 50%;"></div>
            </label>
          {% endif %}
    
        {% endfor %}
      </div>