Skip directly to content

A Drupal 7 Image Gallery Tutorial

This tutorial describes step-by-step how to build a basic thumbnail based image gallery, based on Views. The result would look something like this:

(you can see a live demo at bryanbraun.com/portfolio)

The instruction is designed for Drupal site builders or admins with a basic understanding of Views and Fields. It assumes you are running Drupal 7.x and Views 3.x.

Step 1: Preparation

Modules

A views image gallery uses several modules. You can download and install all of these modules (and the modules they require) at /admin/modules/install.

Enable the following contributed modules...

  • Views - all purpose "reports" generator for Drupal
  • Chaos Tools - a tools library required by Views

...as well as these core modules:

  • Field
  • Image
  • File

Step 2: Content Configuration

Step 2a: Create Content Types

We need to create a new content type for images we put in our gallery.

  1. Browse to /admin/structure/types and create a new content type called Gallery Image.
  2. Add a field to the content type called My Gallery Image. This will allow you to upload an image when creating content.
  3. Optional: remove any unnecessary fields like the body field. This content type only needs to be able to upload an image.

Note: Feel free to use use whatever names you like for these fields and content types

Step 2b: Upload some photos as dummy content

  1. Browse to /node/add and add content using the Gallery Image content type we just created
  2. Use the "My Gallery Image" field to upload one of the photos that you want in your gallery.
  3. Set any other settings as necessary and save the content.
  4. Repeat the steps above until you have loaded up 3 - 5 photos for dummy content

Step 2c: Create an image style for your thumbnail

  1. Go to /admin/config/media/image-styles and click Add Style to add a style named gallery_thumbnail.
  2. Add an effect of "scale and crop" (several other effects may work for you, so feel free to play with these settings)
  3. Set the width and height to be 150 pixels
  4. Update the effect

It ought to look something like this:

Step 3: Build the View

Step 3a: Create a Gallery View

To display images in a Gallery we will create a view that displays every piece of content you have published under the Gallery Image content type.

  1. Go to /admin/structure/views and click Add new view
  2. For the view name, call it "Photo Gallery"
  3. Set the view to Show Content of type Gallery Image sorted by Unsorted
  4. Check the box to Create a block (and uncheck the Create a page box if necessary)
  5. Name the block title "Photo Gallery"
  6. Set the display format to Grid of fields
  7. Set to 10 Items per page, check to use a pager and click save and exit

Step 3b: Views Configuration

We'll have created a view with a block display and now we need to ensure that all our settings are correct.

First, locate the view in your list of views and click the link to edit it. Make sure your settings match those listed below:

  • Display name: 'Photo Gallery'
  • Title
    - Title: 'Photo Gallery'
  • Format:
    - Style: 'Grid'; Number of columns: '5'; Horizontal
    - Show: 'Fields'
  • Fields
    - Content: 'My Gallery Image'; Formatter: 'Image'; Image style: 'gallery_thumbnail'; Link image to: 'content'
  • Filter Criteria:
    - Content: 'Published (Yes)'
    - Content: 'Published or admin'

This criteria ensures that a photo won't appear in the gallery unless the photo has been properly uploaded and publish as part of your Gallery Image content type. The resulting set up will look something like this (though yours ought to say "Content: My Gallery Image").

Save the view.

Step 4: Test your setup

