Drupal Articles » Drupal case study on how this site was created


By David - Posted on 29 December 2008

This site is not very complex, but I thought some people might find it helpful if I shared a few tips and tricks about how a few key features of it were created. Please also see the sub-pages listed at the bottom of this page, for exported copies of my Media CCK type, and the View for my Music page.

Theme of the site

The theme of this site is based on top of the Marinelli theme, and is adjusted in a few simple ways with just CSS, in order to customize the colors, header image, and typography. You can of course modify your copy of the Marinelli theme with these colors, though I'd appreciate it if you do use a different image in your header (the source image is from stock.xchng though is modified the way I wanted it to look). Feel free to copy any CSS in the source of my site.

Home page

The home page of the site is created using one of my preferred Drupal home page creation techniques, called Creating a home page using CCK. I created a single "Home" node and wrote some welcome text in the Body. To theme this page, I simply saved a copy of the Marinelli theme's node.tpl.php file as node-home.tpl.php, and for the content area of the template, replaced it with the following:

<div class="content">

<div id="home-main">
  <?php print $content?>
</div>

<div id="home-sidebar">
  <?php print theme('blocks', 'home_sidebar'); ?>
</div>

</div>

This simply displays the Body text which I wrote into a single "home" CCK node, and also includes a Views-generated block that I created for showcasing a list of the most recent projects. At Administer > Site configuration > Site information (admin/settings/site-information), I set the path for my home page to the path of my "home" node (e.g. either the path alias I used, home, or the original path of my home node, node/98). For a similar technique, see the video Custom Drupal Homepages.

The Views-generated "Recent Projects" block is included in a custom "Home sidebar" region which I added to the marinelli.info file of the theme:

regions[home_sidebar] = Home sidebar

A note of interest: the <?php print theme('blocks', 'home_sidebar'); ?> code as seen in the above template is how you can embed a custom region "within" the content area (in a node-content_type.tpl.php file, rather than just in a page.tpl.php file where regions usually are). You can then assign as many blocks as you want to this region from admin/build/block.

Music page

