How do you access and display Cloudinary uploaded image in Django template

Question

Using Framework: Django 1.9 Language: Python 3.4 Development Server: Django OS: Windows 10

I am still a relative newbie to creating websites. I've been using django to learn. Now, I have run into a problem involving Cloudinary. I have a template that needs to retrieve and display an image from Cloudinary. However, when I use the Cloudinary template tag, displays the image url, but not the image. I need to display the image.

Can someone please help?

Models:

from django.db import models
from cloudinary.models import CloudinaryField

from django.core.urlresolvers import reverse

class PostQuerySet(models.QuerySet):
    def published(self):
        return self.filter(publish=True)

class HeroImage(models.Model):
    image = CloudinaryField('image')
    title = models.CharField(max_length=200, default='')

    def __str__(self):
        return self.title

class Tag(models.Model):
    slug = models.SlugField(max_length=200, unique=True)

    def __str__(self):
        return self.slug

class Post(models.Model):

    STATUS_CHOICES = (
        ('d', 'Draft'),
        ('c', 'Complete'),
        ('r', 'Review'),
        ('p', 'Published'),
        ('w', 'Withdrawn'),
    )

    FACEBOOK_CHOICES = (
        ('web', 'website'),
        ('art', 'article'),
        ('blg', 'blog'),
        ('vid', 'video'),
        ('aud', 'audio'),
    )
    hero_image = models.ForeignKey(HeroImage)
    tag = models.ManyToManyField(Tag)
    featured_image = CloudinaryField('image', default='')
    page_title = models.CharField(max_length=70, default='')
    page_description = models.CharField(max_length=155, default='')
    canonical = models.URLField(default='')
    situation = models.TextField()
    breakdown = models.TextField()
    review = models.TextField()
    slug = models.SlugField(max_length=200, unique=True, default='')
    publish = models.BooleanField(default=False)
    created = models.DateTimeField(auto_now_add=True)
    modified = models.DateTimeField(auto_now=True)
    status = models.CharField(max_length=1, choices=STATUS_CHOICES, default='')
    og_title = models.CharField(max_length=88, default='')
    og_type = models.CharField(max_length=3, choices=FACEBOOK_CHOICES, default='')
    og_description = models.CharField(max_length=200, default='')
    og_url = models.URLField(default='')

    objects = PostQuerySet.as_manager() 

    def __str__(self):
        return self.page_title

    def get_absolute_url(self):
        return reverse("post_detail", kwargs={"slug": self.slug})

    class Meta:
        verbose_name = "Post"
        verbose_name_plural = "Posts"
        ordering = ["-created"]

Views:

from django.shortcuts import render, get_object_or_404
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from django.views import generic

from django import forms

from django.http import HttpResponse

from cloudinary.forms import cl_init_js_callbacks  

from . import models 

class PostIndex(generic.ListView):
    queryset = models.Post.objects.published()
    template_name = 'index.html'

class PostDetail(generic.DetailView):
    model = models.Post
    template_name = "post.html"

Templates:

index.html

{% block blog_posts %}
{% for object in object_list %}
{% load cloudinary %}
  <div class="post">
    <h2>{{ object.page_title }}</h2>
    {% cloudinary "shq7cw9kjufj8zhj1rni.png" %}
    <p class="meta">{{ object.created }}</p>
    {{ object.situation }}
  </div>
{% endfor %}
{% endblock %}

post.html

<div class="post">
    <h2><a href="{% url "post_detail" slug=object.slug %}">{{ object.title }}</a></h2>
    <p class="meta">
        {{ object.created }} | Tagged under {{  object.tags.all|join:", " }}
    </p>
    <div>
        {{ object.situation }}
    </div>
    <div>
        {{ object.breakdown }}
    </div>
    <div>
        {{ object.review }}
    </div>
</div>

Answer 1

You can try clicking on the link to see weather it takes you that image or not. Or check for the name that the image is saved with, sometimes they differ. This site has detailed instructions http://cloudinary.com/documentation/django_integration