Step 2 - Climbing the ladder...
# Monday, November 5, 2012

This script is for anyone who has ever wanted to display their latest art submission from their deviantART gallery. I was surprised to see next to no one appeared to have attempted this or at least if they had it wasn't packaged up into a succint scriptlet that users could easily drag and drop into their sites or blogs.

So here I offer Keratin, a simple to use widget that will pull the thumbnail of the latest deviation from the supplied gallery and display it as a link for users to click through to the full view on deviantART.

How it works

The code makes use of JQuery, and at the time of writing it was working against version 1.5. It also uses Google's feed API to convert the feed into a JSON object for convenient parsing. Once the feed has been parsed, the HTML element's required to render the images are then appended to the element specified.

Example

I've tried to make the below three steps as easy to follow as possible but if I've missed anything out or could explain things a little better, please let me know in the comments.

Step 1. References

As this code makes extensive use of JQuery, the first thing you'll need to do is include a reference to the JQuery library along with the rest of your Javascript includes (probably somewhere in the tag).

    

Here I'm using the hosted (Google) version of JQuery but feel free to use another.

Step 2. Javascript

Once JQuery is referenced, add the following Javascript to get the keratin code working.

function keratin_callback(elem, data)
{
    if (!data
        || !data.entries
        || data.entries.length < 1
        || !data.entries[0].mediaGroups
        || data.entries[0].mediaGroups.length < 1
        || !data.entries[0].mediaGroups[0].contents
        || data.entries[0].mediaGroups[0].contents.length < 1
        || !data.entries[0].mediaGroups[0].contents[0].thumbnails
        || data.entries[0].mediaGroups[0].contents[0].thumbnails.length < 1) {
      $("Data returned from feed not in expected format.").appendTo(elem);
      return;
    }

    var entry = data.entries[0];
    $("").attr("src", entry.mediaGroups[0].contents[0].thumbnails[0].url)
               .appendTo(elem)
               .wrap("<a href='" + entry.link + "' title='Title: " + entry.title + "\nPublished: " + entry.publishedDate + "' rel='related' target='_blank'>");
}

function keratin(elem, url)
{
    //keratin written by adam james naylor - www.adamjamesnaylor.com
    if (!elem || elem.length < 1) return; //no element found
    $.ajax({
        //you could use document.location.protocol on the below line if your site uses HTTPS
        url: 'http:' + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url + '&cache=' + Date.UTC()),
        dataType: 'json',
        success: function(data) {
            if (!data || !data.responseData) {
                return keratin_callback(elem, null);
            }
            return keratin_callback(elem, data.responseData.feed);
        }
    });
}

$(document).ready(function() {
    keratin($('#da_gallery'), 'http://backend.deviantart.com/rss.xml?q=gallery%3Adeusuk%2F28671222&type=deviation')
});

So this consists of the call into the keratin() function (from $(document).ready but you can execute this whenever is appropriate) specifying the element to append to and the URL of the deviantART gallery to pull, and the two functions used by the script keratin() and keratin_callback().

keratin makes the async call to the google feed API and once a response is retrieved it is passed into keratin_callback() to be processed.

Step 3. Html

    
   <a href="http://www.adamjamesnaylor.com/2012/11/05/Keratin-DeviantART-Latest-Deviation-Widget.aspx" rel="related" title="Keratin widget writen by Adam Naylor">Keratin

If you'd prefer not to use a div you can change the above html and amend the JQuery selector inside the Javascript to pick up the change.

Demo

You can see a customisation of this script on the right hand side of this blog. But in case I ever move it or things go wrong here's a quick screen shot of what it could look like:

Licence

This code is completely free to use. The only thing I ask is that you leave the link back to this page in place or make a small contribution if you appreciate the work I put in.

Recent posts

Monday, November 5, 2012 9:26:52 AM (GMT Standard Time, UTC+00:00)  #    Comments [0]

Posted under: CGI | Programming by

My latest artwork
View my entire gallery.
Archive
<November 2012>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
About the author/Disclaimer

Disclaimer
The opinions expressed herein are the personal opinions of Adam Naylor and do not represent my current or previous employer's view in any way.

© Copyright 2014
Adam Naylor
Statistics
Total Posts: 55
This Year: 0
This Month: 0
This Week: 0
Comments: 8
Creative Commons Licence
© 2014, Adam Naylor