Tested on:

• Drupal 5.x
• Content Templates module
• ImageMagick 6.3.7
• GhostScript 8.15.3

Using ImageMagick + GhostScript you can convert the first page of a PDF into a thumbnail image linking to file. You can cut and paste this function on your theme main script: you have to manually create the thumb directory and grant write permission by scripts. Check also the path to ImageMagick convert command.

function pdf_thumb_attachments(){
 $allowed_mime = array("application/pdf");
	foreach($files as $file){
	if(in_array(strtolower($file->filemime),$allowed_mime) && strstr(strtolower($file->description),"classifica")){
		$title = $file->description;
		if(substr($title,-4)==".pdf"){
			# create link title from file name (Transliteration module suggested)
			$title = str_replace("_"," ",substr($title,0,strlen($title)-4));
		}
		$img = "";
		$local_src_path = getcwd() . "/" . $file->filepath;
		$destfilename = substr($file->filename,0,strlen($file->filename)-4) . ".gif";
		# YOUR-FILES-DIRECTORY/pdfgen will hosts the generated thumbnails
		$local_dest_path = getcwd() . "/" . file_directory_path() . "/pdfgen/" . $destfilename;
		$imageurl = base_path() . file_directory_path() . "/pdfgen/" . $destfilename;
		/* create thumbnail on node reading if file doesn't exist */
		if(!file_exists($local_dest_path)){
			# choose the first page of the PDF, scale to 90x90px and convert to GIF
			$exec = '/usr/bin/convert -scale 90x90 "'.$local_src_path.'"[0] "'.$local_dest_path . '"';
			shell_exec($exec);
			/* delete this line if you cannot read the generated file
			$exec = "chmod 777 ".$local_src_path;
			shell_exec($exec);
			//*/
		}
		$img = '<img src="'.$imageurl.'" alt="'.$title.'" />';
		$output .= "<li>". l($img." ".$title,$file->filepath, $attributes = array("title"=>$title), $query = NULL, $fragment = NULL, $absolute = TRUE, $html = TRUE) . "</li>";
	}
	}
 if(!empty($output)){
	$output = '<div class="my-attachments"><ul>' . $output . "</ul></div>";
 }
 return $output;
}

Update

You can alternatively use imagemagick function provided by image.module (the image.imagemagick.inc file on drupal/includes):

function file_preview_path($filename, $filepath = 'filepreview') {
  /** generate jpg thumbnails **/
  return $filepath . "/" . substr($filename,0,strlen($filename)-4) . ".jpg";
}

 function file_preview(&$file, $pages = Array(1)) {
   $allowed_mime = array("application/pdf");
   if(in_array(strtolower($file->filemime),$allowed_mime)){
	$local_src_path = getcwd() . "/" . $file->filepath;
	$local_dest_path = getcwd() . "/" . file_directory_path() . "/" . file_preview_path($file->filename);
	# create thumbnail only when needed
	$imagemagick = getcwd() . '/includes/' . 'image.imagemagick.inc';
	if(!file_exists($local_dest_path) && file_exists($imagemagick)){
		include_once($imagemagick);
               _image_imagemagick_convert($local_src_path.'[0]',
                                                       $local_dest_path, array('-colorspace RGB'));
		# all can read thumbnail files
		if(file_exists($local_dest_path))
			chmod($local_dest_path, 0777);
	}
	return file_preview_path($file->filename);
    }
    else{
	return FALSE;
    }
 }

Drupal modules needed:

• JQuery Update*
• JCarousel* (read JCarousel documentation)
• Contemplate
• Image Cache (optional, for thumb rendering)
• Lightbox v2 (optional, for thumb zoom to original image)

* = tested on latest official release
Howto subject: How to use JCarousel within a Contemplate modified node body

JCarousel is a nice JQuery plugin to render a vertical or horizontal bar containing some custom HTML code elements. Every element is within a list item of an unordered list. On page load a JQuery event trigger the simple unordered list to show as a bar.

Let’s start

To use Contemplate more smoothly (and without cut/paste from your preferred code editor, i.e. Quanta), you can create a file-based contemplate instead a database based.

1. Create a sites/all/contemplates folder (or sites/mysitename/contemplates)
2. According to Contemplate help (admin/help/contemplate), put there your node-mynodetype-body.tpl.php file, where “mynodetype” is the machine name of the type you want to modify (that one that appears like node/add/mynodetype when you create a new node of that type).
3. Visit admin/content/templates to update the contemplate list. Now, if you go to admin/content/templates/mynodetype you can read:
   

   This template is being read fromsites/all/contemplates/node-mynodetype-body.tpl.php
   Please make changes to this file or remove it to continue editing here.

