By Vic96 on

I've got image/imagefield/imagecache and CCK installed. I've created a view which displays a story's teaser text and the thumbnail image created with imagecache. The image is below the text. I need it to be next to the text like you can see on http://libcom.org/news . This person has come up with a solution at http://drupal.org/node/82473 but that was for an older version. Is there a way to handle this with CCK?
I also need the 'thumbnail:' label to disappear. Can some expert here guide me. Thanks.

⋅ Categories: Drupal 5.x

Comments

DL’s picture

DL commented

to remove the thumbnail label, go to content types>>display fields and change the label as hidden instead of above or inline

Live hard, Ride harder

encho’s picture

encho commented

You just need to edit node.tpl.php to include your cck field. Wrap it in div and give it a css float:left property. If you need any further help, I can post you my piece of code. This way you can add caption field as well.

Vic96’s picture

Vic96 commented

If you could post your code, I'll appreciate it. I'm not an expert at PHP and it would be very helpful. Thanks.

encho’s picture

encho commented

Here it is :

(node.tpl.php)

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>" id="node-<?php print $node->nid; ?>">
  <?php if ($page == 0): ?>
    <h2 class="title">
      <a href="<?php print $node_url ?>"><?php print $title ?></a>
    </h2>
  <?php endif; ?>

  <?php if ($picture) print $picture ?>
  
  <?php if ($submitted or $has_terms): ?>
  <div class="meta<?php if ($has_terms) : ?> with-taxonomy<?php endif; ?>">

    <?php if ($has_terms) : ?> 
      <div class="taxonomy"><?php print $terms ?></div>
    <?php endif; ?>

    <?php if ($submitted): ?>
      <div class="submitted"><?php print t('Posted !date by !name', array('!date' => format_date($node->created, 'custom', "jS F, Y"), '!name' => theme('username', $node))); ?></div>
     <?php endif; ?>

  </div>
  <?php endif; ?>
  
  <div class="content">

    <?php if ($teaser): ?>
      <?php if ($node->field_news_photo[0]['view']): ?>
        <div class="news-image-t-0"><a href="<?php print $node_url ?>"><?php print $node->field_news_photo[0]['view'] ?></a><div class="news-caption-0"><?php print $node->field_news_caption[0]['value'] ?></div></div>
      <?php endif; ?>
    <?php endif; ?>

<?php if ($body): ?>
         <div class="news-image-b-0"><?php print $node->field_news_photo[0]['view'] ?><div class="news-caption-0"><?php print $node->field_news_caption[0]['value'] ?></div></div>
<?php endif; ?>

    <?php print $content?>

  </div>
  
  <?php if ($links): ?>
    <div class="links">
      <?php print $links ?>
    </div>
  <?php endif; ?>

</div>

As you can see, I have separated body and teaser, for easier control.
In (teaser) line

<div class="news-image-t-0"><a href="<?php print $node_url ?>"><?php print $node->field_news_photo[0]['view'] ?></a><div class="news-caption-0"><?php print $node->field_news_caption[0]['value'] ?></div>

I have used News Photo and News Caption fields, just change with the name of your fields. field_news_photo[0] means first photo in your post, field_news_photo[1] would be the second etc. Same goes for body. Now just add appropriate css to your style.css. Mine is:

.news-image-t-0, .news-image-t-1, .news-image-t-2, .news-image-t-3 {
  clear:both;
  position:inline;
  top: -20px;
  right:0px;
  float:right;
  margin-left:10px;
  padding-left:10px;
  width:80px;
  display:block;
}

.news-image-b-0, .news-image-b-1, .news-image-b-2, .news-image-b-3 {
  float:right;
  clear:both;
  display:block;
  position:inline;
  padding:2px 0px 2px 10px;
  margin: 0px 0px 0px 5px;
}

You got the idea. Just adjust to your needs.
Hope this helps.

Sophia’s picture

Sophia commented

