# Base64 Image As Thumbnail **URL:** \ **Category:** Dev/API Corner\ **Tags:** plugin-dev\ **Created:** [January 14, 2013, 5:02am UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074 "2013-01-14T05:02:23Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![mst1228](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@mst1228](https://forums.plex.tv/u/mst1228)\ **Post date:** [January 14, 2013, 5:02am UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/1 "2013-01-14T05:02:23Z")
Is it possible? In the channel plugin i'm currently working on, there is an image I want to display as a thumbnail in a DirectoryObject. The src attribute of the image on the website i'm scraping content from has the base64 encoded image data instead of a url. I've tried just using the raw base64 data in the thumbnail property of my DirectoryObject, but it doesn't work. Does anyone know if it's going to be possible to display this image, or if i'm out of luck? Thanks a lot for any and all help. M ---
**Author:** ![Gerk](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/gerk/32/81980_2.png) [@Gerk](https://forums.plex.tv/u/Gerk)\ **Post date:** [January 14, 2013, 12:55pm UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/2 "2013-01-14T12:55:39Z")
There doesn’t seem to be anything within the channel framework to do this directly, but I suppose you could try to decode it with the python base64 lib. So something like: import base64 thumb=base64.b64decode(thumbdata) [http://docs.python.org/2/library/base64.html#base64.b64decode](http://docs.python.org/2/library/base64.html#base64.b64decode) The problem is then I’m not sure if DirectoryObject can handle passing the actual binary data or if it only works with a path (I’ve only ever used it with a path before). From what I just read here it doesn’t look like it: [http://dev.plexapp.com/docs/api/objectkit.html?highlight=directoryobject#PopupDirectoryObject.thumb](http://dev.plexapp.com/docs/api/objectkit.html?highlight=directoryobject#PopupDirectoryObject.thumb) ---
**Author:** ![sander1](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@sander1](https://forums.plex.tv/u/sander1)\ **Post date:** [January 14, 2013, 1:27pm UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/3 "2013-01-14T13:27:42Z")
I think you can do it like so: ```auto oc.add(DirectoryObject(
key = Callback(...),
title = title,
thumb = Callback(GetThumb, url=url)
))

# ...

def GetThumb(url):

try:
# Lookup the image data (via an xpath query in this example)
base64_img = HTML.ElementFromURL(url).xpath('//img/@data-image')[0]
# Decode the base64 data. String.Decode is a framework function: http://dev.plexapp.com/docs/api/utilkit.html?highlight=base64#String.Decode
decoded_image = String.Decode(base64_img)
# Return the image as a DataObject
return DataObject(decoded_image, 'image/jpeg')
except:
# If anything fails, return the default icon
return Redirect(R('icon-default.png'))
``` ---
**Author:** ![mst1228](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@mst1228](https://forums.plex.tv/u/mst1228)\ **Post date:** [January 22, 2013, 2:00am UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/4 "2013-01-22T02:00:14Z")
Hey. Getting back around to looking at this again, hoping you could break down your example a little bit. In your example, this line in particular confuses me: base64\_img = HTML.ElementFromURL(’//img/@data-image’)[0] Doesn’t HTML.ElementFromURL() need a URL? Or is HTML in this example storing a connection somehow from somewhere else? Also - you pass ‘url’ to your GetThumb(url) method, but i don’t see it being used anywhere else in the method. Hoping you could just help break it down a little and clear it up a bit. I have setup this URL for testing: [http://thorsonmscott.com/base/index.html](http://thorsonmscott.com/base/index.html) Index.html contains only a single ![]() element with a base64 encoded image of a delicious pizza. Maybe you could rewrite your example using that URL? EDIT: I wrapped the single ![]() element inside a for further testing, just a heads up. Any help would be awesome, i’d love to get this working. Thanks a TON. - Max ---
**Author:** ![sander1](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@sander1](https://forums.plex.tv/u/sander1)\ **Post date:** [January 22, 2013, 2:56pm UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/5 "2013-01-22T14:56:34Z")
Hello Max! My example contained an error, sorry about that! Here is the example code again (fixed) with your demo url and pizza image: ```auto
oc.add(DirectoryObject(
key = Callback(...),
title = 'Delicious Pizza',
thumb = Callback(GetThumb, url='http://thorsonmscott.com/base/index.html')
))

# ...

def GetThumb(url):

try:
# Lookup the image src (via an xpath query in this example)
base64_img_src = HTML.ElementFromURL(url).xpath('/div/img/@src')[0]

# The img src attribute contains the base64 encoded data, but it also contains the text 'data:image/jpeg;base64', which we don't need.
base64_img_data = base64_img_src.split(',')[-1]

# Decode the base64 data. String.Decode is a framework function: http://dev.plexapp.com/docs/api/utilkit.html?highlight=base64#String.Decode
decoded_image = String.Decode(base64_img_data)

# Return the image as a DataObject
return DataObject(decoded_image, 'image/jpeg')

except:
# If anything fails, return the default icon
return Redirect(R('icon-default.png'))
``` ---
**Author:** ![mst1228](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@mst1228](https://forums.plex.tv/u/mst1228)\ **Post date:** [January 24, 2013, 4:46pm UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/6 "2013-01-24T16:46:14Z")
Oh, awesome! Thanks so much for your reply. I’m going to give this a shot right now but the example looks like it’ll work. Thanks again, the help on this forum is always appreciated. EDIT: I just noticed that we’re both drinking out of mugs in our avatars… developers, am i right? ---
**Author:** ![mst1228](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@mst1228](https://forums.plex.tv/u/mst1228)\ **Post date:** [January 24, 2013, 6:46pm UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/7 "2013-01-24T18:46:05Z")
Ok, I feel like i’m making progress, but still not getting the results I’m hoping for. In your latest example: ```auto oc.add(DirectoryObject(
key = Callback(...),
title = 'Delicious Pizza',
thumb = Callback(GetThumb, url='http://thorsonmscott.com/base/index.html')
)) ``` The Callback for 'thumb' attribute is never getting called. I've got a bunch of logging going on in the callback, and with this setup, i never see those lines in the plugin log. I've tried some other things and can see my GetThumb function getting called, but some other errors happen in the process. I'm going to write a real quick example plugin to post here and hope you might be able to check it out, stay tuned... ---
**Author:** ![system](https://global.discourse-cdn.com/plex/original/3X/2/a/2acb9765406f63293d357b4ec509ec39aa28f2ad.png) [@system](https://forums.plex.tv/u/system)\ **Post date:** [December 20, 2019, 10:44pm UTC](https://forums.plex.tv/t/base64-image-as-thumbnail/27074/8 "2019-12-20T22:44:29Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.