Throw a Tablet at It!

Libraries and academic institutions have been flooded with mobile devices over the past few years. We lend iPads, rove on our reference shifts, write tutorials on connecting to wireless networks in a dozen different operating systems, and perhaps even preside over one-to-one student-to-device programs.

However, there still seems to be confusion over what exactly tablets are good for. Amidst all the hype, I feel like we’re throwing them at some problems without answering fundamental questions first. What problems do they solve? Why would one choose a tablet over another type of computer? Some of these answers are straightforward, obvious even. Tablets have good battery life, they’re easier to carry around campus all day, especially if they can save you a textbook or two. They have great cameras. Most come with intuitive sharing facilities, making it easy to distribute materials in class.

But sometimes the affordances of a touch interface aren’t enough. So we add an USB keyboard, we add a mouse, we put the tablet in a cover to protect its exposed screen. And pretty soon we’ve got ourselves a laptop. A laptop with unpluggable parts, but a laptop nonetheless.

What’s Really Good

So what are good uses for tablets in the classroom? In my eyes, they center around two things: mobility and multimedia.

Tablets are clearly more mobile than laptops, even the lightest of which tend to be heavier and simply not designed for use on the go. Walking around campus with a Macbook Air and flipping it open every time you need to talk a picture with the webcam is not as easy as using a tablet with a camera on the backside. Most tablet operating systems are also getting better at hands-free usage, responding to voice input with technology like Siri and Google Now.

The applications of mobility in an educational setting are manifold. Starting with the obvious, many libraries have “scavenger hunt” activities which involve moving about the library and learning about different collections, service points, and study areas. Even if you don’t use an app like SCVNGR to run the activity, having a device with geolocation and a camera makes it easy to move from point-to-point and document progress. Given how labyrinthine many academic libraries are, particularly those with large stacks, a tablet could really help make a scavenger hunt less intimidating and more engaging.

At a community college, many of our courses are vocational in nature. These courses do not typically involve sitting in a lecture hall listening to your instructor, they are naturally suited to hands-on work in the field. Courses as varied as auto mechanics, criminal justice, ecology, and nursing could all benefit from mobile devices. Even typical uses, which don’t utilize purchased apps or unique hardware, could be easier with a lightweight computer, such as taking notes and looking up reference materials online.

Students in an ecology course can research local flora, looking up plant species while they’re far from campus. Criminal justice majors can document and investigate a fake crime scene. Nurses can refer to and ask for feedback on their treatment plans while making their rounds. Those latter two examples point to further advantages of tablets: they have great audio-video recording facilities and make sharing content very easy. Beyond just being mobile, tablet devices can help students create multimedia projects and share them to social media. They’re better suited to demonstrating metaliteracy.

This is Not a Pro-Tablets Post

Tablet computers have their uses in education. They are not, however, a panacea. There are many problems which they do not solve, and some which they exacerbate.

One of the most common, traditional uses of computers in academia is to create research papers. Unfortunately, tablets aren’t great for writing and researching in large quantities. Can they produce research papers? Absolutely, but long-form writing is one of the situations where one begins to turn a tablet into a laptop by adding a keyboard. One fights the tablet’s form rather than working with it.

While there are plenty of word processing apps available, they may not always work well with a school’s learning environment. Our instructors, for instance, mostly require papers in .rtf or .doc formats, which are only readily available on Windows tablets. This isn’t the tablets’ fault, but the uneven pace of technological development in academia (some professors leaping wholesale into multimedia assignments, others sticking with decades-old file formats) disadvantages newer devices. Vendor databases are also variable in how well they support smaller screens and touch-based interfaces.1 Finally, actually submitting an assignment to a Learning Management System is often difficult on mobile devices. Our LMS, which is quite modern in most respects, does not allow web uploads in Mobile Safari or Android Browser. It does have apps for both iOS and Android, but the app was read-only until recently and even now permits submissions only with the assistance of Dropbox.2

In sum, research papers present numerous obstacle for tablet devices. While none are insurmountable, the devices simply aren’t intended to produce research papers, at least not as much as traditional (laptop and desktop) computers. This isn’t a killer issue, and one which will no doubt improve over time. But tablet devices also pose larger questions about technology and learning which we need to at least be thinking about.

