CODEWITHSUNDEEP
djangopython-3.xdjango-models
Andy
Andy

Reputation: 429

Displaying images from ImageField

I try to display the same image of a coin in 2 sections of my site (a list of articles and a gallery of coins). The only difference (I guess) is that from the articles page I call it by a foreign key while from the gallery I call it directly.

The image is displayed in the article list but not in the gallery.

Here is some code:

the models:

# coinCollection/models.py:
class coin(models.Model):
    #...
    coin_thumbnail = models.ImageField(max_length=500, upload_to = join(MEDIA_IMAGES_DIR, MEDIA_COINS_DIR), verbose_name='Miniature')
    #...

# blog/models.py:
class article(models.Model):
    #...
    article_money = models.ForeignKey(coin,
        null = True,
        on_delete = models.SET_NULL,
        related_name="money"
    )

the views:

# coinCollection/views.py:
class coinGallery(ListView):
    model = coin
    template_name = 'coinsCollection/gallery.html'
    context_object_name = 'coins_list'

    def get_queryset(self):
        coin_list = coin.objects.values('id', 'coin_name', 'coin_millesime', 'coin_thumbnail').order_by('coin_name')

        paginator = Paginator(coin_list, 3) # Show n coins per page

        page = self.request.GET.get('page')
        try:
            coins = paginator.page(page)
        except PageNotAnInteger:
            coins = paginator.page(1)
        except EmptyPage:
            coins = paginator.page(paginator.num_pages)
        return coins

# blog/views.py
class IndexView(generic.ListView):
    template_name = 'blog/articles.html'
    context_object_name = 'article_list'

    def get_queryset(self):
        article_list = article.objects.order_by('-article_pub_date')
        paginator = Paginator(article_list, 3) # Show n articles per page

        page = self.request.GET.get('page')
        try:
            articles = paginator.page(page)
        except PageNotAnInteger:
            # If page is not an integer, deliver first page.
            articles = paginator.page(1)
        except EmptyPage:
            # If page is out of range, deliver last page of results.
            articles = paginator.page(paginator.num_pages)
        return articles

and in the templates :

# gallery.html (Not displayed, empty var)
<img class="img-responsive" src="{{ coin.coin_thumbnail.url }}" alt="{{ coin.coin_name }}">

# articles.html (Displayed correctly)
<img class="img-responsive" src="{{ article.article_money.coin_thumbnail.url }}">

Thanks by advance for your help.

Upvotes: 0

Views: 700

Answers (2)

birophilo
birophilo

Reputation: 962

In the coinGallery view, you've converted the queryset to values(). This turns the ImageFieldFile object 'coin_thumbnail' into its string representation, i.e. 'myimage.jpg', and you can't use Django's convenience attribute .url with it. To use the .url attribute, just use coin.objects.order_by() instead of coin.objects.values().order_by(). Or if you prefer values then you'll need to join the MEDIA_URL to the coin_thumbnail file name to get the complete file path.

Upvotes: 1

Deniz Kaplan
Deniz Kaplan

Reputation: 1609

values returns only the related path. Just use {{MEDIA_URL}}{{coin.coin_thumbnail}} on the template. (Beware of the appending slashes defined in your settings.py)

Upvotes: 1

Related Questions