Creating Image gallery with Drupal views and CSS3

Hi all,
How many times we are having headaches, with image gallery implementation on web site we are developing - how to create image galleries not installing any third party complex features?  I had same challenging question working on a www.whitsundaysailtraining.com website.
To be honest I,ve tested many options before chose this example.
We now that we,ll need to query our data base for pulling out necessary data of our nodes,  Drupal views module gives us human friendly environment how to query database and easily get certain look of that.
In this easy to use and maintainable example I`ll show you hot to do that.
Yes before we start, I used image gallery integration  from flickr, so you do not need to handle images on your won host.
So to do this you will need
(with Drupal 6 installation);

• Drupal Views module.
• Drupal cck module.
• Drupal emfield module
• Drupla Lightbbox2 module, to have full beauty. 

Once you have uploaded and unarchived those files on your server we are ready to start.

First enable all above mentioned modules under admin/build/modules. Then navigate to admin/content/emfield. Srcoll down and find embed image field, click on that and you should see flicrk configuration settings, select allow content from flick.

Then you need to provide API key`s to make all this working - you can get them on your Fickr account, Once this is ready save settings and we are ready to move on.

Let`s make new content type for our Flickr nodes to post imgaes, so navigate to admin/content/types/add.

Give your content name and type (for ease of use I,ve made it both as Flickr), you can also use description area to instruct your site editors what to do with this content type.

Next scroll down submission form settings and remove Body label, we do not need this because our nodes will use only one emfield. Save.

Now we need to add flickr emfield. >> Click on manage fields, scroll down to add field and give a field name and key and from drop down list select embedded image click add and you will be prompted to Field customization page, set all you field features upon your Flickr gallery settings, save and we are ready to go.

To have some data we need to paste some code from flickr >> go to your Flickr gallery, select and click on image, on right top side click on grab HTML and here is your code, paste it into your Flickr node`s field .

Once we,ve done couple of nodes lets create view, >> admin/build/views.

Give name, tag description and select node as view type.

Know we are on view dashboard;

• Under fields find our field_flickr select, under settings delete label - you will not need that. scroll down to format - her light box comes in - select it. Save we have wht we need to display.
• Under Filter we need to add Node Type: Flickr, click on add icon(little +) then find filter node type. Under settings select equals to and our node type Flickr.
• Basically our view is done, but! As styling option I,ll use unformatted which means that all thumbnails will be wrapped within div tag, We,ll make formating with CSS later.
• Then Give our view title - this will be our page title and I suggest to add something under empty text, just in case.
• Finally add page as one of your displays, do not forget to create a path for page!!!.

Cool back end part is ready, now if you navigate to you view`s page url you should see all thumbnails one on top of each other, so we are ready for CSS.


// First left floating of all views row div`s
.photos .views-row {
border: none;
clear: none;
float: left;
margin: 10px;
text-align: center;
width: auto;
}
//then CSS3 box-shadow to create box shadows, cool no 3 hours worth Photoshop hack //images any more
.photos .views-field-field-flickr-embed {
-moz-box-shadow: #9D9D9D 3px 3px 2px; // Our love firefox
-webkit-box-shadow: #9D9D9D 3px 3px 2px; //Chrome and Safari
box-shadow: #9D9D9D 3px 3px 2px; //Opera
min-width: 264px; //this is custom setting for my need only
}

As you can see I,ve made additional class for this view for better styling - you can add this on views dash board.
So what this CSS3 box shadow tells us? First color`s hash then 3px X vise, 3px Y vise and 2px blur border.
Cool our job is done and we are happy. Navigate to your pages url and Click on Image to see result.