Human Rights

Mobile operating systems are remarkably stable. It’s perhaps sad that the first thing that really impressed me about iOS is that it just kept running. Open apps, leave them open, whatever, it doesn’t matter. The OS churns on.

But this stability comes at the cost of a lot of customizability. The reason why my Linux laptop occasionally become erratic is because I’ve told it to. I’ve installed a development version of the kernel, I’ve entered contradictory window manager configurations, I’ve deleted all my hardware drivers somehow. I have the freedom to be foolish.

Such complete control over a device, in the right hands, can offer privacy, a privacy that might be otherwise impossible to obtain. With companies like Apple and Google being complicit with the NSA’s survelliance, this poses a problem to libraries and other privacy advocates. Do we offer access to devices that are known to report their actions back to a corporate or governmental body? Or do we let users boot up a Tails instance and stay private? While surveillance may be unavoidable, Cory Doctorow is right to point out that this is a human rights issue. In an age where we do almost everything on our computers, locked-down devices offer some assurances at the expense of others. They run stable operating systems, but limit our ability to verify they haven’t been tampered with.

Starting people on devices whose only applications come from a corporate-controlled “app store” sets a precedent. If this is how people are first introduced to computers, it’s how many will assume they work. Apple has already tried to port its app store to the desktop, including setting a default to allow only apps installed from it. This may seem, ultimately, like a trite complaint. But Doctorow is right to extrapolate to equipment like cochlear implants; what happens when we don’t control the firmware on devices embedded in our own bodies? If a device matters to you, you should care about controlling what’s installed on it.

“But Android is open source!” And indeed, it is, though that somehow hasn’t stopped it from relying on multiple app stores with subtly different offerings (Google Play vs. Amazon Appstore on the Kindle Fire…why are there two corporate-controlled app stores for the same OS?). I feel like Android has been an open source OS that’s easy to corporations to customize on the locked-down devices they sell, but not so easy for users to truly takeover. Still, there’s hope here. CyanogenMod is a non-corporate version of Android which gives users far greater control than is available on other mobile operating systems. And rather recently, a CyanogenMod Installer appeared in the Google Play store, indicating that Google isn’t entirely opposed to giving users more freedom. Update: Google removed the CyanogenMod Installer app. So maybe they are opposed to giving users more freedom.

Too Easy to be True

I also can’t help but wonder: are we limiting people by providing all-too-easy devices? I cringe as I ask the question, because it recalls the ludicrous “discovery layers make research too easy and it should be hard” argument. Humor me a bit longer, however.

Much of my hesitancy with easy, touch-based devices comes from my own history with computers, where the deeper I’ve delved the more rewarded I’ve felt. I love the command line, an interface even less beginner-friendly than graphical desktop operating systems. I love the keyboard, too. Some keyboard shortcuts and a little muscle memory make me faster than any elaborate set of swipes could be. In fact, the lack of keyboard shortcuts and a command line is a big reason why I’m not a regular tablet user.3 I’ve grown to rely on it so much that going without just doesn’t make sense to me.

The point is: sometimes these difficult-to-learn interfaces have enormous power hidden beneath them. We’re sacrificing something by moving to an easier option, one which doesn’t offer power users a way around its limitations. Then again, just because a user employs a tablet for one activity doesn’t mean they’ll eschew laptops or desktops for everything else.4 The issue is more when tablets are presented as a replacement for more powerful computers; it’s valuable to make users understand that, in some circumstances, the level of control and customizability of a desktop OS is essential.

There’s No App for Futurity

The availability of apps is often cited as an advantage of mobile operating systems. But many apps offer no unique advantages over desktop computers; they perform the same functions but on a different device. Rather than monolithic desktop software packages like Microsoft Office or Creative Suite, consumers have a plethora of smaller, cheaper, more focused applications. The apps which do achieve things genuinely impossible or difficult on a desktop tend to engage with the two advantages of tablets I highlighted earlier, namely mobility (e.g. Foursquare, SCVNGR) and multimedia (video/audio recorders, from Vine to native Camera apps).

