Pics System Build: HowTo

The coolness of this site is all hidden within the admin interfaces. I wanted to show how to use the admin interface and how I built it.
* fair warning: this is all in drupal lingo


This project came about when I realized that my photos are scattered across several computers, phones, and cameras. I also wanted a sharing mechanism. There are several websites that offer photo storage. All of them would cost for hosting the amount of photos I want. I'm also super picky about their interface and didn't love anything I saw. A light bulb went off! I have a server. I know how to build websites. Duhh!


  1. I wanted this system to be easy to upload lots of pics at one
  2. I wanted to be able to tag (taxonomy) each photo
    1. I chose 3 categories of tags. Event / Occasion, Who, What
  3. I wanted to be able to bulk tag photos as I upload them
  4. I wanted an easy management interface for tagging and un/publishing pics
  5. I wanted to have several sizes on pics available
  6. I wanted to capture the EXIF data if available


There are several photo galleries out there in the Drupalverse. However, most if not all of them are not picture per node. I wanted to have a file per node. This would allow me to taxonomy the actual picture. I also wanted to upload all my photos and pic which ones are publicly available.



I really wanted drag and drop uploading for these pics. It would be way to painful to upload each file and taxonomy them individually. All DnD modules were only widgets for 1 field. So I created an "uploader" content type to receive my pics and initial tags.

After you drag and drop all the pics into the node. +Upload them will individually load them all on to the server.

Usually your pics are uploaded in some sort of set. This could be pics of the same thing. Or pics of the same trip or events. Here is where you tag the lot. Each pics will get these tags.

Rules are Awesome

After you save the "Uploader" content the Rules module explodes each pic into its own node and assigns it the lots taxonomy terms.
Here is the code that runs after the Uploader node is saved.

global $user;
foreach ($node->field_up_pictures['und'] as $pic){
  $template = new stdClass(); // Create a new node object
  $template->type = "picture"; // Create the picture node type
  $template->uid = $user->uid;  //Set the owner
  $template->title = "picture";  //Set the title
  $template->field_pic_pictures = array(LANGUAGE_NONE => array('0' => (array)$pic));  
    $template->field_event_occasion = array(LANGUAGE_NONE => $node->field_event_occasion[LANGUAGE_NONE]);  
    $template->field_who = array(LANGUAGE_NONE => $node->field_who[LANGUAGE_NONE]);
    $template->field_what = array(LANGUAGE_NONE => $node->field_what[LANGUAGE_NONE]);
  if($template = node_submit($template)) { // Prepare node for saving

Now I got them all in nodes.

Management Interface

Now we gotta deal with the pics individually. I created a view to display about 100 pics on each page. I gridded them up and exposed their taxonomy fields with the "Editable Fields" module and its widget in the view. This allows me to quickly type or copy / paste tags for the pics. I also used "FastToggle" module to publish/unpublish the picture. This gives me a quick interface to manage the pics

With the ajax taxonomy creation I get some errors or orphaned tags. I use the "Orphaned Terms Deletion" module to help me clean up the unused and misspelled tags.

What if I upload a pic that needs rotating or had red-eye? I added the "Image Editor for Image Field" module. This allows you to send the pic to a online 3rd party photo editor and bring it back into the website when the edit is complete.

Display Interface

The Display interface is a similar grid view as the management view. This view has the pic thumbnail, 5 star rating, comment link, and # of comments. The pic links to a "Lightbox" medium sized pic. There is a link for the original sized on in the lightbox. The view utilizes the "Infinite Scroll" module instead of pagination. This gives it that pinterest feel.

I created a "Tags" view so you can see all the used Events, Who, and What tags. These link to the default taxonomy view for those tags.


I may put all the meta data about the pic in a "hide/show" div to give a more Wall like feel to the front view.