This is your contemplate file for this how-to. You’ve only to modify it, upload it and watch your mynodetype body growing up with JCarousel.

Call JCarousel

On the top of your content template, write:

if(module_exists(“jcarousel”)){
jcarousel_add(“tango”);
$js = “// <![CDATA[
#function to add a Bouncing Effect on your JCarousel: you can add another custom effect function
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};

# Call JCarousel when page is ready for the element mycarousel
# Read http://sorgalla.com/projects/jcarousel/#Configuration
jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
vertical: false,
animation: 3000,
easing: ‘BounceEaseOut’,
visible: 5,
scroll: 4
});
});
// ]]>”;

#add to HTML page HEAD this JavaScript code
drupal_add_js($js, ‘inline’, ‘header’);
}
?>

Styling

Using latest official release of JCarousel, tango theme skin.css file returns a buggy appearance. You can switch to the original tango skin.css file on sorgalla.com. Simply copy that file to your module skin folder.
In order to make your JCarousel works better, you have to write some additional CSS lines on your theme CSS file:

/* JCarousel custom CSS for horizontal bars */
/* DO NOT USE margin or padding for item elements
(auto-adjusted with visible/scroll JCarousel options) */
.jcarousel-item-horizontal{
width: 100px;
}
/* Bar total width for 5 elements
(100×5)px + 10px horizontal padding */
.jcarousel-container-horizontal,
.jcarousel-clip-horizontal{
width: 550px;
}

/* center jcarousel within a block element */
..jcarousel-container-horizontal{
margin: auto;
}

/* item height = bar height */
.char .jcarousel-item-horizontal,
.char .jcarousel-clip-horizontal{
height: 150px;
}

Contemplate JCarousel

A simple but useful way to test JCarousel is to display attached image files on your mynodetype. Assuming that all attached files are image files, that you want tango theme and you want to render an imagecache picture with preset named “my_thumbnail_preset”, add to your contemplate file these lines:

<?php
/* UPLOADED FILE CAROUSEL */
$attached_files_carousel = TRUE;

if($attached_files_carousel): ?>
<ul id=”mycarousel” class=”jcarousel-skin-tango”>
<?php
$preview_imagecache_preset = ‘character_picture’;
if(!empty($node->files)){
foreach($node->files as $uploaded_file){
/* if imagecache is present, build the thumbnail */
if(module_exists(‘imagecache’))
$uploaded_file_preview = theme(‘imagecache’,$preview_imagecache_preset,$uploaded_file->filepath);
else
$uploaded_file_preview = l($uploaded_file->filename,$uploaded_file->filepath);
/* Print the List Item */
print “<li>” . ‘<a title=”‘.$uploaded_file->filename.’” rel=”lightbox” href=”‘. base_path() . $uploaded_file->filepath . ‘”>’. $uploaded_file_preview . ‘</a>’ . “</li>”;
}
}
?>
</ul>
<?php # END CAROUSEL
endif; ?>

This method simply write the UL#mycarousel via PHP (static JCarousel method). Using rel=”lightbox” enable image file zoom via JavaScript, if lightbox v2 module is enabled. If you want to implement complex AJAX loading or to experiment more JCarousel effects, options and customizations, see also:

• JCarousel documentation
• JCarousel examples

Another example, using some CSS and photoframe module:

How to make a collapsible content body with Contemplate and the Drupal core “collapsible” function?

1. Make sure you’ve Contemplate enabled (through admin/build/modules)
2. Go to admin/content/templates and choose the type you want to display collapsible content within.
3. Enable body contemplate checking “Affect body output” and write (change field names):
   

   <?php
   drupal_add_js(‘misc/collapse.js’);
   drupal_add_js(‘misc/drupal.js’);
   ?>
   <fieldset class=”collapsible collapsed”>
   <legend><?php print t(“My Translatable First Field Label”)?></legend>
   <div class=”fieldset-wrapper”>
   <h2><?php print t(“My Translatable First Field Header”)?></h2>
   <?php print $node->field_myfirstfield[0]['view'] ?>
   </div>
   </fieldset>

   <div class=”mysecondfield”>
   <?php print $node->field_mysecondfield[0]['view'] ?>
   </div>

Update: If you want a collapsible box expanded by default, use class=”collapsible” without “collapsed” class.

See also:
Add collapsible content in Drupal @ Random Snippets