A recent LITA listserv discussion5 highlights the strawman “apps” argument. A few people noted the availability of apps on tablet computers, then proceeded to name a few common applications which are available on every major desktop operating system (not to mention free on the web). How does a dictionary or calculator suddenly become a competitive advantage when it’s on a tablet?

Take Evernote for example. Often cited as a must-have app, I feel like its primary appeal is solving a problem device ubiquity created. Taking notes and saving bits of content wasn’t much of a struggle before it involving syncing between so many devices. Evernote’s seamless cross-platform availability is what makes it so appealing, not that it reinvented annotation. Is it a great app for our modern age? Yes. Is it a killer app that makes you need an iPad? No. It’s an app you need if you have an iPad, not the other way around. Full disclosure: I never got into using Evernote, so this is an outsider’s take.

The distinction about which need comes first, tablet or app, is pivotal: mobile devices create needs even as they solve them. To return to keyboards again, why do we need them? To type on our tablets. Why did we need the tablets? So we can type everywhere we go. The cycle continues.

Folders

One metaphor that’s persisted since the dawn of graphical operating systems is that computer hard drives are like your filing cabinet: they have folders, inside those folders are files, files of different types.6 It’s very strange to me, having grown up thoroughly immersed in this metaphor, that mobile operating systems dispense with it. There are no more folders. There aren’t even files. There are only apps. The apps may conspire together, you may take a photo in one and edit it in another, but you may never interact with the photo itself outside of an app.

There is nothing essential about the filing cabinet metaphor. A different one could have become ubiquitous. It’s already verging on anachronism as digital “folders” overtake physical ones. So why do I feel like people should know what a folder is, and how to rename one, how to move it, how to organize one’s files? These are basic skills I instruct students on every day, yet perhaps they’ve simply grown unnecessary. Am I an old fogey for thinking that people need to understand file management? Does it matter anymore when we’ve outsourced our file systems to the cloud?

The Access Rainbow

Tablets aren’t bad devices. They’re easy to pick up, so easy a baby can do it. Their touch interfaces are not only novel but in some cases simply brilliant. Problems arise when we consider the tablet as a full-featured replacement for our other computers. And maybe they can be, but those are the scenarios where we start fighting the nature of the machine itself (attaching a keyboard, jailbreaking or rooting the device).

I’m giving a presentation at my college soon and one slide is devoted to “The Access Rainbow” mentioned in Andrew Clement and Leslie Shade’s chapter in an old Community Informatics textbook.7 The rainbow is rather like Maslow’s hierarchy of needs, in that it works from base, material needs to more sophisticated, social ones. Once we have network infrastructure in place, we can get devices. Once we have devices, we can put software on them. Once we have software, we can work. Once we can work, we can build things, we can connect with each other, we can affect governance.

The problem is when our devices limit the colors of the rainbow that are even visible. The upper tiers of the rainbow, the tiers that really matter, are foreclosed. We cannot participate in the governance of information and communication technologies when we buy devices that only install the software which Apple or Google approves. And can we be fully digitally literate if we can’t experiment and break things on our devices? We can’t break things on an iPad; the iPad has outlet covers on all its electrical sockets when what we really need is a shock.

I worry I’ve already grown old and stodgy. “The kids with their touchy screens and electronic throat tattoos,” I mutter, madly typing abbreviations into a bash prompt. Will we be OK with easy devices? Do we need to break things, to change the permissions on a file, to code to be digitally literate? I don’t know.

Notes

  1. Responsive interfaces for databases is one area which has seen massive improvement over the last couple years and probably won’t be a concern too much longer. With web-scale discovery systems, many libraries are just now becoming able to abstract the differences between databases into a single search platform. Then the discovery system just needs to be responsive, rather than each of the dozens of different vendor interfaces.
  2. So what if students need Dropbox, as long as it works? Well, forcing students into a particular cloud storage system is problematic. What if they prefer SpiderOak, Google Drive, SkyDrive, etc.? The lack of true file system access really hampers mobile devices in some situations, a point I’ll elaborate on further below.
  3. One of the interesting aspects of Microsoft tablets is that they do come with a command line; you can swipe around all you want, but then open up PowerShell and mess with the Windows Registry to your heart’s content. It’s interesting and has great potential. I know Android also has some terminal simulator apps.
  4. Hat-tip to fellow Tech Connect blogger Meghan Frazer for calling me out on this.
  5. “Classroom iPads” on 11/1/13. It’s worth noting that plenty of people in this discussion touched on precisely the topic of this post, that the advantages of tablets seems to be misunderstood.
  6. My wife points out that this isn’t a metaphor, that filesystems are literally that, filesystems. I can’t refute that claim. It’s either correct or an indication of just how ingrained the metaphor is.
  7. Despite being from 1999, Community Informatics by Michael Gurstein is still incredibly relevant. It blew my mind during my first semester of library school and validated my decision to attend. It’s probably the best textbook I’ve ever read, which isn’t high praise but it is praise.

