Oliver Davies - Freelance Drupal & Web Developer

Installing and configuring the Image Caption module

Oliver Davies — Fri, 20 Aug 2010 14:10:28 +0000

Up until as recent as last week, whenever I added an image into one of my Blog posts, I was manually adding the caption below each image and styling it accordingly. That was until I installed the Image Caption module.

The Image Caption module uses jQuery to dynamically add captions to images. Here is a walkthrough of the process that I followed to install and configure the module. As always, I used Drush to download and enable the module, then visited the Image Caption Settings page (admin/settings/image_caption). Here, I select which node types should be included in image captioning. In my case, I only wanted this to apply to Blog posts.

As I use the FileField, ImageField and Insert modules to add images to my posts, as oppose to via a WYSIWYG editor, I'm able to add the CSS class of 'caption' to my images.

Now, all images inserted this way will have the CSS class of 'caption'.

As the Image Caption module uses the image's title tag to create the displayed caption, I enabled the custom title text for my Image field so that when I upload an image, I'm prompted to enter text for the caption.

This results in a span called 'image-caption-container' around the inserted image, and a caption below it called 'image-caption' containing the text.

All that's left is to style these classes within your CSS stylesheet.

External Links:

Image Caption module

Create a Better Photo Gallery in Drupal - Part 2

Oliver Davies — Tue, 17 Aug 2010 10:00:10 +0000

At the end of my last post, I'd finished creating the first part of the new photo gallery, but I wanted to change the dates of the published photos to reflect the ones on the client's original website.

Firstly, I'll refer to the previous list of published galleries that I created before, and create something different that also displays the created and modified dates. Picking the node ID of the required gallery, I used the following SQL query to display a list of photos.

SELECT n.title, n.nid, n.created, n.changed, p.field_gallery_nid
FROM node n, content_type_photo p
WHERE n.type = 'photo'
AND p.field_gallery_nid = 103
AND n.nid = p.nid
ORDER BY n.nid ASC;

When I look back at the old photo gallery, I can see that the previous 'last added' date was June 27, 2008. So, how do I update my new photos to reflect that date? Using this website, I can enter the required date in its readable format, and it will give me the equivilent UNIX timestamp. To keep things relatively simple, I'll set all photos within this gallery to the same time.

The result that I'm given is '1217149200'. I can now use an UPDATE statement within another SQL query to update the created and modified dates.

UPDATE node 
INNER JOIN content_type_photo
ON node.nid = content_type_photo.nid
SET node.created = '1217149200', node.changed = '1217149200'
WHERE content_type_photo.field_gallery_nid = 103;

Now when I query the database, both the created and modified databases have been updated, and when I return to the new photo gallery, the updated value is being displayed.

Once the changes have been applied, it's a case of repeating the above process for each of the required galleries.

In the next post, I'll explain how to add a count of published galleries and photos on the main photo gallery page, as well as how to install and configure the Shadowbox module.

Create a Better Photo Gallery in Drupal - Part 1

Oliver Davies — Wed, 11 Aug 2010 22:00:22 +0000

Recently, I converted a client's static HTML website, along with their Coppermine Photo Gallery, into a Drupal-powered website.

Over the next few posts, I'll be replicating the process that I used during the conversion, and how I added some additional features to my Drupal gallery.

To begin with, I created my photo gallery as described by Jeff Eaton in this screencast, downloaded all my client's previous photos via FTP, and quickly added them into the new Gallery using the Imagefield Import module (which I mentioned previously).

So, here is the current state of the photo gallery:

When I compare this to the previous gallery, I can see several differences which I'd like to include. The first of which is the number of photos in each gallery, and the date that the most recent photo was added.

To do this, I'd need to query my website's database. To begin with, I wanted to have a list of all the galleries on my site which are published, and what they're unique node ID values are. To do this, I opened Sequel Pro and entered the following code:

SELECT title AS title, nid AS gallery_id
FROM node
WHERE type = 'gallery'
AND status = 1;

This then returned the following:

As the nid value of each gallery corresponds with the 'field_gallery_nid' field within the content_type_photo field, I can now query the database and retrieve information about each specific gallery.

For example, using aliasing within my SQL statement, I can retrieve a list of all the published photos within the 'British Squad 2008' gallery by using the following code:

SELECT n.title, n.nid, p.field_gallery_nid
FROM node n, content_type_photo p
WHERE p.field_gallery_nid = 105
AND n.status = 1
AND n.nid = p.nid;

I can easily change this to count the number of published nodes by changing the first line of the query to read SELECT COUNT(*).