The Music page of my site displays a slideshow of audio and video files of my latest music projects. Each of these media files is uploaded to its own "Media" node. The media functionality for this page is powered by the SWF Tools module (there's a great video guide to using SWF Tools available). No video processing is done on the server in this case (rather, I convert my videos into Flash .flv format before uploading them using a program called VisualHub).

If you prefer to host your video on an 3rd party video site, you can simply use the Embedded Media Field module instead of SWF Tools. Here's a great video which explains how to use Embedded Media Field.

The Media content type also uses a separate Imagefield to upload a pre-selected frame of the video (images are stored at a path of media-image), and is using the JW Player 4, the Stylish custom skin using color settings in SWF Tools, and a background image behind the player in CSS to simulate rounded edges for the player. The slideshow is powered by the Views Carousel module. The order of the media is determined by each node's position in a Nodequeue (though if you are content to sort by the submission date or other criteria, then Nodequeue is unnecessary). Feel free to use Firebug to look at my CSS, which you are free to copy and use.

In my Media content type theme, I have removed the original $content variable and replaced it with separate variables to individually call up each field of the content type, which gives me much more control over each field. Here's a lesson on how to theme content types with this level of extra control.

Here is my node-media.tpl.php template:

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
   
<div class="content">

<div id="media-content">

  <div id="media-description">

    <h2><?php print $title?></h2>

    <?php print $node->field_media_description[0]['view'] ?>

    <div id="media-copyright">
      Music &copy; <?php print $node->field_media_date[0]['view'] ?> <?php print $node->field_media_owner[0]['view'] ?>
    </div>

  </div><!-- /#media-description -->

  <div id="media-player">
    <?php
   
// Displays the media player with an Imagefield preview and the Play icon turned off
     
print swf($node->field_media[0]['filepath'], array(
       
'flashvars' => array(
         
'image' => 'media-image/' . ($node->field_media_image[0]['filename']),
         
'icons' => 'false')
       ));
   
?>

     
    <?php
   
// Displays the music-only message if checked for this node
     
$musiconly = $node->field_media_musiconly[0]['view'];
      if (
$musiconly == 'musiconly') {
        print
'<div class="music-only">Music only, video not available</div>';      
      }
   
?>

  </div><!-- /#media-player -->

</div><!-- /#media-content -->

    <?php if (!$teaser): ?>
    <?php if ($links) { ?><div class="links"><?php print $links?></div><?php }; ?>
    <?php endif; ?>
   
    <?php if ($teaser): ?>
    <?php if ($links) { ?><div class="linksteaser"><div class="links"><?php print $links?></div></div><?php }; ?>
    <?php endif; ?>

</div><!-- /.content -->
</div><!-- /.node -->

Modules used

  • Administration Menu - a must-have dynamic menu for administrators.
  • Advanced Help - new contextual help system for Drupal, which currently is used by Views and CCK module.
  • CCK - allows the creation of custom fields for each of my content types.
  • FileField - behind the scenes system for handling files of all types in CCK.
  • ImageField - stores custom info about images in my content types.
  • Link - facilitates the easy creation of link fields and features in my content types.
  • Date - allows the creation of date-format fields in my content types.
  • ImageAPI - behind the scenes requirement for image processing.
  • ImageCache - creates custom image derivatives.
  • Typogrify - typographic refinements.
  • Nodequeue - allows the creation/ordering of hand-picked lists of content for display in Views.
  • BUEditor - great non-wysiwyg HTML editor/helper.
  • Code Filter - allows HTML/code examples to be displayed instead of rendered.
  • Custom Breadcrumbs - creates custom breadcrumb trails for content.
  • Global Redirect - ensures no duplicate content URLs, for improved SEO.
  • IMCE - decent image/file manager for including images and files within posts.
  • Masquerade - allows for quickly viewing the site as other user types, for testing.
  • Devel - Extremely useful tool for testing, development, theming, etc.
  • Mollom - anti-spam service.
  • Pathauto - automates the creation of SEO-friendly URLs.
  • Persistent Login - adds a Remember me option when logging in.
  • Token - behind the scenes module that helps power Pathauto and various other site features.
  • SWF Tools - core of the audio/video handling on the site.
  • Google Analytics - helper module for including Google Analytics statistics on the site.
  • Views - creates custom lists of content, such as special pages and blocks.
  • Views Carousel - powers the media slideshow on my Music page.
  • Comment Notify - emails visitors about new comments on pages where they have commented.

Hi, excuse me for my bad english..what i don't understand is that when i create new content type,es "media" i don't find any node-media.tpl.php. I have acquia_marina theme and i search node-media.tpl.php in his subfolder but nothing. why i don't have this template?what i have to do for create this one?thank yo

David's picture

The template file is not generated automatically when you make a new content type. By default all content types use node.tpl.php unless a more specific template file is found. To make this more specific template file for the Media content type, copy and paste the node.tpl.php file and rename the copied version node-media.tpl.php

You can then edit node-media.tpl.php separately, and it will be used only for nodes of the "Media" content type, while all other content will continue to use node.tpl.php as before.

If you ever have a CCK type with multiple words in its name, the template file would be named in this format (underscores between the words of the CCK name: node-your_type.tpl.php

Hope this helps :)

i have created the copy of node.tpl.php http://www.davidnewkerk.com/book/30 following your guide(i have understand the problem of my previous post), but when i insert

<?php
print swf($node->field_audio_file[0]['filepath']);
?>
wehere audio is the name of my new content type, the page return this error """"You are missing some Flash content that should appear here! Perhaps your browser cannot display it, or maybe it did not initialise correctly.""". seems that "path" is not correct

i have understand the problem...the 1pixelout player is not in the proper path...
now all work fine..
But David i have a question..
when i creat the new content type "media" with an mp3 file for example and pubblic it in firstpage i will see even if i'm anonymous user...by default anonymous user don't have the permissions for "media"..why they can see this content type?

thank you for patient

David's picture

Good, glad you were able to sort that issue out.

By default Drupal does not provide access control over which Roles can view any particular content, it only controls which Roles have permission to create, edit, or delete content. To add control over whether a Role (including anonymous) can "view" content of a specific type, you must add a content access control module. There are several to choose from, though the one I know most about myself is Content Access module. You can find other options with this search.

Hope this helps.

have you used imagecache for the thumbnails in SWF Tools? i'm using something similar:

<?php
print swf($node->field_testimonial_video[0]['data']['url'], array('params' => array('width' => 400, 'height' => 320), 'flashvars' => array('image' => 'imagecache/video_thumbnail/testimonials/' . $node->field_testimonial_photo[0]['filename'])))
?>

but the image isn't generated until i manually put the url for the image in the browser to start imagecache. know of a way to force the image to be rendered so that swf tools won't see the image as missing?

I am trying to follow your music page example, but I seem to be missing something. What your node-media.tpl.php file does is display 1 track.
I am missing the part where all of your nodes are made into a gallery. That is a view, not a node, so I am lost. Any help would be appreciated.

To answer my own question, you set the view type to node, then it will use the node-xxx.tpl.php file. Not the view-... template.

So gracious. You did truly so wonderful job. You have posted very illuminating thing. I am excitedly expecting for your next post.

Thanks and keep it up!

Thank you for your Drupal posts. I'm appreciating the CCK & Views walk-through very much and hope to see the Views section expanded at some point.

Any reason that you couldn't do a lot more of this configuration with CSS? Having 5 years experience in PHP it is kind of a rough language to pick up for those who have never used a programming language before. But to add onto bloging software, this is great.

Michael Parker

This is really helpful to see suggestions for modules. Thank you for sharing.

Very informative post. Thanks for taking the time to share your view with us.