#libtechgender: A Post in Two Parts

Conversations about gender relations, bias, and appropriate behavior have bubbled up all over the technology sector recently. We have seen conferences adopt codes of conduct that strive to create welcoming atmospheres. We have also seen cases of bias and harassment, cases that may once have been tolerated or ignored, now being identified and condemned. These conversations, like gender itself, are not simple or binary but being able to listen respectfully and talk honestly about uncomfortable topics offers hope that positive change is possible.

On October 28th Sarah Houghton, the director of the San Rafael Public Library, moderated a panel on gender in library technology at the Internet Librarian conference. In today’s post I’d like to share my small contributions to the panel discussion that day and also to share how my understanding of the issues changed after the discussion there. It is my hope that more conversations—more talking and more listening—about gender issue in library technology will be sparked from this start.

Part I: Internet Librarian Panel on Gender

Our panel’s intent was to invite librarians into a public conversation about gender issues. In the Internet Librarian program our invitation read:

Join us for a lively panel and audience discussion about the challenges of gender differences in technology librarianship. The topics of fairness and bias with both genders have appeared in articles, blogs, etc and this panel of women and men who work in libraries and gender studies briefly share personal experiences, then engage the audience about experiences and how best to increase understanding between the genders specifically in the area of technology work in librarianship. 1
Panelists: Sarah Houghton, Ryan Claringbole, Emily Clasper, Kate Kosturski, Lisa Rabey, John Bultena, Tatum Lindsay, and Nicholas Schiller

My invitation to participate on the stemmed from blog posts I wrote about how online conversations about gender issues can go off the rails and become disasters. I used my allotted time to share some simple suggestions I developed observing these conversations. Coming from my personal (white cis straight male) perspective, I paid attention to things that I and my male colleagues do and say that result in unintended offense, silencing, and anger in our female colleagues. By reverse engineering these conversational disasters, I attempted to learn from unfortunate mistakes and build better conversations. Assuming honest good intentions, following these suggestions can help us avoid contention and build more empathy and trust.

  1. Listen generously. Context and perspective are vital to these discussions. If we’re actively cultivating diverse perspectives then we are inviting ideas that conflict with our assumptions. It’s more effective to assume these ideas come from unfamiliar but valid contexts than to assume they are automatically unreasonable. By deferring judgement until after new ideas have been assimilated and understood we can avoid silencing voices that we need to hear.
  2. Defensive responses can be more harmful than offensive responses. No one likes to feel called on the carpet, but the instinctive responses we can give when we feel blamed or accused can be worse than simply giving offense. Defensive denials can lead to others feeling silenced, which is much more damaging and divisive than simple disagreement. It can be the difference between communicating  “you and I disagree on this matter” and communicating “you are wrong and don’t get a voice in this conversation.” That kind of silencing and exclusion can be worse than simply giving offense.
  3. It is okay to disagree or to be wrong. Conversations about gender are full of fear. People are afraid to speak up for fear of reprisal. People are afraid to say the wrong thing and be revealed as a secret misogynist. People are afraid. The good news is that conversations where all parties feel welcome, respected, and listened to can be healing. Because context and perspective matter so much in how we address issues, once we accept the contexts and perspectives of others, we are more likely to receive acceptance of our own perspectives and contexts. Given an environment of mutual respect and inclusion, we don’t need to be afraid of holding unpopular views. These are complex issues and once trust is established, complex positions are acceptable.

