Screenshot of the home page of the IYCF Image Bank on multiple devices

Ministries of health, universities, hospitals, and non-profits from around the world are using the Infant and Young Child Feeding (IYCF) Image Bank to obtain high-quality illustrations for their educational materials without having to invest significant resources creating these illustrations from scratch.

Background

As they say, “a picture is worth a thousand words.” In the international public health sector where I work, we often create educational materials with images to encourage healthy behaviors. The images help communicate abstract concepts and help individuals imagine themselves doing the behavior we are promoting, like washing your hands before you eat. When individuals identify with what they see in the images, they are more likely to adopt improved practices. And for the populations in the developing countries where we work, access to media is often limited so high-quality illustrations have even more impact.

In 2010, UNICEF developed and launched an integrated package of training, counseling, and take-home materials known as the Community Infant and Young Child Feeding Counselling Package (C-IYCF package), using high-quality graphic illustrations. Over the last five years, the United States Agency for International Development (USAID), has funded both the Infant and Young Child Nutrition (IYCN) project, and later the Strengthening Partnerships, Results, and Innovations in Nutrition Globally (SPRING) project to adapt and test the C-IYCF package in several countries.

The goal in creating the IYCF Image Bank was to stretch limited international development funding by making the C-IYCF generic illustrations and specific adaptations widely available in editable formats to organizations creating print materials and other visual aids aimed at promoting maternal, infant, and young child nutrition around the world.

The Challenge

There were two main requirements for this project:

  1. We needed to create order out of chaos: the files were scattered between numerous storage devices and organizations, and they were not organized coherently or named descriptively.
  2. We needed a system that could be assembled quickly and inexpensively while still offering a number of advanced features. We only had enough funding for one site builder (me!) and very limited time for new development.

The Process (Including the Technical Bits)

The first order of business was preparing the content. We started by creating a consolidated local directory. We deleted obvious duplicates. We looked at the images and started to think of the most important ways of organizing them. Obvious vocabularies were Authoring Organization, Country (of origin), Year (of origin), and Health/Nutrition Practice. As coding continued, we had to create other, less obvious categories to make sure our intended users could navigate the system in a natural way. For example, we created Visual Groupings to ensure that a series of images would always be associated, even if they did not share other categories (See the example below, where a single series shows breastfeeding and complementary feeding at many different ages, which are all considered different nutrition practices).

A grid of illustrations showing a woman feeding her child. The images are similar in appearance, but would not all fall into the same behavior category.

Next, we created a Google Sheet where each row was a filename and the columns were fields or formulas to help populate other columns. Our nutrition experts then reviewed and categorized each image individually, paying close attention to any relationship between images as the coding progressed. This was a painstaking iterative process, but was necessary for our team to be certain that all the images were appropriately categorized and allowed us to import the images in one go, with little need to make edits on the individual nodes (more on this below).

Organizing the images required giving them logical filenames--making it easy to figure out which collection an image belongs based on clues in its filename: this is useful when downloaded and if a user needs to come back in search of related images. We were working on Windows computers, so we used PowerShell to convert the file names from their old names to new ones created through the Excel formula below.

$OldToNew = Import-Csv "old_to_new.csv"
foreach ($objName in $OldToNew){ Rename-Item $objName.old $objName.new }

Once we converted the file names, we used an Adobe Photoshop script to create flat .JPG files from all the layered .TIFF files--the .JPGs were needed for display, and the .TIFFs were for graphic designers to download and use.

With all the files prepared, we were now ready to add them to the site. We created a content type called Images, with each node representing a single layered image file and its .JPG counterpart. We then used the Feeds module, importing a file derived from our Google Sheet to create and fully populate all 700+ Image nodes with one upload.

Because some of the files were as large as 290 MB (even after optimization), we used the S3 File System module to allow us to host all the images in an Amazon S3 bucket. Making using of the S3 bucket from the beginning ensured we could add additional images in the future without needing to worry about space on our server. We used a Docker container for the site code, so having the images in an S3 bucket added an extra degree of confidence that our images would not be accidentally deleted.

Because many of the users that use these images are located in low-bandwidth settings, we wanted to provide an alternative to downloading the large, layered image files. We built a custom field formatter for Views that creates image derivatives on the fly and provides text links so that users can download different sizes of the image node’s .JPG file.

Success

The reach of the IYCF Image Bank has been incredible. We ask users to record who they are and which organization they represent, and we’ve seen usage from ministries of health, universities, hospitals, and non-profits from around the world.

Another surprising measure of success is that one of the artists responsible for a majority of the images in the IYCF Image Bank has abandoned his own local file system that contains many hundreds of image files in favor of the website--this tells us that we’ve organized the illustrations in intuitive ways that make them easy to find and download.

We are currently focusing our efforts on reaching a larger audience and adding images to the website. The more images we can bring into the site, the easier it should be for practitioners to tailor their behavior change materials to the appropriate context, allowing them to focus on other difficulties along the way to improved health outcomes.

Why Drupal was chosen: 

We selected Drupal for a number of reasons:

  • Funding for the site came from the SPRING project, which already had a Drupal site. Our plan was to make this new site available at a subdomain of our project domain.
  • I have been developing Drupal sites for a number of years, so I wouldn’t need to spend a lot of time learning a new system.
  • Drupal is feature-rich and designed around managing content, in this case images. Being able to relate images to each other using taxonomies and displaying them with Views was critical to the success of this project. I also knew there were contributed modules that would accomplish some of the heavy lifts, such as bulk importing images, image storage in an Amazon Web Services’ S3 bucket, and search.
Modules/Themes/Distributions
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

Feeds: feeds was essential for this project, as it enabled us to import all the image nodes at the same time while also completing all the necessary fields.
S3 File System: allows us to maintain a relatively small server for this site.
Bootstrap: gives us out-of-the-box responsiveness.
Search API: provides a powerful, highly-configurable search we can use with Views.
Views: enabled us to relate images in meaningful ways.

Organizations involved: 
Project team: 

This project was a collaboration between the USAID-funded Strengthening Partnerships, Results, and Innovations in Nutrition Globally (SPRING) project (managed by JSI, listed above), and UNICEF.

A grid of illustrations showing a woman feeding her child. The images are similar in appearance, but would not all fall into the same behavior category.
An example of an image page that contains a featured image of a woman feeding her child with the father offering support.