Using Google Images API in Looker

[sam8]

Adding images to your Looks and dashboards looks great, and is easy to do with the html LookML parameter. In this article we take things a step further by using Google’s API to perform image searches for us.

Why Do I Want This?

Adding dozens or even hundreds of image links manually can be quite tedious. Take for example this simple video game console lookup dashboard:

The underlying data set has 144 video game consoles and 96 console manufacturers. I’d rather not search for 240 images and write them into Looker. It would be so much nicer if I could write one definition in Looker and have Google search for an image based on the dimension value!

It’s worth noting here that there are certain websites that will do this for you, depending on your data. For example, if you have a dimension with Pokémon numbers, you could use an online Pokédex that takes in the numbers. The LookML might look like this:

  dimension: image {
    sql: CONCAT("https://assets.pokemon.com/assets/cms2/img/pokedex/full/", ${number}, ".png") ;;
    html: <img src='{{ value }}'> ;; }

If you don’t have such a website available, that’s OK! We can gather all the resources needed to run a Google image search from Looker in a few minutes and at no cost.

Sweet, How Do I Do This?

In order to to achieve this, we’ll take advantage of Google’s robust API offerings. First, we’ll build up an API call to get a link to our desired image, then we will take its JSON response and serve up an image.

The actual API call we’ll use in this example looks like this:
https://www.googleapis.com/customsearch/v1?q=[QUERY_PARAMETERS]&cx=[CUSTOM_SEARCH_ENGINE_ID]&searchType=image&key=[GOOGLE_API_KEY]&num=1&fields=items%2Flink

This endpoint will search for image results for the given query parameters, and return a link to the first image in a Google Image search. If you already have a custom search engine and Google API key, great! You can skip the next two parts.

Setting Up A Custom Search Engine

First we need a Google Custom Search Engine (CSE) to tell the API how it should search the web.

1. First go to the Google CSE setup page.
2. Choose any settings you want (we’ll overwrite them in a minute) and hit “Create”.
3. Click the third option, “Control Panel”.
4. Set “Image Search” to ON and set “Sites to search” to “Search the entire web”.
5. Click “Update” at the bottom.
6. Click “Details” > “Search Engine ID” to get the CSE ID that the API call needs. That’s all!

Getting A Google API Key

Next we need to get an API key from Google.

1. Go to the Google API console.
2. Click “Create Project” and give your project some name.
3. Click “Create Credentials” > “API Key”.
4. Now you have a key! Save it for later. We’ll enable it by going to the API dashboard and clicking “+ Enable API”.
5. You’ll be brought to a library of APIs. Type and select “Custom Search API” from the list.
6. If the dashboard shows “Disable” at the top you’re set! Otherwise click “Enable”.

Serving an Image

Now we have all the components to make our API call!

https://www.googleapis.com/customsearch/v1?q=[QUERY_PARAMETERS]&cx=[CUSTOM_SEARCH_ENGINE_ID]&searchType=image&key=[GOOGLE_API_KEY]&num=1&fields=items%2Flink

If you run this endpoint with the values filled in, you’ll get back a json blob with a link to your image.

The last step is to take that link and serve it up as an image. There are several ways to do this; I decided to write a simple php script and host it on a free Heroku instance (setup instructions here). If you’d like, you can see the script here:

PHP Script

<?php
//First set query parameters or fill with default
if(isset($_GET['q']))
  $q = urlencode($_GET['q']);
else
  $q = 'sandvich';

//Call the API with given query parameters
$response = file_get_contents('https://www.googleapis.com/customsearch/v1?q='.$q.'&cx=[CUSTOM_SEARCH_ENGINE_ID]&searchType=image&key=[GOOGLE_API_KEY]&num=1&fields=items%2Flink');

//Decode API response to get image URL
$url = (((json_decode($response))->items)[0])->link;

// Display the image
header('Content-type: image/png');
echo file_get_contents($url);
?>

This allows me to call the Heroku address with query parameters and get back an image. In my example, the LookML looks like this:

  dimension: console_image {
     sql: ${name} ;;
     html: <img src="http://[MY_HEROKU_INSTANCE].herokuapp.com/api.php?q={{value | url_param_escape }}"  />
      ;; }

Here name is the dimension that has the name of the video game console.

That’s all there is to it! Leave a comment if I can elaborate on any steps for you or if you’ve implemented something similar yourself!