Drupal7: Multiple Value Fields UX and Display

David G - DrupalIn a current project migrating a massive legacy site into Drupal 7. I have all the U.S. presidents inaugural addresses and biographical information in a database. This includes photos of presidents throughout their life and during their time in office. The legacy database could have many photos for a president in the form of: 13a.jpg, 13b.jpg, 13c.jpg. Where 13 is the presidential number (Millard Fillmore) who has in this case 3 photos: photo A, photo B and photo C. When migrated to drupal these photos are changed to: millard_fillmore.jpg, millard_fillmore_1.jpg and millard_fillmore_2.jpg … if you’d like to see how to migrate Images and transform filenames please request the blog post, or perhaps I’ll supply it later. While I’m storing all this data I want to make it easy to update and display a limited set of it by default.

In drupal I want these images to be stored in 1 field. To do this we make a multi-value Image Field:

My content type contains various image fields. These are all multiple value fields. We will examine 1 more closely.

My content type contains various image fields. These are all multiple value fields. We will examine 1 more closely.

Each image field may currently store up to 10 images (in the future you can easily expand this to Unlimited, but cannot easily decrease it without loosing data).

Each image field may currently store up to 10 images (in the future you can easily expand this to Unlimited, but cannot easily decrease it without loosing data).

But I’d like to assure the Editors of the website have:

  1. a nice user interface to interact with these images when uploading them for a President.
  2. a simple means to reference and display them within content.

For both of these needs I found 2 great modules recently. The first is Field Multiple Limit (FML) and the second is Multiple Value Widget (MVW). While these 2 modules sound similar they are primarily for different users of the website.

The Field Multiple Limit module is designed to provide an easy to use Field Formatter for a content type to limit how many items to display for content using a multiple value field. So if I can store up to 10 presidential images; when showing a president I would probably only want to display the 1st image ever, unless I’m showing a gallery or something.

Once installed we can then go to the display mode of the content type and adjust the display format for our multiple value fields to show 1,2, N items by default and supply an offset into the list of values if needed:

After installing field_multiple_limit you may limit how many items display per drupal view_mode.

After installing field_multiple_limit you may limit how many items display per drupal view_mode.

The Multiple Value Widget is designed primarily for content editors to have a slicker user interface experience when editing content. By default a multiple value content type lists the supplied values in the Edit Form in a Table of rows. Eeww, it’s big, it’s bulky, it’s not responsive really …. Eewww.

By installing this module and editing the multiple value Field we can set what multiple widget interface we want to use:

Allowed options to show multiple values. These displays use Jquery UI used by drupal.

Allowed options to show multiple values. These displays use Jquery UI used by drupal.

I like using the Tabs display for multiple values. Now our long list of images in a table is a nifty tabbed pane of image(s). It’s more compact, less intrusive in the Edit page and I think … slicker to use. An example of editing content using it properly configured on a field is:

The multiple value widget for tabs shows 2 JFK uploaded images.

The multiple value widget for tabs shows 2 JFK uploaded images.

As you can see it helps to cut down on some of the Edit screen clutter. A final result of viewing the final content with field multiple limit module configured, and images uploaded is (showing only the 1st image by configuration):

Here JFK has multiple pictures. But by default viewing the content type displays only the first picture.

Here JFK has multiple pictures. But by default viewing the content type displays only the first picture.

I hope you can see how useful these 2 modules are! They’re dead simple to install and offer a nice degree of flexibility and streamlined UX to a website.

Note: In general I’d prefer to be able to select exactly what image I’d use say in an entityreference value … that blog post may be for another time. This blog post is simply showing how to store and configure display multiple values in 1 content type, when displaying just that content by itself on page.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *