Django Getting Data From Foreign Key

Question

Im a newbie working on a news site (or at least trying to, a lot of "problems" in the last few days lol ) trying to learn Django the best I can.

This is what I want to do :

I have an Article Model, it used to have 6 image fields that I used to send to the template and render the images, each image field had its own name and all was well in the world. Then I got tasked with puting the Article images in a separate Image model. So I did this :

class Article(models.Model):
    title = models.CharField('title', max_length=200, blank=True)
    slug = AutoSlugField(populate_from='title', default="",
                         always_update=True, unique=True)
    author = models.CharField('Author', max_length=200, default="")
    description = models.TextField('Description', default="")
    is_published = models.BooleanField(default=False)
    article_text = models.TextField('Article text', default="")
    pub_date = models.DateTimeField(default=datetime.now, blank=True)
    article_category = models.ForeignKey(Category, on_delete="models.CASCADE", default="")

    def __str__(self):
        return self.title


class ArticleImages(models.Model):
    article = models.ForeignKey(Article, on_delete="models.CASCADE", related_name="image")
    image = models.ImageField("image")
    name = models.CharField(max_length=50, blank=True)

But so far I wasnt able to access my images in my template using

 {{ article.image.url }} or {{ article.image.image.url }}

or any other combination. Why is that ? Did I set up my models correctly ? One person suggested that I should change the model field from ForeignKey to OneToOneField, but I didn't get much feedback on why and how ?

So, how would I make a for loop that loops through the Articles model and then gets the related images for each Article ? I essentially want it to behave like I still have the 6 different fields like I did before. ( I have to do it this way, it's a part of the task ).

here are my views and my "index" template that I used to loop through the Articles and display 6 latest news on my home page. (please ignore the tags,I am aware they aren't working like this..the template is just so you can understand what I am talking about )

my views.py:

class IndexView(generic.ListView):

    template_name = 'news/index.html'
    context_object_name = 'latest_article_list'

    def get_queryset(self):
        return Article.objects.all()


class CategoryView(generic.ListView):

    template_name = 'news/categories.html'
    context_object_name = 'category'

    def get_queryset(self):
        return Article.objects.filter(article_category__category_title="Politics")


class ArticlesView(generic.ListView):
    context_object_name = 'latest_article_list'
    template_name = 'news/articles.html'
    paginate_by = 5

    def get_context_data(self, **kwargs):
        context = super(ArticlesView, self).get_context_data(**kwargs)
        context['categories'] = Category.objects.all()
        return context

    def get_queryset(self):
        category_pk = self.request.GET.get('pk', None)
        if category_pk:
            return Article.objects.filter(article_category__pk=category_pk).order_by("-pub_date")
        return Article.objects.order_by("-pub_date")


def article(request, article_id):

    article = get_object_or_404(Article, pk=article_id)
    context = {'article': article,
               'article_category': article.article_category.category_title}

    return render(request, 'news/article.html', context)

template that I used with my old model :

        {% for article in latest_article_list %}
        <img class="single-article-img" src="{{ article.image.name.url }}" alt="">

        <div class="container row">
          <!-- Start Left Blog -->
          <div class="article mt-10 col-md-4 col-sm-4 col-xs-12">
            <div class="single-blog" style="margin:10px auto;">
              <div class="single-blog-img">
                <a href="{% url 'news:article' article.id %}#article-title">
                  <img class="for-imgs" src="{{ article.image.url }}" alt="">
                </a>
              </div>
              <div class="blog-meta">

                <span class="date-type">
                  <i class="fa fa-calendar"></i>{{ article.pub_date }}
                </span>
              </div>
              <div class="xx blog-text">
                <h4>
                  <a href="{% url 'news:article' article.id %}#article-title">{{ article.title }}</a>
                </h4>
                <p>
                  {{ article.description|truncatewords:30 }}
                </p>
              </div>
              <span>
                <a href="{% url 'news:article' article.id %}" class="ready-btn">Read more</a>
              </span>
            </div>

          </div>
          {% endfor %}

Thank you !

Answer 1

You need to loop over the images as you have many images against a single article object. You can have something like below to show images in your template:

{% if latest_article_list.articleimages %}

   {% for articleimage in latest_article_list.articleimages.all %}

      <img src="{{ articleimage.image.url }}" class="d-block w-100" alt="...">

   {% endfor %}
{% endif %}