4 Steps to Building a Portfolio Website Using Drupal

Mar 29 2011 by Monica S. Flores | 19 Comments

4 Steps to Building a Portfolio Website Using Drupal

If you’re building a website for a client or yourself that requires a number of images to be presented in a gallery format — for example, if you’re a web designer, photographer, sculptor, painter or graphic designer — Drupal has some out-of-the-box solutions to help you organize and present your information.

Professionals who work on a visual medium often need help presenting (and possibly monetizing) their work, and an online gallery is a great way to do this. Perhaps you could also make the images available as physical products or digital downloads in an online store as an added option.

This guide will show you how to develop a portfolio/image gallery website using the popular content management system, Drupal.

Prerequisites

For this guide, you will need basic working knowledge of Drupal and a clean installation of the Acquia Drupal distribution ready to go.

The following guide might be helpful to read for new Drupal users:

Here are the Drupal modules we’ll be using:

Below, you’ll be instructed to navigate to certain sections of Drupal. You will have to replace http://example.com with your domain name where you have Drupal set up.

Let’s get started!

Step 1: Gather the Information to Display

Use Drupal’s module manager to enable the following modules:

  • Image (enables you to use images)
  • Image Gallery (pre-built gallery functionality)
  • Image Attach (functionality to add images to pages and other types of posts)
  • Image Import (to batch upload a number of image files)
  • Lightbox 2 (if desired)
  • CCK Content (to edit the "Image" content type)
  • CCK Number (to add new number fields to the "Image" content type)
  • CCK Text (to add new text fields to the "Image" content type)

The typical project to display in a gallery-style website would have specific fields that display only on a per-project basis. These could include things like the image itself, the image’s title, the creation date, the medium and a description of the image.

Go through the body of work and identify the types of information that are important to display for each item in the gallery. You may be able to skip this step if all you need is the title and a description of the gallery item.

If you need more, then use CCK to add new fields to the "Image" content type by navigating to:

Admin menu > Content management > Content types > Edit Image > Manage fields

Direct URL:

http://example.com/admin/content/node-type/image/fields

This will enable you to collect more information about each image (again, specific to the type of gallery being displayed).

Note that the name of each gallery may be specified in advance by going to:

Admin menu > Content management > Image galleries > List

Direct URL:

http://example.com/admin/content/image/list

If no gallery has been prepared yet, you can create one by going to:

Admin menu > Content management > Image galleries > Add Gallery

Direct URL:

http://example.com/admin/content/image/add      

Step 2: Import the Images

You may upload images one at a time using the "Add image" functionality:

Admin > Content management > Create content > Image

Direct URL:

http://example.com/node/add/image

The default version lets you add a title and description. Because we enabled the Image Attach module, you can therefore attach an image to this node.

The following describes how to upload an image from your hard drive, and assign it to its gallery (if it’s destined to have one).

If you have a number of photos to upload at the same time, you could first put them all in one folder on your desktop or hard drive to make them easier to organize and access.

Next, go to the Image Import settings:

Admin > Site configuration > Images > Image import

Direct URL:

http://example.com/admin/settings/image/image_import

Follow the instructions to create a "temporary" folder somewhere in your web server. You may need to use FTP to create the folder (especially if you are using shared hosting).

Here is the equivalent tmp/image file on the hard drive:

FTP all of the images that you want to make available to your Drupal website, putting them in this temporary directory.

Note that you can automatically create new image galleries by creating sub-directories. For example, with the path tmp/image/gallery1/foo.jpg, the image foo.jpg would be part of gallery1.

Next, take those images from the temp folder and import them to your Drupal website:

Admin > Content Management > Image Import

Direct URL:

http://example.com/admin/content/image_import

You can use the Select button at the very top of the list to auto-select all of the images.

At this point, specify a new "Title" and "Body."

After the images have been imported, you’ll receive a confirmation.

You can always refer to the content overview section by going to:

Admin > Content management > Content > List

Direct URL:

http://example.com/admin/content/node/overview

Review which of the most recent items have been moved over, and make sure that any new images are assigned to the correct gallery. For example, I am assigning this particular image to the "Regular Gallery," which is in the dropdown list right under the title of the image.

Step 3: Fill Out the Informational Pages

Now is your chance to start creating pages about your portfolio website. Typically, you’ll start with pages such as:

  • Home
  • Biography
  • Contact
  • Privacy policy
  • Terms and conditions

You can create new pages using the "Page Management" tool:

Admin > Content management > Create content > Page

Direct URL:

http://example.com/node/add/page

You can also specify whether or not the page should appear in the "Primary Links" menu, which is usually found across the top of every page.

Step 4: Using Lightbox

Lightbox 2 is a very nice way to present photos on a website. It allows you to upload images to the Image Gallery; and then, when a user clicks through the images, the images come up as a modal window with an arrow on either side of the image.

It’s worth briefly reviewing the available options for Lightbox. For the gallery we’re working on, we won’t change the default settings much.

To configure Lightbox, go to:

Admin > Site configuration > Light box > General

Direct URL:

http://example.com/admin/settings/lightbox2/general

My only change to the default settings is the following:

 Admin > Site configuration > Lightbox > Automatic image handling

Direct URL:

http://example.com/admin/settings/lightbox2/automatic

Set the Automatic handler for image nodes option to be Lightbox grouped. This means that the images will be grouped together but appear one at a time, with "Next" and "Previous" arrows and a dark shadow behind them.

Putting It All Together

If you’re using the Image Gallery’s default functionality, then all of your galleries will appear at:

http://example.com/image

Finally, the uploaded images themselves will appear in Lightbox format if you click on one of the thumbnails in a gallery.

Bonus: Using Ubercart to Handle Payments

I use Ubercart to handle user payments. This software is free and open source, and it allows you to sell products on your website. The products could be digital, such as high-resolution JPEGs (like screensavers) or PDF reports that are unlocked upon payment. Or they could be physical, such as signed prints, t-shirts, mugs, calendars or signed photos, which require shipment to the buyer.

Perhaps the site owner wants to sell subscriptions to the website, in which case the product would be a "membership package" that directs the purchaser to a "paid members" section for a fixed amount of time.

You can create a product by going to:

Admin > Content management > Create content > Product

Direct URL:

http://example.com/node/add/product

If you use Ubercart, you’ll need a payment gateway such as PayPal or Authorize.net to accept payments. If you choose to accept payments directly on your website, you’ll also need to purchase an SSL certificate to make data transmission from user to your web server (and back) more secure.

Examples

Would you like to see some examples of this deployment in action? Check out the following examples:

Missing Link

Images of logos, products and events for a bicycle co-op.

Missing Link

Wagner Society of Northern California

Images of members of an organization devoted to the famous composer.

Wagner Society of Northern California

Related Content

About the Author

Monica S. Flores is a web developer through 10K Webdesign, which focuses on websites for progressive organizations and membership groups. She founded a member community for success-oriented women ASuccessfulWoman and one of the first green business directories by and for women GreenBusinessWomen. Contact her through Twitter.

19 Comments

Morten Najbjerg

March 29th, 2011

It’s nice seeing a Drupal related post! Thank You!

Arturo

March 29th, 2011

I love drupal, and I pretty much could build my portfolio site with drupal but I do not think this is the best fit for it, I mean unless you have a great amount of content.
There are simpler solutions like TextPattern, or WordPress (love them both)…but this is good post!

Marko

March 29th, 2011

How come you are using Drupal 6 instead of Drupal 7?

Aside from simplenews (that only has a dev version out) all the modules you used have been ported to Drupal 7.

To be honest I see no reason why you would use 6 in this instance.

Jay

March 29th, 2011

If you do anything in the “tech world” it’s very important to have an online presence for yourself, and it could make the difference between getting a job or not.
Thanks for a great tutorial, this will really help with the online presence.

Jacob Gube

March 29th, 2011

@Marko: When Monica wrote this post, Drupal 6 was still the stable release. The fault is on my behalf for delaying the posting of her excellent tutorial.

Marko

March 29th, 2011

@Jacob

Oh, I see, now it makes sense. Thanks for clearing that up!

Dale Brendan

March 29th, 2011

Built my professional portfolio website on Drupal 7. It is available here: http://grebey.com/portfolio …some feedback would be great!

Puneet Sahalot

March 29th, 2011

I don’t have much experience of working with Drupal. But, I would like to try this out and learn something new. I hope this will work fine with Drupal 7 as well.

putragaluh

March 29th, 2011

its a nice post, i like it

Avangelist

March 30th, 2011

I’d use 6 anyway since I haven’t been able to install 7 successfully once, all those problems with database types and mysql bugs.

it’s good to see CCK being used effectively why it’s not yet part of core is still a mystery to me.

Wikus du Plessis

March 30th, 2011

Hi there, nice tutorial! I was wondering, why don’t your images load anymore? At first I thought it was Gmail, but now that I’m on your site they don’t seem to show either.

Wikus du Plessis

March 30th, 2011

Uhm, nevermind… After I posted the above comment they appeared. Strange, haven’t been able to see them for almost a week now…

Tayyab

March 31st, 2011

Very nice article for people who are more fluent Drupal but the ones who are not, WordPress or self designed HTML kind of website would be a rather easier choice.

Rajesh

April 1st, 2011

Nice post :)

Cool Boy

April 3rd, 2011

This post is very useful especially for person like me who are new to Drupal CMS. Thanks for the detailed tutorial

Chintan

April 3rd, 2011

Very useful article….!
@Monica S. Flores :is there any advantage of using aquia drupal than normal drupal 6

Craig

April 14th, 2011

You have shared very descriptive steps to create portfolio in the website using Drupal. It will help the person who hasn’t much technical or programming knowledge.

Fred

April 22nd, 2011

Great post,

Thanks for sharing.

Renalt Johnson

September 9th, 2011

Isn’t Ubercart very very expensive? I remember taking a look at the pricing and it was up there with Magneto which is just outrageous! HCG diet

Leave a Comment

Subscribe to the comments on this article.