Help with Content Type Display

Question

I am new to Drupal and I am trying to figure out how to theme a Content Type. I am building a Realtor site for a client whereby my main content type will be something like 'Property Listing'. I have installed all the necessary modules to help me upload images and everything works properly. I need to be able to display BOTH the Fullsize and Thumbnail images - as to create a slideshow (or gallery) for each property.

Example:

// Fullsize Images
<ul class="gallery-output">
    <li><img src="example.png" /></li>
    <li><img src="example-two.png" /></li>
</ul>
// Thumbnail Images
<ul class="gallery-nav">
    <li><a href="#"><img src="example_thumb.png" /></a></li>
    <li><a href="#"><img src="example-two_thumb.png" /></a></li>
</ul>

I now know that you must create a node-[content-type].tpl.php file to make changes. What I do not know is where. So please help me.

In my copied node-whatever.tpl.php file I have:

<div class="content clear-block">
    <?php print $content ?>
</div>

Do I remove this and replace it with my own custom solution? Or do I make my changes in the template.php file? If both are possible, which is the preferred solution? I am using: cck, filefield, imageapi, imagecache, and imagefield. If changing a preprocess function is the solution, what is the best method of tracking down the correct one??

Please help! (Oh and if somebody says 'Use Views' I think I'll go insane - so please don't, its not the solution I'm looking for) :)

Answer 1

Your approach with node-whatever.tpl.php is absolutely correct. $content holds the COMPLETE content as it is processed. If you want to style your CCK fields or alike, you need to get these variables. There are present on the page, it is just not shown to you since everything is inside $content.

As a good help please install Devel and (more important) Theme Developer. Theme developer allows you to inspect ALL variales available on the site, what block are called, which functions are used to render what part and so on. This is very helpfull. You will see that you have all your desired data available and you can work with it just as you want.

If you want to resize some images according to a ImageCache setting, you use it inside the template similar to this:

theme('imagecache', 'your_preset', $field_fromcck[0]['filepath']);

Assuming you have a CCK field that is names fromcck. But this info will be availale to you after you made yourself familiar with Devel and Theme Developer.

Answer 2

In your node-[content-type].tpl.php file, replace:

<div class="content clear-block">
  <?php print $content ?>
</div>

with:

<div class="content clear-block">
<?php

    // Large and Thumbnail are my Imagecache Presets

$cck_images = $node->field_image;
if (count($cck_images) > 0) :
  // Fullsize
  foreach ($cck_images as $cck_image) :
    $image = theme('imagecache', 'large', $cck_image['filepath'], $cck_image['data']['alt'], $cck_image['data']['title']);
    print $image;
  endforeach;
  // Thumbnails
  foreach ($cck_images as $cck_image) :
    $image = theme('imagecache', 'thumbnail', $cck_image['filepath'], $cck_image['data']['alt'], $cck_image['data']['title']);
    print $image;
  endforeach;
endif;

?>

<?php // All Content except for images ?> 
<?php print $content ?>
</div>

And exclude the images from the display (administer -> content type -> your [content-type] -> manage fields -> display fields).

Style your images accordingly!