Entity images + Blobstore

Question

I'm quite confused about how the Blobstore works alongside serving images per entity.

So let's say I have:

class Book(ndb.Model):
    title = ndb.StringProperty()
    cover_image = ndb.BlobProperty()

How can I output this information in a jinja2 template, like this:

<h1>{{title}}</h1>
{{cover_image}}

My confusion stems from my being unclear about how the Blobstore and the datastore works together. For example: How do we relate a datastore's entity to a Blobstore property (in our example, it would be relating the the cover_image blobproperty to its Book entity)?

A simplified explanation would be much appreciated. Thank you.

Answer 1

What you are looking for is get_serving_url(blob_key, size=None, crop=False, secure_url=None)

Try this method on the blob and you will get an image url.

Docs

You upload the blob and you get a blobkey that you store. Imagine it like another entity's key. Then having that key you use the get_serving url and several other functions in order to serve a url, resize etc.

Answer 2

You can just use a BlobKeyProperty in your model to maintain a reference between the datastore and the blobstore. For example:

class MyContent (ndb.Model):
    Image = ndb.BlobKeyProperty()

Then, if you need to frequently get the associated URL you can even also store the serving URL:

class MyContent (ndb.Model):
    Image = ndb.BlobKeyProperty()
    ImageServingURL = ndb.StringProperty()

Answer 3

You can create a different handler for getting the images. The way you do that depends on the framework used. Pyramid example (without try and excepts):

#handler /{bookid}/coverimage
def RenderImage(request):
  book_key = request.matchdict['bookid']
  book = Key(urlsafe=book_key}.get()
  cover = book.cover_image
  #optional rezising:
  cover = images.resize(cover, WIDTH, HEIGHT) #or other image operations

  response = Response(content_type="image/jpeg")
                    response.body = cover
                    return response

In your template:

<img src="/{{book.key.urlsafe()}}/coverimage" />

Note: you can do a generic image handler for any image property, not only 'cover_image'