Make Joomla Category Blog View Auto Read more (truncate introtext)

For many Joomla users I've served, they either forget or think it's just too much to manually insert the Joomla Readmore plugin for each article posted in a specific category that has a menu item set to Category Blog. For this reason, a few 'autoreadmore' plugins have been written, and while they do the task very well, there is one factor they cannot provide and that is to set a different word or character count value per category, specifically the value of none.

To achieve this goal of hiding text per category, CSS declaration display:none has been used to hide text when just the title and image are desired. It is a real chore to use this method, so a better one was devised using Joomla's template override system, so no core files are tampered and the modification is template specific, which means if you change the template, the option will not be available.

Update 02-08-15 6:44PM EST

Note: The coding has been edited so if yo used it prior to the noted update, be sure to make the adjustments

 

Joomla 3.x Method

Make an override of components/com_content/views/category using the built-in template override function

  • Go to Extensions > Template Manager
  • Click the name of your default Site template under the column labeled Template
    templatemanager.jpg
  • On the next page, lick the tab labeled Overrides

    templatemanager2
  • Under the column labeled Components, click com_content
  • When it drops down, click category
    templatemanager3.jpg

The template will then be created and a notification will indicate that at the top.

  • Now click the tab labeled Editor, located next to the Create Overrides
  • Click through directories html > com_content > category
  • Click each file with the name 'blog' then click Rename File button at the top and replace 'blog' with your preferred name EG:
    readmore.php
    readmore_item.php
    readmore.xml

  • Next, click the renamed file readmore_item.php which was blog_item.php
    templatemanager4

The file will open in the editor on the right to display the coding.

 

Insert The Coding

Note: To create resized thumbnails, you will need either of the following libraries.


There are 2 excellent image crunching extensions available that will make thumbnails for the blog view, and they both use the Joomla JImage class. https://github.com/joomla-framework/image so there was no need to include coding for thumbnailing.

Easy Joomla's Easy Library
https://github.com/easysoftware/lib_easy
This will create resized thumbnails and set the greater dimension of the image to that which is set in the options. It does not do cropping.

S2 software's Image Resize Cache Plugin
plg_content_imgresizecache
http://extensions.joomla.org/profile/ex ... -and-cache
This will either create resized thumbnails or crop the image. The issue with the crop method is that there are no options to determine the crop from position so it is always middle therefore heads tend to be chopped off.


 

Add the following code to the php block at the top of the file just before the closing ?> tag. The block of code already exists in the file so you will need to delete it from its original place at the bottom between lines 54 and 64. Be sure to leave the closing ?> tag. This is to facilitate passing the $link variable to the truncate modification. Be sure to install the Easy Joomla Library to include the image resize function indicated.

//-----[ Load Easy Joomla image resize library. Requires lib_easy-master installed ]-//
jimport('easy.image');

//------------[ Moved the $link variable function from the bottom of this file ]--------------
if ($params->get('access-view')) :
		$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
	else :
		$menu = JFactory::getApplication()->getMenu();
		$active = $menu->getActive();
		$itemId = $active->id;
		$link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
		$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
		$link = new JUri($link1);
		$link->setVar('return', base64_encode($returnURL));
	endif;

 

Next, add the following below the code block you just inserted. This is the function that enables the truncation. It will also identify the first image in the article to include as thumbnail, if no intro image is detected.

//-----------[ Shorten the intro text without the readmore plugin ]

	preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $this->item->introtext, $image);
	// "
	$charcount 	= $params->get('trunctext', '500');
	$thumbw 	= $params->get('thumwidth');
	$thumbh 	= $params->get('thumheight');
	$method 	= $params->get('resizeMethod');
	$introtext 	= strip_tags($this->item->introtext);

	if(strlen($introtext) > $charcount) {
		$introtext = $introtext." ";
		$introtext = substr($introtext,0,$charcount);
		$introtext = substr($introtext,0,strrpos($introtext,' '));
		if($charcount != 0) {
		$introtext = $introtext." [...]";
		}
	}

 

Now find and delete the line that reads:

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

The line is to load the intro_image template from the layouts directory and we no longer need that.

Next, find the line that reads:

<?php echo $this->item->introtext; ?>

and replace it with the following