SELECT COUNT(*)
FROM node n, content_type_photo p
WHERE p.field_gallery_nid = 105
AND n.status = 1
AND n.nid = p.nid;

As I've used the Views Attach module, and I'm embedding the photos directly into the Gallery nodes, I easily add this to each gallery by creating a custom node-gallery.tpl.php file within my theme. I can then use the following PHP code to retrieve the node ID for that specific gallery:

$selected_gallery = db_result(db_query("SELECT nid FROM {node} WHERE type = 'gallery' AND title = '$title'"));

I can then use this variable as part of my next query to count the number of photos within that gallery, similar to what I did earlier.

$gallery_total = db_result(db_query("SELECT COUNT(*) FROM {content_type_photo} WHERE field_gallery_nid = $selected_gallery"));

Next, I wanted to display the date that the last photo was displayed within each album. This was done by using a similar query that also sorted the results in a descending order, and limited it to one result - effectively only returning the created date for the newest photo.

$latest_photo = db_result(db_query("SELECT n.created FROM {node} n, {content_type_photo} p WHERE p.field_gallery_nid = $selected_gallery AND n.nid = p.nid ORDER BY n.created DESC LIMIT 1"));

This was all then added into a 'print' statement which displayed it into the page.

if($selected_gallery_total != 0) {  
  print '<i>There are currently ' . $selected_gallery_total . ' photos in this gallery. Last one added on ' . $latest_photo . '</i>';
}

OK, so let's take a look at the Gallery so far:

You will notice that the returned date value for the latest photo added is displaying the UNIX timestamp instead of in a more readable format. This can be changed by altering the 'print' statement to include a PHP 'date' function:

if($selected_gallery_total != 0) {
  print '<i>There are currently ' . $selected_gallery_total . ' photos in this gallery. Last one added on ' . date("l, jS F, Y", $latest_photo) . '.</i>';
}

The values that I've entered are from this page on PHP.net, and can be changed according on how you want the date to be displayed.

As I've added all of these photos today, then the correct dates are being displayed. However, on the client's original website, the majority of these photos were pubished several months or years ago, and I'd like the new website to still reflect the original created dates. As opposed to modifying each individual photograph, I'll be doing this in bulk in my next post.

An Overview of the Admin:hover module

Oliver Davies — Tue, 10 Aug 2010 15:57:55 +0000

Sorry for the lack of Blog posts lately, but my new job that I started a few weeks ago has certainly been keeping me busy! I've got a few more posts that I'm preparing content for, and I'll hopefully be back into my weekly-post routine before too long!

Today, I'd like to just give a quick overview of the Admin:hover module. It basically adds an administrative menu that pops up when you hover over a node or block within your Drupal website - the kind of functionality that was present within previous versions of the Admin module. It also integrates well with the Devel and Clone modules.

I've found this to be extremely useful whilst working on photo galleries etc. where multiple nodes are displayed in a grid format and I quickly need to publish or unpublish something for testing purposes. No longer do I need to open each node, or go into the administration area to perform the required actions.

It is also possible to customise which links are available from within the adminstration area. The possible selections that I currently have on this site are as follows:

Node links:

Edit
Publish
Unpublish
Promote
Unpromote
Make sticky
Make unsticky
Delete
Clone
Dev load
View author
Edit author
Add

Block links:

Configure block
Add block

Although, as I have additional contributed modules installed, some of these may not neccassaily be available out of the box.

Another potential candidate if (or when) I decide to add another 10 Useful Drupal 6 Modules that I use on every Project post!

Creating a Garland sub-theme and enabling the Color module

Oliver Davies — Mon, 19 Jul 2010 19:15:18 +0000

For this site, I've been using Minnelli - a fixed-width version of Drupal 6's default Garland theme - along with the Color module to change the site's default colour set to Bluemarine as oppose to the standard Blue Lagoon.

Recently, I decided that I wanted to edit the page.tpl.php and node.tpl.php template files, but as I was using a core theme, I wasn't able to change these files. So, I created a copy of the Minelli theme directory, renamed it, and placed it into my sites/all/themes directory. As with the default Minnelli theme, my copied theme would need to use Garland as a base theme, to do this, I added the following code to its .info file:

base theme = garland

Click here for more information on sub-themes.

To allow the Color module to work with this theme, the 'Color' directory needs to be copied as part of the Minnelli theme. Once this was copied, I was able to visit admin/build/themes/settings/mytheme to configure its settings.