This is what I presented at the panel session and I still stand behind these suggestions. They can be useful tools for building better conversations between people with good intentions. Specifically, they can help men in our field avoid all-too-common barriers to productive conversation.

That day I listened and learned a lot from the audience and from my fellow panelists. I shifted my priorities. I still think cultivating better conversations is an important goal. I still want to learn how to be a better listener and colleague.  I think these are skills that don’t just happen, but need to be intentionally cultivated. That said, I came in to the panel believing that the most important gender related issue in library technology was finding ways for well-intentioned colleagues to communicate effectively about an uncomfortable problem. Listening to my colleagues tell their stories, I learned that there are more direct and pressing gender issues in libraries.

Part II: After the Panel

As I listened to my fellow panelists tell their stories and then as I listened to people in the audience share their experiences, no one else seemed particularly concerned about well-intentioned people having misunderstandings or about breakdowns in communication. Instead, they related a series of harrowing personal experiences where men (and women, but mostly men) were directly harassing, intentionally abusive, and strategically cruel in ways that are having a very large impact on the daily work, career paths, and the quality of life of my female colleagues. I assumed that since this kind of harassment clearly violates standard HR policies that the problem is adequately addressed by existing administrative policies. That assumption is incorrect.

It is easy to ignore what we don’t see and I don’t see harassment taking place in libraries and I don’t often hear it discussed. It has been easy to underestimate the prevalence and impact it has on many of my colleagues. Listening to librarians.

Then, after the conference one evening, a friend of mine was harassed on the street and I had another assumption challenged. It happened quickly, but a stranger on the street harassed my friend while I watched in stunned passivity. 2 I arrived at the conference feeling positive about my grasp of the issues and also feeling confident about my role as an ally. I left feeling shaken and doubting both my thoughts and my actions.

In response to the panel and its aftermath, I’ve composed three more points to reflect what I learned. These aren’t suggestions, like I brought to the panel, instead they are realizations or statements. I’m obviously not an expert on the topic and I’m not speaking from a seat of authority. I’m relating stories and experiences told by others and they tell them much better than I do. In the tradition of geeks and hackers now that I have learned something new I’m sharing it with the community in hopes that my experience moves the project forward. It is my hope that better informed and more experienced voices will take this conversation farther than I am able to. These three realizations may be obvious to some, because they were not obvious to me, it seems useful to clearly articulate them.

  1. Intentional and targeted harassment of women is a significant problem in the library technology field. While subtle micro aggressions, problem conversations, and colleagues who deny that significant gender issues exist in libraries are problematic, these issues are overshadowed by direct and intentional harassing behavior targeting gender identity or sex. The clear message I heard at the panel was that workplace harassment is a very real and very current threat to women working in library technology fields.
  2. This harassment is not visible to those not targeted by it. It is easy to ignore what we do not see. Responses to the panel included many library technology women sharing their experiences and commenting that it was good to hear others’ stories. Even though the experience of workplace harassment was common, those who spoke of it reported feelings of isolation. While legislation and human resources polices clearly state harassment is unacceptable and unlawful, it still happens and when it happens the target can be isolated by the experience. Those of us who participate in library conferences, journals, and online communities can help pierce this isolation by cultivating opportunities to talk about these issues openly and public. By publicly talking about gender issues, we can thwart isolation and make the problems more visible to those who are not direct targets of harassment.
  3. This is a cultural problem, not only an individual problem. While no one point on the gender spectrum has a monopoly on either perpetrating or being the target of workplace harassment, the predominant narrative in our panel discussion was men harassing women. Legally speaking, these need to be treated as individual acts, but as a profession, we can address the cultural aspects of the issue. Something in our library technology culture is fostering an environment where women are systematically exposed to bad behavior from men.

In the field of Library Technology, we spend a lot of our time and brain power intentionally designing user experiences and assessing how users interact with our designs. Because harassment of some of our own is pervasive and cultural, I suggest we turn the same attention and intentionality to designing a workplace culture that is responsive to the needs of all of us who work here. I look forward to reading conference presentations, journal articles, and online discussions where these problems are publicly identified and directly addressed rather than occurring in isolation or being ignored.

  1. infotoday.com/il2013/Monday.asp#TrackD
  2. I don’t advocate a macho confrontational response or take responsibility for the actions of others, but an ally has their friend’s back and that night I did not speak up.