<span class="intro-text">
<?php
if (isset($images->image_intro) and !empty($images->image_intro) OR isset($image['src'])) {
		 if ($params->get('access-view')) { ?>
			<a href="/<?php echo $link; ?>">
		<?php } ?>
				<img src="/<?php
				if (isset($images->image_intro) and !empty($images->image_intro)) {
					echo htmlspecialchars(EasyImage::resize($images->image_intro, $thumbw, $thumbh));
				}else{
					if (isset($image['src'])) {
					echo htmlspecialchars(EasyImage::resize($image['src'], $thumbw, $thumbh));
					}
				}
				?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
		<?php if ($params->get('access-view')) { ?>
			</a>
		<?php }
	 }
 echo $introtext; ?>
</span>

The span element is just to facilitate any particular containment styling. It is not required. (Note: there is a forward slash in the anchor tag wrapping the image and also in the <img src tag. This should not be there. It is being injected by the GESHI code insert plugin and I can't get rid of the damn thing)

 

Adding The Parameter Fields To Menu Options

At this point you can save the file and any category blog view will truncate the intro text to 500 characters. This is great but to have the power over the truncate value, another bit of coding is needed to add a character count parameter field to the menu item.

  • In the same list of override files, click the renamed file readmore.xml
  • Find the line at the top
    <layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
  • Change the title attribute to anything EG: title="Auto Readmore Blog"
  • Next, find the fieldset line
    <fieldset name="advanced" label="JGLOBAL_BLOG_LAYOUT_OPTIONS">
  • Scroll to the end of that fieldset to find its closing </fieldset tag and insert the following just above it
<field name="trunctext" type="text" label="Shorten Intro Text" default="500" description="This will automate the Readmore function" filter="integer" />
<field name="thumwidth" type="text" label="Thumbnail Width" default="200" description="Set a numerical value for the thumbnail width" />
<field name="thumheight" type="text" label="Thumbnail Height" default="200" description="Set a numerical value for the thumbnail width" />
<!-- This field only works if you use the extension plg_content_imgresizecache -->
<field name="resizeMethod" type="radio" class="radio btn-group" label="Thumbnail Method" default="crop">

 

Now a new type will be added to the Articles menu type set.

templatemanager5.jpg

  • Select the type
  • Click the tab labeled Blog Layout and scroll to the end to see the new parameter field
    blog-layout-options
  • Add a numerical value to determine the character count to truncate

That's it! Now you can set varying truncate values per Category Blog layout.

Big Tings!

The final readmore_item.php will look like this

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Create a shortcut for params.
$params = $this->item->params;
$images = json_decode($this->item->images);
JHtml::addIncludePath(JPATH_COMPONENT.'/helpers/html');
$canEdit = $this->item->params->get('access-edit');
$info    = $params->get('info_block_position', 0);

//-----[ Load Easy Joomla image resize library. Requires lib_easy-master installed https://github.com/easysoftware/lib_easy ]-//
jimport('easy.image');

//------------[ Moved the $link variable function from the bottom of this file ]--------------
if ($params->get('access-view')) :
		$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
	else :
		$menu = JFactory::getApplication()->getMenu();
		$active = $menu->getActive();
		$itemId = $active->id;
		$link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
		$returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
		$link = new JUri($link1);
		$link->setVar('return', base64_encode($returnURL));
	endif;

//-----------[ Shorten the intro text without the readmore plugin ]

	preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $this->item->introtext, $image);
	// "
	$charcount 	= $params->get('trunctext', '500');
	$thumbw 	= $params->get('thumwidth');
	$thumbh 	= $params->get('thumheight');
	$method 	= $params->get('resizeMethod');
	$introtext 	= strip_tags($this->item->introtext);

	if(strlen($introtext) > $charcount) {
		$introtext = $introtext." ";
		$introtext = substr($introtext,0,$charcount);
		$introtext = substr($introtext,0,strrpos($introtext,' '));
		if($charcount != 0) {
		$introtext = $introtext." [...]";
		}
	}

//----------------------[ Default Joomla coding reorganized no changes made ]--------------------------
if (
	$this->item->state == 0
	|| strtotime($this->item->publish_up) > strtotime(JFactory::getDate())
	|| ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate()))
	&& $this->item->publish_down != '0000-00-00 00:00:00' )
)
	{
		echo '<div class="system-unpublished">';
	}

echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item);

if ( $canEdit || $params->get('show_print_icon') || $params->get('show_email_icon') )
{
	echo JLayoutHelper::render('joomla.content.icons', array('params' => $params, 'item' => $this->item, 'print' => false));
}