Now scroll to the bottom of your view configuration page and check the Auto preview checkbox. If your gallery is being properly displayed in the region below, then you did it! Just save the view and it will be created as a block (remember, that's the option we chose in step 3a, #4). Now you just navigate to the blocks page (Admin Bar > Structure > Blocks) and drop the block into a region to see how the view looks on your site.

Step 5: What's next?

You can do a lot to customize your gallery. Here are some options:

  • Change the pager settings for your view (determines the default number of thumbnails in your gallery)
  • Style the view output for your view using CSS (I like CSS Injector, since it's quick and easy for beginners)
  • Add a Page display to the view, so it exists on its own page (learn more about displays on drupal.org)
  • Change Image styles to change thumbnail size or image scaling/cropping in the thumbnail
  • Uploading more images
  • Allow rating of images (using modules like Voting API, or Fivestar)

Other Resources

  • Views Gallery module by KarenS -- A Drupal 6 module that uses this methodology with hardcoded content types.

Note: I wrote this tutorial as part of a Drupalcon Denver documentation sprint and I originally saved it in the views issue queue (which I'm pretty certain was the wrong place to put it). Anyways, I'm reposting it here so I could clean it up, include images, add links, and make it more findable. I certainly could have used this when I was figuring this out. Cheers!

Vim Color Schemes: A Call for Designers

Sometimes I'm knee deep in technology and I come across a situation where my eyes are insulted by a deluge of terrible design. Once it was in finding this website. Most recently, it was in browsing color schemes for Vim, a command line based text editor.

For background, Vim lets you create and edit text files in a command line, and "color schemes" exist to highlight the words you're typing with different colors. If you are a developer, it makes sense, but to non-developers, it's the equivalent of highlighting your sentences so all the nouns are one color, verbs are another color, punctuation another color, (and so on…). The overall effect makes the the code easier to understand. And let me tell you… every little bit helps.

Anyways, there are tons of options for color schemes but this is what you find when you browse them.

See the full listing at http://code.google.com/p/vimcolorschemetest/

Seriously? I mean, I get that the project is open source, which has the side effect of inviting in the unfinished whims of the hobbyists everywhere but this is just absurd. Just look at the blue one in the top right. It's hard for me to believe that there are people out there who make these designs and aren't too embarrassed to publicly contribute them. I look at these and think that all it would take is for a designer to come in and pop out three or four polished designs in a weekend and just clean up shop. Such a contribution would quickly bubble to the top, since everybody wants a better experience. Right?

To be fair, with a bit of digging, I did find a couple (like Wombat and IR Black) that weren't too bad.

I'm starting to realize that some developer circles turn a blind eye to design. Almost as if the ability to do visual design was below them. Or maybe they feel like it isn't the kind of skill that you can study and develop in yourself… that it's something you must be born with. My message to people with these kind of attitudes is that you are only hurting yourselves. Sure, it may not be wise to aspire to be an expert in everything, but a putting a little effort into learning design principles can go a long way.

Open Source in the Government

The common theory of government is that governing structures have no power except those that they derive from the masses, who deliberately give up their freedoms for the purpose of securing order, stability, and protection of their rights. This is similar to the forces working in open source communities. Think about it. Open Source projects have no power, except as derived from their supporters, who deliberately give up their time for the purpose of collaborating to build better technology, freely available to anyone, to be used for the benefit of anyone.

Both systems have strengths and weaknesses. Both have a history of success in America. Both can have schisms and free-riders. Government and Open Source are like long lost twins.

I wrote an article that was published at acquia.com about the adoption of open source software in the US Government. If you are interested, you should check it out. Here is a sneak peek:

"There are times when it is hard to believe that anything innovative is happening in Washington. At the recent World Government Summit on Open Source, though, it became clear that over the past several years there has been a quiet transformation in the way government agencies are using technology."

"Throughout the course of the October 11 event, which is a gathering for open source advocates in the public sector, I noticed a trend in the conversation. There was a simple idea we kept returning to again and again: Open source software is influencing government today, and in a big way."

Read the rest at https://www.acquia.com/blog/open-source-public-sector

The Ulysses Contract

What do you do when your own worst enemy is yourself?

I recently heard a story about a woman named Zelda Gamson. She was an older woman who had lived a very fulfilling life, having been a civil rights activist, among other things. Unfortunately, Zelda often battled with a lifelong smoking addiction that she couldn't seem to kick. On one particular day, she felt a really strong desire to quit... so strong, that she made a deal with a friend of hers. It was an oath, with this friend as a witness, that if she ever smoked another cigarette, then she would donate $5,000 to the Ku Klux Klan. Period.

You can imagine how repugnant this donation would be, especially to a former civil rights activist. In fact, the idea of it was so bitter, that she knew that no cigarette, no matter how nice it would be, was worth such a horrible option. She just couldn't bring herself to smoke.

Of course, that was the point all along.

Zelda had effectively taken part in what is called the Ulysses contract -- a freely made decision that is designed to bind oneself in the future. And it worked.

The name of this contract is derived from the Greek epic poem, "The Odyssey." In it the protagonist and ship's captain Ulysses (Greek name, Odysseus) desires to hear the song of the sirens. The goddess Circe told him that any sailor who heard this song would be so mesmerized by it's enchanting qualities that they would direct their ship towards the source of the song and crash it into the perilous rocks of a nearby island. He was to avoid the area at all costs. However, Ulysses's curiosity was so strong, that he came up with a plan for him to hear the song. He filled the ears of his crew with wax, rendering them unable to hear. Then he had himself bound tightly to the mast of the ship. What's more, he had given his crew instructions that no matter how he reacted, they were to keep on sailing forward, and not untie him, until they were safely beyond the reach of the siren's song. 

See the similarities between this and the first story? In this case, Ulysses submitted to literally have himself bound, but the principle is the same. In both cases there's a contract that restricts future freedoms in an effort to achieve an outcome (and it case you were wondering, Ulysses's plan succeeded as well).

This is one of the most popular parts of the Odyssey, even thought it takes up less than 40 lines (in a poem that's over 12,000 lines long). In thinking about it, I'm starting to understand why.

Ulysses' dilemma is a very human weakness and one people face everyday. We can look at ourselves as two different people: the 'now' self, and the 'future' self. The 'now' self is smart. He (or she) can see all of your options and the potential consequences of each choice. He is capable of making informed, rational decisions about what you ought to do in any given moment. Unfortunately, the 'future' self is the person who actually faces those decisions and the 'future' self is weak. Given the opportunity, he (or she) gives in to the moment and often makes poor choices. Whether that choice is a cigarette, a credit card purchase, an extra slice of cheesecake, or just one more episode of "Lost", the concept is the same. It doesn't matter what your better judgment says. That person is gone when the time to decide arrives.

That's why the Ulysses contract is so interesting. It give you a way to strong-arm your future self into making the best choice.

Such is the aim of a Russian treatment for alcoholism known as the Dovzhenko method. It's crazy, folks. I won't go into much detail, (you can hear the full story here, explained much better than I can) but I'll summarize. The concept is to implant a small pill underneath the skin, which contains the chemical Disulfiram. It has the effect of causing a litany of horrible symptoms... potentially even death, to the person who consumes even a small bit of alcohol while the treatment is active. While the seriousness of the symptoms and the length of the active period is under scrutiny, the controversial method is a bona-fide Ulysses contract. And like the others, it often works.

Alcoholics Anonymous actually uses the contract too, though in a much different way. Their program is designed to create strong social structures that, while not binding, are very influential in preventing you from drinking.

There are even apps and websites like stickk.com, that allow you to build your own Ulysses contracts and actually commit to your goals. The list goes on and on.

Of course, I'm not exempt from the human weakness we've been discussing. Nobody is. For me, the 'now' Bryan sets his alarm so he can get up early and do some to-do list butt kicking. Unfortunately, the 'future' Bryan usually prefers to sleep in. On and on, goes the endless battle between these two people. 'Future' Bryan also has a procrastination problem. If knowing your enemy is half the battle, then it's the easy half. I've got a pretty good idea of who this 'future' Bryan bloke is. It's being clever enough to outsmart the guy that's the challenging part. Let me know if you have any ideas (lifehacker links are acceptable too).

The Command Line is a Terrifying Thing

The command line is a terrifying thing.

It sits motionless. Black as a moonless night. Waiting.

The command line is unknowable. You cannot sit down in front of a command line and just figure it out. You have no reference points, no indications of what your options are. You have nowhere to start and nowhere to end. You are in an foreign country, on an alien world. You are utterly, hopelessly, lost.

The command line is unforgiving. All commands are equal; you type and press enter. There is no visual indication of whether you succeeded or not. There is no warning if you are about to do something terrible. All it takes is five characters to completely erase the contents of your entire computer. There is no undo.

Learning to use a command line after using a graphical interface is like waking up in the morning and realizing that you have gone blind. You are disoriented and unable to perform simple tasks. The methods you use to analyze something in the old world do not work in this world. There are no clues. There are no nested menus to tell you the relationships between features. You cannot estimate the importance of commands by their size or prominence on the screen. There are no loading bars to indicate the progress in a download. You must relearn ways to identify these clues, in a new environment.

But you cannot. Like a wanderer without a map, the user sees the command line as uncharted territory. A desert wasteland. Uninhabitable.

See the resemblance?

Pages