Home > Uncategorized > #Unsplash #API using C#

#Unsplash #API using C#

unsplashd

Unsplash is a great source of free photos, that you can use in your websites, and it also offers an API that allows you to integrate free image searches into your app. This might be an easy way to add a splash of colour to features that otherwise might just have a placeholder image.

In order to use their API, you need to register as a developer with them, then create an application, and with that you’ll get your access key and secret key. For this application, I’m only using the access key, since I’m only looking at public data.

So, for those who want to cut right to the code, here is the github repo: https://github.com/infiniteloopltd/unsplash and here is a demo http://unsplash.apixml.net/

The page is written in bootstrap and jquery, with the results rendered using Mustache. The magic happens with a call from the javascript to an ASPX page with this AJAX call;

function callAPI(searchTerm) {
    if (searchTerm === "") {
        bootbox.alert("Please enter a search term");
        return;
    }
    $("#btnSearch").addClass("disabled");
    console.log("searching: " + searchTerm);
    $.getJSON("/search.aspx?searchTerm=" + searchTerm,
        function (data) {
            $("#btnSearch").removeClass("disabled");
            if (data.results.length === 0) {
                bootbox.alert("Sorry, No Results");
            }
            var tpl = $("#tplItem").html();
            var strHtml = Mustache.render(tpl, data);
            $("#divResults").html(strHtml);
        });
}

Then we just proxy the call to the unsplash /search/photos API call as follows;

var searchTerm = Request.QueryString[“searchTerm”];
if (string.IsNullOrEmpty(searchTerm))
{
throw new Exception(“searchTerm is required”);
}
var strUrl = “https://api.unsplash.com/search/photos?”;
strUrl += “client_id=c9492064c857d14c8704afd5e85e22df1413d97f54002f62037313049395b3c9”;
strUrl += “&query=” + searchTerm;
/*
query Search terms.
page Page number to retrieve. (Optional; default: 1)
per_page Number of items per page. (Optional; default: 10)
collections Collection ID(‘s) to narrow search. If multiple, comma-separated.
orientation Filter search results by photo orientation. Valid values are landscape, portrait, and squarish.
*/
var wc = new WebClient();
var strJson = wc.DownloadString(strUrl);
Response.Write(strJson);

Once the json is back, we can render it with the following Mustache template

   {{#results}}
        <a href="{{urls.full}}" class="list-group-item" target="_blank">
            <img src="{{urls.thumb}}" style="width: 100px; height: 100px; padding-right:10px" >{{alt_description}}
            <span class="badge badge-dark">{{likes}} Likes</span>          
        </a>
        {{/results}}

 

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: