The Start of Something Wonderful - My Site on Drupal!
Today marks the first day that I really and truly started to learn and use Drupal. Earlier, my wife and I went to Barnes and Nobles and I picked up Sams Teach Yourself Drupal in 24 Hours. I didn't really find it all that useful, but I am not much on these teach-yourself-to-do-whatever type books. I wish I had the ability to follow along and do as the book instructs, but I skim and peruse the pages looking for my specific topic, oft being left in dismay over the authors inability to hand me my answer on a proverbial silver platter.
I digress.
The book, now left to collect dust, has been set aside for ingenuity, hands-on-training, and a whole lot of Google searching. The beginning of my frustration and learning curve be commences.
Setup & Installation
In conversations with the developers at work, I learned that Acquia offered a simple to use and easy setup package for new users to Drupal. Best of all, it was available for free. This open source stuff is new to me, since most of my professional web design career has been spent on ASP.NET. I downloaded the Windows installer package and I was off. I quickly learned that this may not be the best idea, since I am a bit of a purist and hate having a cluttered PC. I resorted to setting up a clean installation on my web host.
It was pretty painless, I chose the name of the database and the root administrator name/password and voila, the site is ready. After a little tinkering and some reading on common modules, I hit the module download section and grabbed the essentials: CCK, Views, ImageCache, PathAuto, Token and some CCK input types (FileField, ImageField, ImageField Crop, and Link). Also, to further improve the search engine optimization of my site, I installed Nodewords, Page Title and Custom Breadcrumbs.
Creating My First Content Type
With CCK installed and configured, I decided I needed to start with a custom content type for my portfolio project items. I went to admin/content/types/add and started to create my new content type. I gave it the name of Portfolio Project; changed the title field label to Project Name and also changed the Body field label to Description; I checked off Published and Promoted to front page (which would later be a filter for the marquee view on the home page). I disabled comments and checked Show Field for Page Titles, and gave it a default pattern of [page-title] - Portfolio | [site-name]. I saved the content type and then went into manage the fields.
I identified two additional fields that I would need: screenshot (image field) and URL (link field). I added a field with the label Screenshot and the name of field_screenshot. I selected File as the type and Image as the widget and then moved the fields around to what seemed logical and pressed Save. From the Image field settings screen, I changed the accepted formats to only jpg and jpeg. I changed the path to be in a central location (so I can easily manage later on) and enabled custom Alt text and made the field required. I saved the field settings and went back and added the URL field. It was pretty straight forward and I soon had the fields set; however, for the image field, I would need to setup ImageCache presets for the various sizes needed.
Setting Up ImageCache Presets
The way that ImageCache works is by setting up steps that the module will follow to give you a re-sized, cropped and possibly sharpened image for display that will be cached for faster loading. The first preset that I created was for the marquee image. Essentially, it is a screenshot of a page from the project that I designed/developed and it needs to be re-sized and cropped to a 400x300 image. I create the new preset and give it a Preset Namespace name of marquee. My first action is to trim off the edges, so I create a Crop action that is set to 1100 pixels wide, 100% tall, centered horizontally and vertically aligned to the top. From there, I can scale the image, so I create a Scale action with a width of 400 pixels. Lastly, I trim off the excess from the bottom with a Crop action with a width of 100% and a height of 300 that is centered horizontally and aligned to the top. This will give me a perfect, unified image to use for the marquee section for every Portfolio Project screenshot image that I add.
The next preset I needed was for the thumbnails on the Portfolio list page. The end result is an image that is 270x140, so the first step is to trim down to the 1100 pixels, just like we did for the marquee preset and what I will do for each preset. From there, I scale the image down to 270 pixels wide and then I crop the image height to 140. The last preset, for the actual images that show on the details page, I normalize the image by cropping to 1100 pixels wide. Then I scale it to 580 pixels wide and leave the rest so that the user can see the entire page.
Continue reading about my experience of building my first site on Drupal in my next blog.
