How to position image above teaser
Submitted by edex on Tue, 06/03/2008 - 15:35.
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>
<?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;
}
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.
Source
Post new comment