I have cck installed with image_field and I use a modified version of the Garland theme. I have tried to adapt your code to my needs, but I guess I'm not smart enough... I can't get my image to show up inline. I tried Contemplate, and I can do it quick and dirty by using tables (I have), but it is not really pretty (see http://yourgametap.com, games list)

Here is the contents of the node.tpl.php file:

<?php phptemplate_comment_wrapper(NULL, $node->type); ?>

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

<?php print $picture ?>

<?php if ($page == 0): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

  <?php if ($submitted): ?>
    <span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
  <?php endif; ?>

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

  <div class="clear-block clear">
    <div class="meta">
    <?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
    </div>

    <?php if ($links): ?>
      <div class="links"><?php print $links; ?></div>
    <?php endif; ?>
  </div>

</div>

This is my contemplate code:

<table width="100%"><tr><td>
<?php foreach ((array)$field_image1 as $item) { ?>
<?php print $item['view'] ?><?php } ?>
</td><td valign="top">
<?php print $node->content['body']['#value'] ?>
</td></tr></table>

Now how would I adapt your code to create a proper inline image instead of using a table? Thanks ever so much in advance, any help is really appreciated.

----------
http://yourgametap.com - Your Ultimate GameTap Games Reviews Site

Sophia’s picture

Sophia commented

Done it again... double post :)

----------
http://yourgametap.com - Your Ultimate GameTap Games Reviews Site

artatac’s picture

artatac commented

Simply ...

Go to [Content management] > [Content types] > [Manage fields] and make sure yiour image field is LIGHTER than [body] eg -2
this will force the image above your teaser but not yet inline

then go to modules > system > defaults.css

and add

.field-type-image img {
float: right;
margin-left: 1em;
border: 0px solid red;
}

nb - my cck image field is called "image" and I choose to float it right, adjust yours accordingly

see www.venturacottage.com for the result

Regards

Joe

DL’s picture

DL commented

How come i cannot find modules>>system>> default.css. I do not have a system module, do I need to install it? thanks

Live hard, Ride harder

khanz’s picture

khanz commented

Thanks artatac, i just pasted your CSS code as it is in my theme's style.css and i am done. Now i am getting inline images.

------------
Volvo, Video, Velcro. (I came, I saw, I stuck around.)

liliplanet’s picture

liliplanet commented

Hi Encho,

This is stunning ... it's been days trying to make this work.

I've included your code exactly, and have created a thumbnail and largeimage in content as an image field.

That's all good, but the images are below the article .. please how do I float left the thumbnail and the large picture.

Would most appreciate any help, and thank you.
Lilian

killerwhale65’s picture

killerwhale65 commented

hello,

I have been using encho's solution as well, but the problem is that now the thumbnail shows up twice, once in the content and once because i of the solution above. I only want it to appear next to the title, and not in the content. How can that be done?

thanks!

Matt

erebus1’s picture

erebus1 commented

u find a fix for this? i have the same problem

encho’s picture

encho commented

Try excluding the:

if ($picture) print $picture

Also this code is meant to work with cck/imagecache combination

igbonine’s picture

igbonine commented

Will do.

seddonym’s picture

seddonym commented

A good way to do this is as follows:

First, you want to set up your Display Fields so that the correct imagecache preset is chosen for the teaser. However, you should click 'Exclude' for both the teaser and the full node. This will mean that the preset will be rendered in the node object but not added to the $content variable.

Then, add the following function to your template.php:

<?php
function phptemplate_preprocess_node(&$variables)
//Adds the picture view specified in Content Types > Display Fields to node.tpl.php
//Assumes the CCK field is called field_image
{
  $node =  &$variables['node'];
  if (isset($node->field_image[0]['view']))
  {
    $variables['picture'] = $node->field_image[0]['view'];
  }
}
?>

If you wanted to do this only for the teaser, say, then you could only add this if $variables['teaser'] == true

Don't forget to refresh the Theme Registry to test!