Building a Dynamic Image Display with Drupal & Isotope

I am in love with Isotope.  It’s not often that you hear someone profess their love for a JQuery library (unless it’s this), but there it is.  I want to display everything in animated grids.

I also love Views Isotope, a Drupal 7 module that enabled me to create a dynamic image gallery for our school’s Year in Review.  This module (paired with a few others) is instrumental in building our new digital library.

yearinreview

In this blog post, I will walk you through how we created the Year in Review page, and how we plan to extrapolate the design to our collection views in the Knowlton Digital Library.  This post assumes you have some basic knowledge of Drupal, including an understanding of content types, taxonomy terms and how to install a module.

Year in Review Project

Our Year in Review project began over the summer, when our communications team expressed an interest in displaying the news stories from throughout the school year in an online, interactive display.  The designer on our team showed me several examples of card-like interfaces, emphasizing the importance of ease and clean graphics.  After some digging, I found Isotope, which appeared to be the exact solution we needed.  Isotope, according to its website, assists in creating “intelligent, dynamic layouts that can’t be achieved with CSS alone.”  This JQuery library provides for the display of items in a masonry or grid-type layout, augmented by filters and sorting options that move the items around the page.

At first, I was unsure we could make this library work with Drupal, the content management system we employ for our main web site and our digital library.  Fortunately I soon learned – as with many things in Drupal – there’s a module for that.  The Views Isotope module provides just the functionality we needed, with some tweaking, of course.

We set out to display a grid of images, each representing a news story from the year.  We wanted to allow users to filter those news stories based on each of the sections in our school: Architecture, Landscape Architecture and City and Regional Planning.  News stories might be relevant to one, two or all three disciplines.  The user can see the news story title by hovering over the image, and read more about the new story by clicking on the corresponding item in the grid.

Views Isotope Basics

Views Isotope is installed in the same way as other Drupal modules.  There is an example in the module and there are also videos linked from the main module page to help you implement this in Views.  (I found this video particularly helpful.)

You must have the following modules installed to use Views Isotope:

You also need to install the Isotope JQuery library.  It is important to note that Isotope is only free for non-commercial projects.  To install the library, download the package from the Isotope GitHub repository.  Unzip the package and copy the whole directory into your libraries directory.  Within your Drupal installation, this should be in the /sites/all/libraries folder.  Once the module and the library are both installed, you’re ready to start.

If you have used Drupal, you have likely used Views.  It is a very common way to query the underlying database in order to display content.The Views Isotope module provides additional View types: Isotope Grid, Isotope Filter Block and Isotope Sort Block.  These three view types combine to provide one display.  In my case, I have not yet implemented the Sort Block, so I won’t discuss it in detail here.

To build a new view, go to Structure > Views > Add a new view.  In our specific example, we’ll talk about the steps in more detail.  However, there’s a few important tenets of using Views Isotope, regardless of your setup:

  1. There is a grid.  The View type Isotope Grid powers the main display.
  2. The field on which we want to filter is included in the query that builds the grid, but a CSS class is applied which hides the filters from the grid display and shows them only as filters.
  3. The Isotope Filter Block drives the filter display.  Again, a CSS class is applied to the fields in the query to assign the appropriate display and functionality, instead of using default classes provided by Views.
  4. Frequently in Drupal, we are filtering on taxonomy terms.  It is important that when we display these items we do not link to the taxonomy term page, so that a click on a term filters the results instead of taking the user away from the page.

With those basic tenets in mind, let’s look at the specific process of building the Year in Review.

Building the Year in Review

Armed with the Views Isotope functionality, I started with our existing Digital Library Drupal 7 instance and one content type, Item.  Items are our primary content type and contain many, many fields, but here are the important ones for the Year in Review:

  • Title: text field containing the headline of the article
  • Description: text field containing the shortened article body
  • File: File field containing an image from the article
  • Item Class: A reference to a taxonomy term indicating if the item is from the school archives
  • Discipline: Another term reference field which ties the article to one or more of our disciplines: Architecture, Landscape Architecture or City and Regional Planning
  • Showcase: Boolean field which flags the article for inclusion in the Year in Review

