How do I position image above teaser text?

Posted by Vic96 on April 28, 2007 at 2:14pm

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.

Comments

to remove the thumbnail

Posted by DL on April 28, 2007 at 3:59pm

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

You just need to edit

Posted by encho on April 28, 2007 at 7:53pm

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.

float image to left

Posted by Vic96 on April 30, 2007 at 6:12am

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

Here it is

Posted by encho on May 2, 2007 at 8:01pm

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.

Please help me... I'm an absolutel newbie too

Posted by Sophia on May 4, 2007 at 9:34pm

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

----------
Cheers, Sophia

http://sophiahosting.com

Please help me... I'm an absolutel newbie too

Posted by Sophia on May 4, 2007 at 9:38pm

Done it again... double post :)

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

----------
Cheers, Sophia

http://sophiahosting.com

Simply ... Go to [Content

Posted by artatac on May 5, 2007 at 7:26am

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

How come i cannot find

Posted by DL on May 11, 2007 at 10:31am

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

Thanks artatac, i just

Posted by khanz on February 8, 2008 at 4:32am

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.)

Hi Encho, This is stunning

Posted by Liliplanet on September 24, 2007 at 5:28pm

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

hello, I have been using

Posted by killerwhale65 on November 24, 2007 at 5:30pm

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

u find a fix for this? i

Posted by erebus1 on February 18, 2008 at 10:31pm

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

the code

Posted by encho on February 29, 2008 at 5:58pm

Try excluding the:

<?php
if ($picture) print $picture 
?>

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

Thinkk about this

Posted by Igbonine on January 6, 2009 at 4:46pm

Will do.

Solved

Posted by seddonym on October 8, 2009 at 2:56pm

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!