if ($params->get('show_tags') && !empty($this->item->tags->itemTags)) :
	echo JLayoutHelper::render('joomla.content.tags', $this->item->tags->itemTags);
endif;

$useDefList = (
	$params->get('show_modify_date') ||
	$params->get('show_publish_date') ||
	$params->get('show_create_date') ||
	$params->get('show_hits') ||
	$params->get('show_category') ||
	$params->get('show_parent_category') ||
	$params->get('show_author')
	);

	if ($useDefList && ($info == 0 || $info == 2)) {
		echo JLayoutHelper::render('joomla.content.info_block.block', array('item' => $this->item, 'params' => $params, 'position' => 'above'));
	}

//---------------------[ Removed original Joomla intro_image template call coding ]

if (!$params->get('show_intro')) {
	echo $this->item->event->afterDisplayTitle;
	}
echo $this->item->event->beforeDisplayContent;
?>

<?php //--------------------[ Modification to enable auto intro text truncate ]-------------------------/
?>
<span class="intro-text">
<?php
if (isset($images->image_intro) and !empty($images->image_intro) OR isset($image['src'])) {
		 if ($params->get('access-view')) { ?>
			<a href="/<?php echo $link; ?>">
		<?php } ?>
				<img src="/<?php
				if (isset($images->image_intro) and !empty($images->image_intro)) {
					echo htmlspecialchars(EasyImage::resize($images->image_intro, $thumbw, $thumbh));
				}else{
					if (isset($image['src'])) {
					echo htmlspecialchars(EasyImage::resize($image['src'], $thumbw, $thumbh));
					}
				}
				?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
		<?php if ($params->get('access-view')) { ?>
			</a>
		<?php }
	 }
 echo $introtext; ?>
</span>
<?php //------------------[ End auto truncate modification ]---------------------/
?>

<?php
if ($useDefList && ($info == 1 || $info == 2)) {
	echo JLayoutHelper::render('joomla.content.info_block.block', array('item' => $this->item, 'params' => $params, 'position' => 'below'));
}

if ($params->get('show_readmore') && $this->item->readmore) {
//-----------------------[ Moved the original Joomla $link variable coding to the top ]--------------
	echo JLayoutHelper::render('joomla.content.readmore', array('item' => $this->item, 'params' => $params, 'link' => $link));
}

if (
	$this->item->state == 0
	|| strtotime($this->item->publish_up) > strtotime(JFactory::getDate())
	|| ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate()))
	&& $this->item->publish_down != '0000-00-00 00:00:00' )
)
	{
		echo '</div>';
	}

echo $this->item->event->afterDisplayContent;

?>

 

Thumbnail Method For S2 Software's plg_content_imgresizecache Extension

Be sure to install the plugin

Place the following in the head of the readmore_item.php just as shown above

//-----[ Load extension library from plg_content_imgresizecache ]-//
require_once JPATH_SITE . '/plugins/content/imgresizecache/resize.php';
$resizer = new ImgResizeCache();

The output area will be as below

<span class="intro-text">
<?php
if (isset($images->image_intro) and !empty($images->image_intro) OR isset($image['src'])) {
		 if ($params->get('access-view')) { ?>
			<a href="/<?php echo $link; ?>">
		<?php } ?>
				<img src="/<?php
				if (isset($images->image_intro) and !empty($images->image_intro)) {
					echo htmlspecialchars($resizer->resize($images->_image_intro, array('w' => $thumbw, 'h' => $thumbh, $method => TRUE)));
				}else{
					if (isset($image['src'])) {
					echo htmlspecialchars($resizer->resize($image['src'], array('w' => $thumbw, 'h' => $thumbh, $method => TRUE)));
					}
				}
				?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
		<?php if ($params->get('access-view')) { ?>
			</a>
		<?php }
	 }
 echo $introtext; ?>
</span>

 


From here on you can just go crazy with parameter options for the category blog display

  • Option to add share buttons for each item
  • Option to place image above title and intro text
  • Option to insert banner ad per item
  • Option to strip or allow plugin display.

You can create additional category blog overrides as desired to serve other special functions. Just be sure to rename the files accordingly.

 

Copyright © 2019 CMSEnergizer.com. All Rights Reserved.
This website is powered by the Joomla!©™ 3 Website Framework | File download and article manager component by CMSE Custom Fields | Advanced Module Manager and Modules Anywhere by NoNumber Elements | Website hosting and development by WebsiteDons

CMSEnergizer.com is owned and operated by Emuzement Net Inc, Tampa, Florida USA