The last field was essential so that the communications team liaison could curate the page.  There are more news articles in our school archives then we necessarily want to show in the Year in Review, and the showcase flag solves this problem.

In building our Views, we first wanted to pull all of the Items which have the following characteristics:

  • Item Class: School Archives
  • Showcase: True

So, we build a new View.  While logged in as administrator, we click on Structure, Views then Add a New View.  We want to show Content of type Item, and display an Isotope Grid of fields.  We do not want to use a pager.  In this demo, I’m going to build a Page View, but a Block works as well (as we will see later).  So my settings appear as follows:

GridSettings

Click on Continue & edit.  For the Year in Review we next needed to add our filters – for Item Class and Showcase.  Depending on your implementation, you may not need to filter the results, but likely you will want to narrow the results slightly.  Next to Filter Criteria, click on Add.

addclass0I first searched for Item Class, then clicked on Apply.

addclass1Next, I need to select a value for Item Class and click on Apply.

addclassI repeated the process with the Showcase field.

addshowcase

If you click Update Preview at the bottom of the View edit screen, you’ll see that much of the formatting is already done with just those steps.

preview1

Note that the formatting in the image above is helped along by some CSS.  To style the grid elements, the Views Isotope module contains its own CSS in the module folder ([drupal_install]/sites/all/modules/views_isotope).  You can move forward with this default display if it works for your site.  Or, you can override this in the site’s theme files, which is what I’ve done above.  In my theme CSS file, I have applied the following styling to the class “isotope-element”

.isotope-element {
    float: left;
    height: 140px;
    margin: 6px;
    overflow: hidden;
    position: relative;
    width: 180px;
}
I put the above code in my CSS file associated with my theme, and it overrides the default Views Isotope styling.  “isotope-element” is the class applied to the div which contains all the fields being displayed for each item.  Let’s add a few more items and see how the rendered HTML looks.
First, I want to add an image.  In my case, all of my files are fields of type File, and I handle the rendering through Media based on file type.  But you could use any image field, also.

addfile

I use the Rendered File Formatter and select the Grid View Mode, which applies an Image Style to the file, resizing it to 180 x 140.  Clicking Update Preview again shows that the image has been added each item.

imageAndtext

This is closer, but in our specific example, we want to hide the title until the user hovers over the item.  So, we need to add some CSS to the title field.

hidetitle

In my CSS file, I have the following:

.isotope-grid-text {
    background: none repeat scroll 0 0 #4D4D4F;
    height: 140px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
}

Note the opacity is 0 – which means the div is transparent, allowing the image to show through.  Then, I added a hover style which just changes the opacity to mostly cover the image:

.isotope-grid-text {
  opacity: 0.9;
}

Now, if we update preview, we should see the changes.

imagewhover

The last thing we need to do is add the Discipline field for each item so that we can filter.

There are two very important things here.  First, we want to make sure that the field is not formatted as a link to the term, so we select Plain text as the Formatter.

Second, we need to apply a CSS class here as well, so that the Discipline fields show in filters, not in the grid.  To do that, check the Customize field HTML and select the DIV element.  Then, select Create a class and enter “isotope-filter”.  Also, uncheck “Apply default classes.”  Click Apply.
addfilter1

Using Firebug, I can now look at the generated HTML from this View and see that isotope-element <div> contains all the fields for each item, though the isotope-filter class loads Discipline as hidden.

<div class="isotope-element landscape-architecture" data-category="landscape-architecture">
  <div class="views-field views-field-title"> (collapsed for brevity) </div>
  <div class="views-field views-field-field-file"> (collapsed for brevity) </div>
  <div>  
    <div class="isotope-filter">Landscape Architecture</div>
  </div>
</div>

You might also notice that the data-category for this element is assigned as landscape-architecture, which is our Discipline term for this item.  This data-category will drive the filters.

So, let’s save our View by clicking Save at the top and move on to create our filter block.  Create a new view, but this time create a block which displays taxonomy terms of type Discipline.  Then, click on Continue & Edit.

filterblockThe first thing we want to do is adjust view so that the default row wrappers are not applied.  Note: this is the part I ALWAYS forget, and then when my filters don’t work it takes me forever to track it down.

