ermannofalco.com: a photographer portfolio website built with Drupal

Submitted by fabio on Tue, 2010-07-27 15:18.

In this post I'd like to present you my latest website: Ermanno Falco - Fotografo di Torino (in Italian).

ermannofalco.com screenshot

Ermanno is a photographer which operates in the Turin (Italy) area. He contacted me to create a photograpy portfolio website which he could use to upload his best works. Ermanno needed to indipendently manage the uploading/modify process of contens so it been clear from the bedinning that we needed a dynamic platfrom like Drupal.

From the start of the project, one of our goals has been to create a really usable website: we then decided not to use bad technologies like Flash and instead we opted for a pure XHTML and CSS website with a pretty consistent usage of Javascript, JQuery in particular, always keeping in mind the progressive enhancement approach though. In order to keep the design light and simple, we choosed colors and graphics in general which could be easy to the eyes, not distractful, which, from our opinions, could let the pictures be seen without distractions.

Also the number of features on the website has been profoundly limited, also with the goal of keeping things the pages and the whole website as simple as possible. The features of the website are: a homepage, a photo gallery, a blog, about and a contact area.

Implementation

Following a list of every feature of the website with all the underlaying implementation:

homepage
The homepage is a simple Drupal node having type which has 3 blocks created from views. Everything is then enhanced using Jquery. The ultimi contenuti (last contents) area contains the 3 block and it's hidden using Jquery. To implement image rotation we used the Jquery Cycle plugin.
photo page
The photo page, such as this, a cck node has been used. We used imagefield with 3 image variation rules: thumb, normal, big. Those three differs from the resolution used, the big variation also uses an imagecache action to add a simple watermark to the picture.

The view of a picture node contains the title, the normal variation of the image and a description. Clicking on the picture the picture is shown fullscreen using Shadowbox.

Shadowbox is also used to implement the visualizza presentazione (show presentation) feature which is also accessible from the picture page.

To the right of the picture there is a custom coded PHP block which displays all the other photos in the current categoria. This block has been custom PHP coded by me.

The precedente (previous) e successiva (next) have also been added using custom PHP code.

The comment form is hidden or displayed using JQuery. This way the form is shown only when really needed and only to them who really need it. This also makes our design lighter.

photo gallery
The first page of the photo gallery has been implemented using Panel which inside has a view for each one of the picture categories.

The picture category view is implemented with a view which takes the category name as paramether and then shows the appropriate contents for that view.

Shadowbox is also used here for the slideshow implementation.

blog
To implement the blog we used the stock blog module from Drupal core. We just added a category block, implemented using Taxonomy Block, and a tag cloud block, implemented using Tagadelic. There are then some simple html blocks which display some contact and personal informations.
about
The pages in the area chi sono (about) are simple page nodes with some images inserted using the inline module.

The 2nd level navigation here is implemented using the secondary links block. We stick with this to implemente persistent navigation.

Also here there are some simple html blocks for displaying contact informations.

contact
Implemented using the stock Drupal core contact module.

Usability testing

During the whole project development we conducted different usability tests. We did some simple friends and collegues feedback as well as complete usability test. This tests guided us through different improvements to the website from the whole user experience.

An example of our finding can be read in this blog post: Usability testing Drupal's comment form: findings and how to fix it's problems. There I describe how we usability tested Drupal comment form and what are the issues our users found using it. The resuts are pretty bad and should be carefully evaluated for those who are going to implement Drupal on a website which uses users comments as one of the main content source. On this topic there is also a little video of one of our users strugglying with the Drupal comment form.

Considerations on client autonomy

Ermanno, my client, has the possibility to administer/create/modify every aspect of the contents on the website. He can create pictures, edit the homepage, about pages, pictures categories and the contact details. Everything thanks to Drupal great flexibility!

More technical details

The website uses valid XHTML 1.0 Strict and CSS 2.1 code. In the CSS there are some vendor specific rules which borrowed from CSS 3.

The website implements different SEO solutions: clean URLs, pagetitles module, xmlsitemap module, nodewords module. We also use a content first and SEO friendly template.

The website sources are archived using bzr version control system.

The website is hosted at Site5. The domain has been bought at tophost.it.

Conclusions

I'm really happy for this website. Once again Drupal has made my job easier: it really is a great platform for building websites.

Right now, the website is still to young to talk about business results but I'm pretty confident that it will perform great!

What do you think about?

I'm looking forward all your comments, every kind of feedback is welcome.

Thanks!

wonderful!

Submitted by David (not verified) on Tue, 2015-06-02 03:10.

This is wonderful! I am working for Saint Paul web design firm. I am looking for a solution to develop my website for the same, photography.. but I am lost with so many complex items available.

From the start of the

Submitted by John (not verified) on Tue, 2015-05-19 14:07.

From the start of the project, one of our goals has been to create a really usable website: we then decided not to use bad technologies like Flash and instead we opted for a pure XHTML and CSS website with a pretty consistent usage of Javascript, JQuery in particular, always keeping in mind the progressive enhancement damessokken approach though. In order to keep the design light and simple, we choosed colors and graphics in general which could be easy to the eyes, not distractful, which, from our opinions, could let the pictures be seen without distractions.

I am looking to start photography

Submitted by Anonymous (not verified) on Thu, 2015-01-29 02:43.

Hey, awesome work. i am looking to start photography and attending a local college course. What do you advise the first type of shots should be that would look good for my coursework?

I also study digital design and working for a company at the moment. I have uploaded any pictures yet but could you check them out at my link below :)

Regards

George Jones

Great Job

Submitted by triding (not verified) on Fri, 2012-08-03 16:31.

Hi Yanni,
I am an extreme newbe but an avid photographer and it is very encouraging to the beautiful presentation you developed using Drupal. I don't understand the details of how you did the implementation but I will learn.
Again good job

Thanks, I'm available for

Submitted by fabio on Fri, 2012-08-03 18:08.

Thanks, I'm available for consulting in case you need help..

beautiful

Submitted by yanni (not verified) on Wed, 2011-01-19 10:11.

this is a beautiful and simple, usable website for photography. I like it very much.

I am looking for a solution to develop my website for the same, photography.. but I am lost with so many complex items available.
and i was wanting a checkout option so users can login and buy images.. and a restricted area that only members or specific people can acccess.

and I am by no means a web developer...

Hi Yanni, thanks for your

Submitted by fabio on Wed, 2011-01-19 10:38.

Hi Yanni, thanks for your kind comment. If you want building a similar website for your business, I'm available for consulting services.. just get in touch with me.

Also, I can help you with suggestions if you are going to try implementing something like this by yourself or using someone other consultant. Just leave a comment here in case.

Good luck!

Great Job!

Submitted by Mayk Brito (not verified) on Sun, 2010-10-24 05:09.

Hello friend!
Awesome work.
I'll start a photographer blog too, and your case is very useful for me. I'll take some ideas looking at your great job!

Thanks for sharing your experience. It helps me a lot.

See you!