However, when I attempted to apply my new colour set, 4 error messages were being displayed telling me that files could not be copied as no file with that name existed. When I looked into it, the files that were missing were images contained within a seperate folder. I opened the color.inc file, and instead of changing the paths and values within it, I decided to find an alternative solution.

My solution was to remove the copied folder, and to create symlinks instead.

Opening a terminal window, I created symlinks to the original color and images directories within the Garland theme folder, as well as Garland's style.css file.

ln -s ../../../../themes/garland/color color
ln -s ../../../../themes/garland/images images
ln -s ../../../../themes/garland/style.css style.css

With these links created, my new theme could reference the original directories and files within the Garland folder, and apply my new theme configuration settings.

Thanks (again)

Oliver Davies — Wed, 14 Jul 2010 00:00:20 +0000

Only 8 days since my previous thank you, I am absolutely thrilled to announce that the total number of visits to the site has almost doubled from 574 to 1,026 since the 19th March.

So, I think that another round of thanks are in order to all readers, subscribers to the RSS feed, commenters, followers on Twitter, and fans on Facebook...

Thank you, and come back again soon!

An Overview of the Teleport Module

Oliver Davies — Mon, 12 Jul 2010 13:00:50 +0000

As a heavily-reliant Quicksilver user on my MacBook Pro, I was glad when I found the Teleport module for Drupal (due to Elliott Rothman's tweet).

When you press a configurable hot-key, a jQuery dialog box appears where you can search for nodes by title or path, or directly enter the path that you want to navigate to. This will greatly reduce the number of clicks that I need to perform to get to my desired page - even compared to the Admin and Administration Menu modules.

Although it's not a new module (the first commits were 2 years ago), I hope that they are still planning on achieving the list of future directions listed on their Drupal.org project page:

Make interface act more like Quicksilver (i.e. you should only have to press Enter once to launch)
'Actions' like Quicksilver: if you select a node, a second input should appear with options to go to the View page, Edit page, (un)publish, etc. Same with users.
Hook into more non-node content, like taxonomy terms and functions in the API module.

Personally, this will make navigation around both the front-end and administration area of my Drupal sites so much easier, and is a definite contender if I decide to do another 10 Useful Drupal Modules list...!

Drupal Planet

Oliver Davies — Wed, 07 Jul 2010 13:26:38 +0000

I'm pleased to announce that my Blog posts are now being imported into the Drupal.org/Drupal Planet aggregator! http://drupal.org/aggregator/sources/664

Quickly Adding a Taxonomy Term to Multiple Nodes using SQL

Oliver Davies — Wed, 07 Jul 2010 07:00:00 +0000

In preparation for my Blog posts being added to Drupal Planet, I needed to create a new Taxonomy term (or, in this case, tag) called 'Drupal Planet', and assign it to new content to imported into their aggregator. After taking a quick look though my previous posts, I decided that 14 of my previous posts were relevant, and thought that it would be useful to also assign these the 'Drupal Planet' tag.

I didn't want to manually open each post and add the new tag, so I decided to make the changes myself directly into the database using SQL, and as a follow-up to a previous post - Quickly Change the Content Type of Multiple Nodes using SQL.

Again, before changing any values within the database, ensure that you have an up-to-date backup which you can restore if you encounter a problem!

The first thing I did was create the 'Drupal Planet' term in my Tags vocabulary. I decided to do this via the administration area of my site, and not via the database. Then, using Sequel Pro, I ran the following SQL query to give me a list of Blog posts on my site - showing just their titles and nid values.

I made a note of the nid's of the returned nodes, and kept them for later. I then ran a similar query against the term_data table. This returned a list of Taxonomy terms - showing the term's name, and it's unique tid value.

The term that I was interested in, Drupal Planet, had the tid of 84. To confirm that no nodes were already assigned a taxonomy term with this tid, I ran another query against the database. I'm using aliases within this query to link the node, term_node and term_data tables. For more information on SQL aliases, take a look at http://w3schools.com/sql/sql_alias.asp.

As expected, it returned no rows.

The table that links node and term_data is called term_node, and is made up of the nid and vid columns from the node table, as well as the tid column from the term_data table. Is it is here that the additional rows would need to be entered.

To confirm everything, I ran a simple query against my previous Thanks! post (nid 216). I know that the only taxonomy term associated with this post is 'Personal', which has a tid value of 44.

Once the query had confirmed the correct tid value, I began to write the SQL Insert statement that would be needed to add the new term to the required nodes. The nid and vid values were the same on each node, and the value of my taxonomy term would need to be 84.

Once this had completed with no errors, I returned to the administration area of my Drupal site to confirm whether or not the nodes had been assigned the new term.

I navigated to the URL for the tag (/tag/drupal-planet), and the required nodes were now showing.

Thanks!

Oliver Davies — Mon, 05 Jul 2010 08:43:51 +0000

Since launching this site back on the 19th March, I've been quite suprised by the number of visitors I've recevied! At the time of writing this, I've received 574 visits and 1,269 pageviews - which isn't bad considering that, until a few weeks ago, I was only advertising my posts on my personal Twitter and Facebook accounts! I'm also quite suprised that one of my earliest Blog posts, Styling Drupal 6's Taxonomy Lists with PHP, CSS and jQuery, is still currently the 5th most-viewed page on my site!

I'd like to take this opportunity to thank everyone who's visited my site so far, everyone who's subscribed to the RSS feed, everyone who's referred my posts to sites such as DZone and StumbleUpon, everyone who's re-tweeted my posts on Twitter, and everyone who's emailed me with feedback and comments about my posts.

Using VirtualHostX to Quickly Create Virtual Hosts on Mac OS X

Oliver Davies — Fri, 02 Jul 2010 20:00:13 +0000

This isn't a Drupal related topic per se, but it is a walk-through of one of the applications that I use whilst doing Drupal development work. I assume, like most Mac OS X users, I use MAMP to run Apache, MySQL and PHP locally whilst developing. I also use virtual hosts in Apache to create local .dev domains which are as close as possible to the actual live domains. For example, if I was developing a site called mysite.com, my local development version would be mysite.dev.

Normally, I would have to edit the hosts file and Apache's httpd.conf file to create a virtual host. The first to set the domain and it's associated IP address, and the other to configure the domain's directory, default index file etc. However, using VirtualHostX, I can quickly create a virtual host without having to edt any files. Enter the virtual domain name, the local path and the port, and apply the settings. VirtualHostX automatically restarts Apache, so the domain is ready to work straight away. You can also enter custom directives from within the GUI.

There's also an option to share the host over the local network. Next, I intend on configuring a virtual Windows PC within VMware Fusion to view these domains so that I can do cross-browser testing before putting a site live.

This may or may not be required, but I ensured that my Apache configuration within MAMP was set to port 80, and that VirtualHostX was using Apache from MAMP instead of Apple's built-in Apache.

Note: One problem that I had after setting this up, was that I was receving an error when attempting to open a Drupal website which said 'No such file or directory'.

After some troubleshooting, I found out that Web Sharing on my Mac had become enabled (I don't know why, I've never enabled it), and that this was causing a conflict with Apache. Once I opened my System Preferences and disabled it, everything worked fine!

This, along with MAMP, Coda, Sequel Pro, and Transmit, has become an essential tool within my development environment.

Quickly Change the Content Type of Multiple Nodes using SQL

Oliver Davies — Thu, 01 Jul 2010 16:58:19 +0000

In this Blog post, I will be changing values within my Drupal 6 site's database to quickly change the content type of multiple nodes. I will be using a test development site with the core Blog module installed, and converting Blog posts to a custom content type called 'News article'.

Before changing any values within the database, ensure that you have an up-to-date backup which you can restore if you encounter a problem!

To begin with, I created the 'News article' content type, and then used the Devel Generate module to generate some Blog nodes.

Using Sequel Pro, I can query the database to view the Blog posts (you can also do this via the Terminal in a Mac OS X/Linux, Oracle SQL Developer on Windows, or directly within phpMyAdmin):

Using an SQL 'Update' command, I can change the type value from 'blog' to 'article'. This will change every occurance of the value 'blog'. If I wanted to only change certain nodes, I could add a 'Where' clause to only affect nodes with a certain nid or title.

Now, when I query the database, the type is shown as 'article'.

Now, when I go back into the administration section of my site and view the content, the content type now shows at 'News article'.

This is quite a simple example - it assumes that both content types are identical, and have the same CCK fields. If this is not the case, then more complex SQL would be needed.

The next time that I do a more complex task using SQL, I'll also add it here as another Blog post.

Creating a Photo Gallery from Flickr using Feeds, CCK and Views

Oliver Davies — Mon, 28 Jun 2010 16:15:03 +0000

In this tutorial, I'll show you how I created my photo gallery which uses photos imported from my Flickr account.

The modules that I'll use to create the Gallery are:

The first thing that I did was to create a content type to store my imported images. I named it 'Photo', removed the Body field, and added an Image field.

Next, I installed and configured the Feeds and Image Grabber module. I used an overridden default Feed to import my photos from Flickr using the following settings:

Basic settings: I changed the Refresh time to 15 minutes.
Processor settings: I changed the content type to 'Photo', and the author's name from 'anonymous'.
Processor mapping: I added a new mapping from 'Item URL (link)' to 'Photo (FIG)'. The Photo FIG target is added by the Image Grabber module.

Next, I needed to create the actual Feed (node/add/feed). I gave it a title, entered the URL to my RSS feed from Flickr, and enabled the Image Grabber for this feed.

Once the Feed is created, the latest 20 images from the RSS feed are imported and 20 new Photos nodes are created. In the example below, the image with the 'Photo' label is the Image field mapped by the Image Grabber module. It is this image that I'll be displaying within my Gallery.

With the new Photo nodes created, I then created the View to display them.

The View selects the image within the Photo content type, and displays in it a grid using an ImageCache preset. The View is limited to 20 nodes per page, and uses a full pager if this is exceeded. The nodes are sorted by the descending post date, and filtered by whether or not they are published, and only to include Photo nodes.

As an additional effect, I also included the 'Feeds Item - Item Link' field, which is basically the original link from the RSS feed. By checking the box the exclude the item from the display, it is not shown, but makes the link available to be used elsewhere. By checking the box 'Re-write the output for this field' on the 'Content: Photo' field, I was able to add the replacement token (in this case, [url]) as the path for a link around each image. This meant that when someone clicked a thumbnail of a photo, they were directed to the Flickr website instead of the node within my Drupal site.

As usual, please feel free to comment on this post, or contact me with any feedback!

10 Useful Drupal 6 Modules that I use on every Project

Oliver Davies — Fri, 25 Jun 2010 09:10:53 +0000

Aside from the obvious candidates such as Views, CCK etc, here are a list of 10 contributed modules that I currently use on each Drupal project.

So, in no particular order:

Admin:
The admin module provides UI improvements to the standard Drupal admin interface. I've just upgraded to the new 6.x-2.0-beta4 version, and installed the newly-required Rubik/Tao themes. So far, so good!
Better Permissions/Filter Permissions:
Basic permissions is a basic module which enhances the Drupal Permissions page to support collapsing and expanding permission rows. Filter permissions provides filters at the top of the Permissions page for easier management when your site has a large amount of roles and/or permissions.
Better Formats:
Better formats is a module to add more flexibility to Drupal's core input format system.
Clone module:
Allows users to make a copy of an existing item of site content (a node) and then edit that copy.
Vertical Tabs:
Integrated into Drupal 7 core, this module adds vertical tabs to the node add and edit forms.
Context:
Context allows you to manage contextual conditions and reactions for different portions of your site. You can think of each context as representing a "section" of your site. For each context, you can choose the conditions that trigger this context to be active and choose different aspects of Drupal that should react to this active context.
Node Picker:
A rewrite of the module TinyMCE Node Picker. Allows you to easily create links to internal nodes.
Module Filter:
What this module aims to accomplish is the ability to quickly find the module you are looking for without having to rely on the browsers search feature which more times than not shows you the module name in the 'Required by' or 'Depends on' sections of the various modules or even some other location on the page like a menu item.
Zenophile:
Quickly create Zen subthemes.
Add Another:
Add another displays a message after a user creates a node, and/or displays an "Add another" tab on nodes allowing them to make another node of the same type. You can control what roles and node types see this feature.

Please feel free to comment with any other useful modules that you use!

Creating a Block of Social Media Icons using CCK, Views and Nodequeue

Oliver Davies — Wed, 23 Jun 2010 21:08:32 +0000

Recent work means that I'm a bit later posting this than I originally intended...

I recently decided that I wanted to have a block displayed in a sidebar on my site containing icons and links to my social media profiles - Twitter, Facebook etc. I tried the Follow module, but it lacked the option to add extra networks such my Drupal.org account, and my RSS feed. I started to create my own version, and then found this Blog post by Hank Palan.

I created a 'Social icon' content type with the body field removed, and with fields for a link and image - then downloaded the favicons from the appropriate websites to use.

However, instead of using a custom template (node-custom.tpl.php) file, I used the Views module.

I added fields for the node titles, and the link from the node's content. Both of these are excluded from being displayed on the site. I then re-wrote the output of the Icon field to create the link using the URL, and using the node's title as the image's alternative text and the link's title.

I also used the Nodequeue module to create a nodequeue and arrange the icons in the order that I wanted them to be displayed. Once this was added as a relationship within my View, I was able to use node's position in the nodequeue as the sort criteria.

To complete the process, I used the CSS Injector module to add some aditional CSS styling to position and space out the icons.

Updated Navigation

Oliver Davies — Thu, 10 Jun 2010 09:38:53 +0000

I've done some re-structuring of the main navigation menu:

The Projects and Testimonials pages have been moved to the Work section.
The Contact page has now been divided into seperate Personal and Work forms.

Improving Imagecache JPG quality

Oliver Davies — Wed, 02 Jun 2010 14:13:32 +0000

Whilst uploading images for my Projects and Testimonials sections, I noticed that the Imagecache-scaled images weren't as high a quality the originals on my Mac. I did some searching online and found out that, by default, Drupal resamples uploaded jpgs to 75% of their original quality.

To increase the quality of your images, change the setting in the two following places:

admin/settings/imageapi/config
admin/settings/image-toolkit

The first one is for ImageAPI. Primarily, this means Imagecache presets.

The second one is for core's image.inc. This is used for resizing profile pictures in core, and some contrib modules.

Once changed, I did have to flush each of the Imagecache presets (admin/build/imagecache) for the changes to take effect.

Importing images using the Imagefield_Import module

Oliver Davies — Sat, 29 May 2010 10:40:55 +0000

Thanks to Bob at Mustardseed Media for tweeting about this module. It's undoubtedly saved me hours of work today alone!

I've recently started a personal project converting a website to Drupal. It's currently a static HTML/CSS site which also uses the Coppermine Photo Gallery. As part of building the new website, I wanted to move all the photos from the existing site onto the new one. However, with 1260 photos in 17 albums, this could have been a lengthy process!

I created a new Drupal-powered Gallery as described in this screencast by Jeff Eaton - using the CCK and Imagefield modules, and re-created each of my existing Gallery nodes. Using the Imagefield_Import module, I was then able to quickly import the photos into the new Galleries.

I downloaded all the photos from the previous Gallery via FTP, and installed and configured the Imagefield_Import module.

I created an 'Import' folder, selected the target field and mode. In this case, I want each image to be imported onto its own Photo node. I moved the photos for the first album into the Import folder, and loaded the 'Import Images' screen (admin/content/imagefield_import).

Due to my earlier configuration, I was able to see a thumbnail of each image, as well as automatically create the node's title by using the filename. I also had the option to select which Gallery node that these photos should be referenced to.

After clicking 'Import', a node is created for each photo, the image is uploaded, and added to the selected Gallery.

Just another 1248 photos to go...

Create a Slideshow of Multiple Images using the Fancy Slide module

Oliver Davies — Wed, 26 May 2010 20:42:55 +0000

Whilst updating my About page, I thought about creating a slideshow of several images instead of just the one static image. When I looking on Drupal.org, the only slideshow modules were to create slideshows of images that were attached to different nodes - not multiple images attached to one node. Then, I found the Fancy Slide module. It's a jQuery Slideshow module with features that include integration with the CCK, ImageCache and Nodequeue modules.

I added an CCK Image field to my Page content type, and set the number of values to 3, then uploaded my images to the Page.

Once the Images were added, I went to the Fancy Slide page (admin/content/fancy-slide) and created the slideshow.

I added the dimensions of my images, the type of animation, specified the node that contained the images, the slideshow field, delay between slides and transition speed. With the slideshow created, it now needed embedding into the page.

I added the following code into my About page, as described in the Fancy Slide readme.txt file - the number representing the ID of the slideshow.

<?php print theme('fancy_slide', 1); ?>

In my opinion, this adds a nice effect to the About page. I like it because it's easy to set up, and easy to add additional images later on if required.

Site Updated

Oliver Davies — Wed, 26 May 2010 20:01:35 +0000

I've recently added the Projects and Testimonials sections to the site, and updated the About Me page.

Keyword Link Module

Oliver Davies — Sun, 23 May 2010 22:53:17 +0000

Following on from previous Blog posts about Automatic Node References and the Node Picker Module, I have now found the Keyword Link module!

This module does exactly what I was looking for before, where I can create a keyword and an associated link which gets created automatically. Although it's a development version, I've tested it on my local version of this site without any problems. It's being used now to automatically link the word 'Drupal' to Drupal.org, and to create links to some internal pages like the testimonials page.

Unfortunately, I was already 90% of the way through developing my own module before finding it.

Quickly Create Zen Subthemes Using the Zenophile Module

Oliver Davies — Mon, 10 May 2010 15:53:46 +0000

If you use the Zen theme, then you should also be using the Zenophile module!

The Zenophile module allows you to very quickly create Zen subthemes from within your web browser, as well as editing options such as the site directory where it should be placed, the layout type (fixed or fluid), page wrapper and sidebar widths, and the placement of the sidebars.

For more information about the Zenophile module, check out this video by Elliott Rothman.

Conditional Email Addresses in a Webform

Oliver Davies — Thu, 06 May 2010 12:12:55 +0000

Whilst doing some additional work on the Costley & Partners website, I created an advanced 'Contact Us' form using the Webform module. However, as well as the additional fields that I'd created, I also wanted a drop-down menu where the user could choose either 'General enquiry' or 'Website feedback', and for the message to be send to the associated email address - the same as the feature is available in Drupal's core Contact module.

Creating the Form

I created a new Webform to serve as a simple Contact form, but left the main configuration until after I created the form components. I added 'Name', 'Email', 'Subject' and 'Message' fields, as well as a 'Category' select list. Below 'Options', I entered each of my desired options in the following format:

Email address|Visible name

Configuring the form

I went back to the form configuration page and expanded 'Conditional Email Recipients', and selected my Category. Note that the standard 'Email To' field above it needs to be empty. Originally, I made the mistake of leaving addresses in that field which resulted in people being sent emails regardles of which category was selected. I then configured the rest of the form.

Then, when I went to the finished form, the category selection was available.

Using ImageCache and ImageCrop for my Portfolio

Oliver Davies — Wed, 28 Apr 2010 18:52:35 +0000

Whilst working on my own portfolio/testimonial website, I decided to have a portfolio page displaying the name of each site and a thumbnail image. For this Blog post, I'll be using a site called Popcorn Strips which I built for a friend earlier this year as an example.

I created a content type called 'Project' with a CCK ImageField called 'Screenshot'. I created a project called Popcorn Strips, used the ScreenGrab add-on for Mozilla Firefox to take a screenshot of the website, and uploaded it to the project node.

I created a View to display the published projects, and an ImageCache preset to create the thumbnail image by scaling and cropping the image to a size of 200x100 pixels.

Although, this automatically focused the crop on the centre of the image, whereas I wanted to crop from the top and left of the image - showing the site's logo and header.

I installed the ImageCrop module, which add a jQuery crop function to the standard ImageCache presents. I removed the original Scale and Crop action and replaced it with a Scale action with a width of 200px.

I then added a new 'Javascript crop' action with the following settings:

Width: 200px
Height: 100px
xoffset: Left
yoffset: Top

Using the newly-updated ImageCache preset, the thumbnail image displays perfectly!

3 Golden Rules to Keeping Your Data - Backup... Backup... Backup!

Oliver Davies — Wed, 28 Apr 2010 09:18:16 +0000

Last night, I decided to update my live Drupal 6 multi-site setup. My development version is continually running the latest version of the Drupal core code and modules, but my live setup was slightly outdated. I'd also re-organised my 'sites' structure slightly on my development setup, and found several modules on the live server that I wasn't using. So, I decided to remove everything from the live server and replace it with the shiny up-to-date version from my development setup.

I'll be one of the first to admit that I don't always 100% backup my code and databases everytime I do an update in development, but seeing I was altering live sites (including sites that I'd built for friends as personal projects) I opened Terminal and created a ZIP archive of my entire setup (which took a while) and also logged into phpMyAdmin and exported a copy of my databases. I placed these in a folder called 'Backups' on my hard drive and renamed both files to yesterday's date.

I'm glad that I did!

Drupal's update.php file.

To begin with, I couldn't log into any of my sites, which I realised quickly was because I'd copied over each settings.php file from development, and that these weren't attempting to connect to the live databases. Having forgotten some of the passwords for some of my databases, I extracted the settings.php file for each site and uploaded it back to the live server. I also realised that one of my sites was in a different location on my development setup and hadn't been uploaded, so I moved it into the appropriate directory (where it should have been in the first place) and uploaded it. I then found that the new theme for this site that I've been working on was missing! Again, I extracted it from my backup archive and uploaded it.

The moral of the story is always backup code and databases when updating! Hopefully the update process will be a bit easier and quicker in Drupal 7. From now on, I will make sure that I take a copy of my remote code and databases, maybe once a month, just in case! Whilst I didn't have any major problems this time, it could have been much worse!

Node Picker Module

Oliver Davies — Fri, 23 Apr 2010 07:28:06 +0000

Since my last post about Automatic Node References, I've found and started using the Node Picker module.

It doesn't give me the exact features I was looking for, but it's a step in the right direction. It adds a button onto the WYSIWYG editor installed on my site (in this case, TinyMCE) which gives me a jQuery pop-up box listing all my internal content. There is also a filter option which can be used to filter by node title or content type.

I'll keep searching for an automatic solution, and will post the results on this site.

Automatic Node References

Oliver Davies — Sat, 17 Apr 2010 06:32:12 +0000

I was recently doing some more development work on a website that I created for Costley & Partners - a solicitors firm based in Caerphilly, South Wales. Among other things, there is a view showing all members of staff, and a view listing of of the services provided by the firm. The staff member pages list the specialist areas of law for each employee (where applicable), and the the services pages also describe the employee that specialises in that area.

What I'd like, is have all references to a staff member on a services page link to their page, and all references to a service on a staff member page link to the page where they can get more information about that service. However, instead of the user manually having to add the links themselves, I'd like for it to happen automatically - sort of link how the Twitter module automatically links to usernames and hashtags.

My thoughts are to have a module where you declare the terms, and their associated URLs, and then add a filter to an input module to search for the terms and convert them into links. I've searched through Drupal.org, but can't find anything that adds that functionality.

Maybe this will be a good module development project?

Subscribe via RSS

Oliver Davies — Wed, 07 Apr 2010 08:46:34 +0000

For those who aren't aware, you can subscribe to my Blog posts via the RSS feed. Updates are also posted on my Twitter and Facebook pages when new Blog posts are added.

Styling Drupal 6's Taxonomy Lists with PHP, CSS and jQuery

Oliver Davies — Mon, 05 Apr 2010 18:22:56 +0000

Whilst developing this, and other Drupal websites for clients, I decided that I wanted to categorise content using the taxonomy system. However, I wasn't happy with the way that Drupal displayed the terms lists by default, and I started comparing this to other websites that I look at.

Part 1 - Editing node.tpl.php

To start with, I wanted to have something that described what the list was displaying - like in the second example above. I wanted to have the words 'Posted in' displayed before the list of terms. To do this, I had to edit the node template file that exists within my theme folder (sites/all/themes). As I only wanted this change to affect my Blog posts, the file that I needed to change is node-blog.tpl.php

I scrolled down until I found the piece of code that displayed the terms list:

<?php if ($terms): ?>
  <div class="terms terms-inline">
    <?php print t(' Posted in ') . $terms; ?>
  </div>
<?php endif; ?>

Adding print t(' Posted in ') will print the words 'Posted in' before outputing the terms.

Part 2 - Adding the CSS

I then added some CSS to re-size the spacing between the items, and then add the commas between them to seperate them:

.terms ul.links li {
  margin-right: 1px;
  padding: 0;
}
.terms ul.links li:after {
  content: ",";
}
.terms ul.links li.last:after {
  content: ".";
}

Part 3 - Adding the jQuery

I created a file named script.js in my theme folder with the following code in it. After clearing Drupal's caches, this file is automatically recognised by Drupal 6.

if(Drupal.jsEnabled) {
  $(document).ready(function() {
    $('.terms ul.links li.last') .prev() .addClass('test');
  })
}

This code finds the last item in the list, uses .prev to select the one before it, and then uses .addClass to assign it the HTML class of "test". We can then use this class to target it with specific CSS.

Part 3.1 - Adding the additional CSS

Using the new CSS class, I added:

.terms ul.links li.test:after {
  content: " and";
}

Conclusion

In my opinion, this looks a lot better than the default, and looks a lot better on Blog websites, or any website which uses Drupal's taxonomy system.

Please feel free to comment! Any feedback would be greatly appreciated!

Change of Plan

Oliver Davies — Sat, 20 Mar 2010 18:00:33 +0000

Unfortunately, I haven't had time to finish my next Blog post, but I'll post when I'm back from holiday!

Personal Site Launched!

Oliver Davies — Fri, 19 Mar 2010 08:30:37 +0000

Yes, there is still a LOT of work to do theming this site (it's currently just a slightly-modified Zen subtheme), but the basic development work is more-or-less done, and I think that I've gone long enough without a personal website!

As I continue to develop and build this website, I'll be adding Blog posts and tutorials of the technologies and techniques I've used, as well as reviews of contributed modules and other things that I've used.

I will also be adding a Portfolio of completed development work which will include write-ups of the development process - similar to the Success Stories section on Drupal.org.

The next Blog post/first tutorial will be posted in the next day or so! Please come back again soon, or subscribe to my RSS feed.