Hacking DPLA at TCDL

As part of the Hacking DPLA at TCDL event scheduled for April 27, 2014, I’m developing a tutorial for using the DPLA API. I’m starting with the DPLA Search Widget developed by Dean Farrell and Josh Wilson.

This widget, a WordPress plugin, allows a website visitor to enter one or more keywords and perform a search. The visitor is then taken to the DPLA site, where the search results are displayed.

The widget is great, as far as it goes. It is particularly nice in that people do not have to request an API key to use the widget. Although the basic download is in the form of a WordPress plugin, the code can also be used in a straight HTML environment. Users just need to insert a different chunk of code on their webpage:

<script src="http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget.js"></script>
<div id="dpla_search_widget"></div>

The first line would usually go in the <head> area, as per the instructions at http://dp.la/info/dpla-search-widget-for-your-website/, but it works if it’s in the <body>, which might be easier for people using content management systems.

However, there are a few limitations that I have noted:

  1. Minor quibble, but I don’t like the search button, which has white text in a light gray button on my site. I’d also like the input area to be a bit wider, so it doesn’t look quite so squished.
  2. I don’t want visitors to leave my site. It would be better if the results were returned in a page that has the look and feel of my site. Barring that, I’d at least want the results to appear in a new tab or page, rather than in the same page.
  3. Advanced search. I can’t help it, I’m a librarian. I want to be able to limit my search to words in a title, or to authors, or even to known items. The DPLA site doesn’t allow advanced search, either, but the API does. Hmmm.
  4. This is a WordPress plugin. I need to examine the code to see whether it can be used nicely outside of WordPress.

So, I have a few tasks. First up, I want to examine the code. To do that, I go to the GitHub site for the plugin, https://github.com/lfarrell/Wordpress-DPLA-Search-Widget-Plugin, and download the code. The package is pretty simple; it consists of an image of the DPLA logo, a readme file, and a PHP file with the following code:

<?php
/*
Plugin Name: DPLA Search Widget
Plugin URI: https://github.com/lfarrell/Wordpress-DPLA-Search-Widget-Plugin
Description: Plugin for displaying a search form to search the Digital Public Library of America
Author: Dean Farrell
Version: 0.1
Author URI: https://github.com/lfarrell/Wordpress-DPLA-Search-Widget-Plugin
*/

function dpla_search_widget_load() {
 wp_register_script('add-dpla-widget-js', 'http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget.js', '', null,'');
 wp_enqueue_script('add-dpla-widget-js');

add_action( 'wp_enqueue_scripts', 'dpla_search_widget_load');

Hmmm. To dig a bit more deeply into this, I check out http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget.js:

var DPLAWidgetConfig = {
            css_href: 'http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget.css',
            dpla_logo: 'http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget-logo.png'
};


;(window.onload = function() {
    var css = document.createElement('link');
    css.href = DPLAWidgetConfig.css_href;
    css.type = 'text/css';
    css.rel = 'stylesheet';

    var headTag = document.getElementsByTagName('head')[0];
    headTag.appendChild(css);

    var widgetImg = document.createElement('img');
    widgetImg.src = DPLAWidgetConfig.dpla_logo;
    widgetImg.title = 'Search the DPLA!';
    widgetImg.alt = 'Search the DPLA!';

    var form = document.createElement('form');
    form.method = 'get';
    form.action = 'http://dp.la/search';
    form.name = 'dpla_search_widget';

    var widgetInputDiv = document.createElement('div');
    widgetInputDiv.id = 'dpla-form-input';
    
    var search = document.createElement('input');
    search.type = 'text';
    search.placeholder = 'Search the DPLA!';
    search.name = 'q';
          
    var submit = document.createElement('input');
    submit.type = 'submit';
    submit.value = 'Search';

    form.appendChild(widgetImg); 
    form.appendChild(search);
    form.appendChild(submit);

    var search_div = document.getElementById("dpla_search_widget");

    search_div.appendChild(form);
})();

Okay, there’s stuff going on here that I can work with. I’ll take these in order, as I numbered them above.

  1.  I note that there’s a CSS file that probably controls the color of the button. Let me take a look at that.
#dpla_search_widget {
  background-color: #FFFFFF;
  padding: 5px 5px 10px;
  margin: 3px;
  width: 200px;    
  height: 80px;
  text-align:left;
}

#dpla_search_widget,
#dpla_search_widget input[type=text],
#dpla_search_widget input[type=submit] {    
    border: 1px solid #739AAE;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    vertical-align: bottom;    
    font-family: 'source_sans_pro_semiboldRg',arial,sans-serif;        
    font-size: 12px;
    font-weight: normal;    
}

#dpla_search_widget img {
  float:none !important;
  position: relative !important;
  box-shadow: none !important;
}

#dpla_search_widget form {  
    margin: 0;
    padding: 0 0 5px 5px;
}

#dpla_search_widget input[type=text] {
    color: #818285;
    width: 110px !important;    
    padding: 0 0 0 10px;  
    height: 25px;    
}

#dpla_search_widget input[type=submit] {
    cursor: pointer;
    color: white;
    background-color: #739AAE;
    margin-left: 5px;
    width: 60px;
    height: 25px;    
}

Yep, I see that the CSS for #dpla_search_widget input requests a background color of #739AAE, but for some reason that isn’t rendering correctly on my site. Probably it conflicts with my CSS. For a simple fix, I’ll just leave the background color as is and change the text to the same gray used in the input area (#818285). I can also increase the width to 120px, but then I’ll have to increase the width of the whole widget a little bit, as well.

  1. Going back to the JavaScript file, I see that the form is created at var form = document.createElement('form'); using a get method. I can try adding form.target = '_blank'; here. Because the widget as it stands is just sending people to the DPLA site, there’s no way to get my preferred behavior, which would be to have the results appear on my site.
  1. Advanced search. Okay, again I don’t think there’s any way to solve this without going to the API.

To test this, I need to do three things:

  1.  Save the code to text documents that I can edit, and then upload the new code to my site. http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget.js becomes https://www.dcplumer.com/dpla/dpla-search-widget-dcplumer.js, and http://dp.la/info/wp-content/uploads/2013/12/dpla-search-widget.css becomes https://www.dcplumer.com/dpla/dpla-search-widget-dcplumer.css.
  2. Create an HTML page to test the results. You can see this at https://www.dcplumer.com/dpla/dpla-search-widget-dcplumer.html (the original version is available at https://www.dcplumer.com/dpla/dpla-search-widget-original.html).
  3. Once I’m happy with the results, modify the plugin for my site to use my version in WordPress. And here it is:

Next up: working with the API. I hope this whets your appetite for more! If so, please join us at the Hacking DPLA at TCDL event on Sunday, April 27, 2014, at the UT Austin, Perry-Castañeda Library, 1.124.

About

I am an independent digital collections and library technology consultant in Austin, TX.

Leave a Reply