Click on Settings next to Fields.

fieldsettingsUncheck the Provide default field wrapper elements.  Click Apply.

fieldsettings2

Next, we do not want the fields to be links to term pages, because a user click should filter the results, not link back to the term.  So, click on the term name to edit that field.  Uncheck the box next to “Link this field to its taxonomy term page”.  Click on Apply.

term-nolink

Save the view.

The last thing is to make the block appear on the page with the grid.  In practice, Drupal administrators would use Panels or Context to accomplish this (we use Context), but it can also be done using the Blocks menu.

So, go to Structure, then click on Blocks.  Find our Isotope-Filter Demo block.  Because it’s a View, the title will begin with “View:”

blockname

Click Configure.  Set block settings so that the Filter appears only on the appropriate Grid page, in the region which is appropriate for your theme.  Click save.

blocksettings

Now, let’s visit our /isotope-grid-demo page.  We should see both the grid and the filter list.

final

It’s worth noting that here, too, I have customized the CSS.  If we look at the rendered HTML using Firebug, we can see that the filter list is in a div with class “isotope-options” and the list itself has a class of “isotope-filters”.

<div class="isotope-options">
  <ul class="isotope-filters option-set clearfix" data-option-key="filter">
    <li><a class="" data-option-value="*" href="#filter">All</a></li>
    <li><a class="filterbutton" href="#filter" data-option-value=".architecture">Architecture</a></li>
    <li><a class="filterbutton selected" href="#filter" data-option-value=".city-and-regional-planning">City and Regional Planning</a></li>
    <li><a class="filterbutton" href="#filter" data-option-value=".landscape-architecture">Landscape Architecture</a></li>
  </ul>
</div>

I have overridden the CSS for these classes to remove the background from the filters and change the list-style-type to none, but you can obviously make whatever changes you want.  When I click on one of the filters, it shows me only the news stories for that Discipline.  Here, I’ve clicked on City and Regional Planning.

crpfilter

Next Steps

So, how do we plan to use this in our digital library going forward?  So far, we have mostly used the grid without the filters, such as in one of our Work pages.  This shows the metadata related to a given work, along with all the items tied to that work.  Eventually, each of the taxonomy terms in the metadata will be a link.  The following grids are all created with blocks instead of pages, so that I can use Context to override the default term or node display.

WorkScreenShot

However, in our recently implemented Collection view, we allow users to filter the items based on their type: image, video or document.  Here, you see an example of one of our lecture collections, with the videos and the poster in the same grid, until the user filters for one or the other.

CollectionPage

There are two obstacles to using this feature in a more widespread manner throughout the site.  First, I have only recently figured out how to implement multiple filter options.  For example, we might want to filter our news stories by Discipline and Semester.  To do this, we rewrite the sorting fields in our Grid display so that they all display in one field.  Then, we create two Filter blocks, one for each set of terms.  Implementing this across the site so that users can sort by say, item type and vocabulary term, will make it more useful to us.

Second, we have several Views that might return upwards of 500 items.  Loading all of the image files for this result set is costly, especially when you add in the additional overhead of a full image loading in the background for a Colorbox overlay and Drupal performance issues.  The filters will not work across pages, so if I use pager, I will only filter the items on the page I’m viewing.  I believe this can fixed somehow using Infinite Scroll (as described in several ways here), but I have not tried yet.

With these two advanced options, there are many options for improving the digital library interface.  I am especially interested in how to use multiple filters on a set of search results returned from a SOLR index.

What other extensions might be useful?  Let us know what you think in the comments.

Resources

 


Come to Our Meet-up at #LITAforum!

Are you interested in writing a guest post or becoming a regular contributor to ACRL TechConnect blog? Or, do you blog about library technology?

Three of ACRL TechConnect blog authors, Bohyun, Eric, and Margaret, will be at LITA Forum this year.  (Two of us are on the LITA Forum planning committee and yes, we are very active at LITA as well as in ACRL! :)

So, we decided to have a small meet-up!

Come chat with us about everyday challenges and solutions in library technology over drinks.

This is an informal meet-up & All are welcome!

TechConnect Meet-up at #LITAforum


View NRHA Louisville Activities Map in a larger map