Using version TYPOlight 2.6.7, adding teaser with an image thumbnail is an easy setup in TYPOlight. Here’s a sample code I got from the TYPOlight forum–with an image thumbnail added.

<div class="layout_short block<?php echo $this->class; ?>">
<?php if ($this->hasMetaFields): ?>
<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->addImage): ?>
<div class="image_container"<?php if ($this->margin || $this->float): ?> style="<?php echo $this->margin . $this->float; ?>"<?php endif; ?>>
<?php if ($this->fullsize): ?><a href="<?php echo $this->href; ?>" title="<?php echo $this->alt; ?>" rel="lightbox"><?php endif; ?>
<img src="<?php echo($this->getImage($this->href, 55, 0)); ?>" alt="<?php echo $this->alt; ?>"/><?php if ($this->fullsize): ?></a><?php endif; ?> 
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<h2><?php echo $this->linkHeadline; ?></h2>
<p class="teaser"><?php echo $this->teaser; ?></p>
<?php if ($this->text): ?>
<p class="more"><?php echo $this->more; ?></p>
<?php endif; ?>
</div>

Just copy and save file in your templates, the file name’s extension is tpl (e.g. news_teaserimg.tpl)

If you want a squared thumbnail–from the code above:

<?php echo($this->getImage($this->href, 55, 0)); ?>

change the ‘getImage’ to any settings you like and it will resize your image. Here’s a sample:

<?php echo($this->getImage($this->href, 100, 100)); ?>

either you float it on left or right.

OK, about the READ MORE…
If I want the READ MORE next to the teaser, change the ‘p’ class to ‘span’ class.

Here’s the code:

<div class="layout_short block<?php echo $this->class; ?>">

<?php if ($this->addImage): ?>
<div class="image_container"<?php if ($this->margin || $this->float): ?> style="<?php echo $this->margin . $this->float; ?>"<?php endif; ?>>
<?php if ($this->fullsize): ?><a href="<?php echo $this->href; ?>" title="<?php echo $this->alt; ?>" rel="lightbox"><?php endif; ?>
<img src="<?php echo($this->getImage($this->href, 70, 80)); ?>" alt="<?php echo $this->alt; ?>"/><?php if ($this->fullsize): ?></a><?php endif; ?>
</div>
<?php endif; ?>
<h2><?php echo $this->linkHeadline; ?></h2>
<?php if ($this->hasMetaFields): ?>
<p class="info">Posted <?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php endif; ?>
<?php if ($this->text): ?>
<p class="teaser"><?php echo $this->teaser; ?><span class="more"><?php echo $this->more; ?></span></p>
<?php endif; ?>
</div>

To style, I use this CSS code as a sample:

.more {
	text-transform: uppercase;
	font-size: 11px;
	text-align:left;
	font-weight:bold;
	padding-left:10px;
}
.more a {
	color:#EE6B02;

Here's a sample teaser to see...
readmore

and a sample full story with caption you can add.
sample-image-w-caption

Advertisements