Base64 Image As Thumbnail

Dev Community Dev/API Corner
1
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
2

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





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

3

I think you can do it like so:



	oc.add(DirectoryObject(<br />
		key = Callback(...),<br />
		title = title,<br />
		thumb = Callback(GetThumb, url=url)<br />
	))<br />
<br />
# ...<br />
<br />
def GetThumb(url):<br />
<br />
	try:<br />
		# Lookup the image data (via an xpath query in this example)<br />
		base64_img = HTML.ElementFromURL(url).xpath('//img/@data-image')[0]<br />
		# Decode the base64 data. String.Decode is a framework function: http://dev.plexapp.com/docs/api/utilkit.html?highlight=base64#String.Decode<br />
		decoded_image = String.Decode(base64_img)<br />
		# Return the image as a DataObject<br />
		return DataObject(decoded_image, 'image/jpeg')<br />
	except:<br />
		# If anything fails, return the default icon<br />
		return Redirect(R('icon-default.png'))<br />
4

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 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
5

Hello Max!



My example contained an error, sorry about that! Here is the example code again (fixed) with your demo url and pizza image:


<br />
    oc.add(DirectoryObject(<br />
        key = Callback(...),<br />
        title = 'Delicious Pizza',<br />
        thumb = Callback(GetThumb, url='http://thorsonmscott.com/base/index.html')<br />
    ))<br />
<br />
# ...<br />
<br />
def GetThumb(url):<br />
<br />
    try:<br />
        # Lookup the image src (via an xpath query in this example)<br />
        base64_img_src = HTML.ElementFromURL(url).xpath('/div/img/@src')[0]<br />
<br />
        # The img src attribute contains the base64 encoded data, but it also contains the text 'data:image/jpeg;base64', which we don't need.<br />
        base64_img_data = base64_img_src.split(',')[-1]<br />
<br />
        # Decode the base64 data. String.Decode is a framework function: http://dev.plexapp.com/docs/api/utilkit.html?highlight=base64#String.Decode<br />
        decoded_image = String.Decode(base64_img_data)<br />
<br />
        # Return the image as a DataObject<br />
        return DataObject(decoded_image, 'image/jpeg')<br />
<br />
    except:<br />
        # If anything fails, return the default icon<br />
        return Redirect(R('icon-default.png'))<br />
6

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?

7

Ok, I feel like i’m making progress, but still not getting the results I’m hoping for. In your latest example:


oc.add(DirectoryObject(<br />
        key = Callback(...),<br />
        title = 'Delicious Pizza',<br />
        thumb = Callback(GetThumb, url='http://thorsonmscott.com/base/index.html')<br />
    ))


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...
8

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.