Drupal Articles » Drupal gallery using CCK and Views » Add template files to your theme
I've prepared a number of template files to the gallery system, consisting of several Views template files, a CSS file, JavaScript file, and several images, and a set of node template files.
Currently, the node templates node-photo_album.tpl.php and node-video_category.tpl.php are critical to the functionality of the Photo Album and Video Category listing pages, as they include several embedded Views that provide the functionality for these pages. In the future these files will be simplified once I adapt the gallery system to make use of the Views Attach module.
A node-photo.tpl.php and node-video.tpl.php file is also included, and the only custom code in them is the inclusion of the variable needed to print out the Previous and Next images, and the variable for including a context-sensitive "Add Photo" (or Video) link to pages. If you prefer, you may simply add <?php print $add_media; ?> and <?php print $prev_next; ?> into your own node-photo.tpl.php and node-video.tpl.php templates if you prefer.
Unzip the attached file into your own theme's directory (e.g. sites/all/themes/yourtheme/).
You need to include the following in your theme's .info file:
stylesheets[all][] = gallery-templates/cck_gallery.css
scripts[] = gallery-templates/cck_gallery.jsYou must also include the following code in your theme's template.php file (change instances of YOURTHEME to the correct name of your own theme). Note that if you already have preprocess_page and/or preprocess_node functions in your theme, you should integrate the code from those two functions into your own - do not duplicate them or your site will produce errors:
/**
* Override or insert PHPTemplate variables into the templates.
*/
function YOURTHEME_preprocess_page(&$vars) {
// Wrap content of gallery pages with a custom ID.
if (arg(0) == 'media' && (arg(1) == 'photos' || arg(1) == 'videos')) {
$vars['content'] = '<div id="gallery-wrapper">'. $vars['content'] .'</div>';
}
}
/**
* Override or insert PHPTemplate variables into the templates.
*/
function YOURTHEME_preprocess_node(&$vars) {
$node = $vars['node'];
$prev_next = '<ul id="node-navigation" class="clear-block">';
$prev_next .= '<li class="prev">'. pn_node($node, 'p') .'</li>';
$prev_next .= '<li class="next">'. pn_node($node, 'n') .'</li>';
$prev_next .= '</ul>';
$vars['prev_next'] = $prev_next;
// Create Photo/Video node add links for users with access.
if (user_access('create photo content') && ($node->type == 'photo' || $node->type == 'photo_album')) {
$vars['add_media'] = l(t('Add new photo'), 'node/add/photo', $options = array('attributes' => array('class' => 'add-media')));
}
if (user_access('create video content') && ($node->type == 'video' || $node->type == 'video_category')) {
$vars['add_media'] = l(t('Add new video'), 'node/add/video', $options = array('attributes' => array('class' => 'add-media')));
}
}
/**
* Implementation of hook_theme().
*/
function YOURTHEME_theme(){
return array(
'views_exposed_form' => array(
'arguments' => array('form' => NULL),
),
);
}
// For the gallery, rename Views "Apply" button and add a Reset option.
function YOURTHEME_views_exposed_form($form) {
if (arg(0) == 'media' && arg(1) == 'photos') {
$form['reset']['#value'] = l(t('Reset'), 'media/photos');
$form['submit']['#value'] = t('Search');
}
if (arg(0) == 'media' && arg(1) == 'videos') {
$form['reset']['#value'] = l(t('Reset'), 'media/videos');
$form['submit']['#value'] = t('Search');
}
return drupal_render($form);
}
/**
* Prev/Next API.
*/
function pn_node($node, $mode = 'n') {
if (!function_exists('prev_next_nid')) {
return NULL;
}
switch($mode) {
case 'p':
$n_nid = prev_next_nid($node->nid, 'prev');
$link_text = t('previous');
break;
case 'n':
$n_nid = prev_next_nid($node->nid, 'next');
$link_text = t('next');
break;
default:
return NULL;
}
if ($n_nid) {
$n_node = node_load($n_nid);
$options = array(
'attributes' => array('class' => 'thumbnail'),
'html' => TRUE,
);
switch($n_node->type) {
case 'photo': // This is a Photo node, get the thumbnail
$fid = db_fetch_object(db_query("SELECT f.field_photo_fid FROM {content_type_photo} f WHERE nid = %d", $n_nid));
$img_path = db_fetch_object(db_query("SELECT f.filepath FROM {files} f WHERE fid = %d", $fid->field_photo_fid));
$img_path = file_create_path($img_path->filepath);
$image = theme('imagecache', 'photo-mini', $img_path);
$html = l($image, "node/$n_nid", $options);
$html .= l($link_text, "node/$n_nid", array('html' => TRUE));
return $html;
case 'video':
foreach ($n_node->files as $fid => $file) {
$html = '<img src="' . base_path() . $file->filepath;
$html .= '" alt="' . $n_node->title;
$html .= '" title="' . $n_node->title;
$html .= '" class="image image-thumbnail" />';
$img_html = l($html, "node/$n_nid", $options);
$text_html = l($link_text, "node/$n_nid", array('html' => TRUE));
return $img_html . $text_html;
}
}
}
}After you have added all of the template files and added all of the above code to your template.php file, you need to rebuild the Theme Registry to ensure that Drupal is made aware of all of the new files. To do this simply go to Administer > Site configuration > Performance and click the "Clear cached data" button.
Thanks for adding more content to this tutorial. Are you going to upload the templates for use soon?
Great tutorial. Just what I am looking for for my website. Any chance of the template and css files?
Cheers
Andy
Yes I plan to post them as soon as possible, hopefully within a week or so.
I have been using your excellent tutorial, however I cannot see the zipped file you are referring to on this page???
A small issue I'm having is that for some reason I'm not getting the images for display on my site, see here: http://www.cordiafreaks.com/media/photos
Thank you so much for this tutorial, this is exactly what I've been trying to create on my site for nearly 2 years! You are helping me immensely!!!
Your help with my 2 issues are very much appreciated! :)
Steve
I have done everything till this step and I realized that there is no file to download! :( Please, if possible...
I think this tutorial may have been abandoned!... I have sent 2 emails to the author and not received any response...
Might need to look into a different gallery option, however this was the best idea, I'm upset to say I cannot complete it alone! :(
I'll keep coming back to see if it's updated, but not every few days like I have been...
Peace
Any progress on this tutorial? I've looked for an alternative but can't seem to find anything... I look forward to getting this gallery completed on my site if it gets completed. Cheers
never mind... I've gone for Gallery 2, which seems to be working well...