Add Read-more Link to Roktabs Module and Limit the Introtext


Warning: DOMDocument::loadHTML(): ID cb40326 already defined in Entity, line: 1 in /srv/users/serverpilot/apps/robertwentcom/public/wp-content/themes/rw/inc/extras.php on line 114

I was looking for a simple latest news slider module for joomla 1.5. You would think that there are hundreds of them around but nothing really fitted what I needed and anything that did was using jquery which conflicted with the ajax search and twitter modules. Plus I don't really want to be loading 2 full java libraries.

I always liked the effects of the roktabs slider and rockettheme extensions are normally very high quality and good looking, but it didn't quite fit the bill.

The first problem was that, although you can set the width of each slide, the height auto expanded to fit the text of the article.

This might be ok if you remember to put in a readmore link into every article, but when you forget all the slides will be the size of the largest article.

The other problem is that roktabs doesn't actually add a readmore link.

So, I guess it wasn't the ideal choice for this purpose, but it looks nice and it uses mootools!

So........

To add a readmore link to each roktabs slide

In modules/mod_roktabs/tmpl/default.php locate these lines around line 81

 

<div class="roktabs-container-wrapper">
<?php
if ($tabs == 0) $tabs = count($list);
for($i = 0; $i < $tabs; $i++) {
if ($list[$i]->title != '' && $list[$i]->introtext != '') {
echo "<div class='roktabs-tab".($i+1)."'>n";
echo " <div class='wrapper'>n";
echo $list[$i]->introtext;
echo " </div>";
echo "</div>n";
}
}

?>
</div>

 

To just add the readmore link, change to this:

 

<div class="roktabs-container-wrapper">
<?php
if ($tabs == 0) $tabs = count($list);
for($i = 0; $i < $tabs; $i++) {
if ($list[$i]->title != '' && $list[$i]->introtext != '') {
echo "<div class='roktabs-tab".($i+1)."'>n";
echo " <div class='wrapper'>n";
echo $list[$i]->introtext;
echo "...";
echo " <p class='readon' style='float:right'>";
echo " <a href='".$list[$i]->link."'><span>Read More...</span></a>";
echo " </p>";
echo " </div>";
echo "</div>n";
}
}

?>
</div>

 

To add the readmore link and a title linked to the article, change to this:

 

<div class="roktabs-container-wrapper">
<?php
if ($tabs == 0) $tabs = count($list);
for($i = 0; $i < $tabs; $i++) {
if ($list[$i]->title != '' && $list[$i]->introtext != '') {
echo "<div class='roktabs-tab".($i+1)."'>n";
echo " <div class='wrapper' style='text-decoration: none;font-weight:normal;font-size='100%'>n";
echo "<h4>";
echo " <a href='".$list[$i]->link."'>";
echo $list[$i]->title;
echo "</a>";
echo "</h4>";
echo "<br />";
echo $list[$i]->introtext;
echo "...";
echo " <p class='readon' style='float:right'>";
echo " <a href='".$list[$i]->link."'><span>Read More...</span></a>";
echo " </p>";
echo " </div>";
echo "</div>n";
}
}

?>
</div>

 

This solves the link problem, but I also wanted the container to stay a fixed height with an automatic amount of text it the slide. sooo.....

To auto limit the text in each roktabs slide

Locate the file /modules/mod_roktabs/helper.php around line 165

$text = JHTML::_('content.prepare',$row->introtext,$contentConfig);

replace it with:

$message=JHTML::_('content.prepare',$row->introtext,$contentConfig);
$post=200; // Define how many characters you want to display.
$text = substr($message,0,$post);
Changing the 200 value to the number of characters you want to display. You might also want to change the default.php file to add a few ...'s to the end of the text like so:
echo " <p class='readon' style='float:right'>";

echo " <a href='".$list[$i]->link."'><span>Read More...</span></a>";
echo " </p>";

Now you should have a nice looking scrolling/fading tabbed/not tabbed news box!