8 minutes reading time (1565 words)

Blog category view with auto created introtext and new look

Blog category view with auto created introtext and new look

Introtext is a very important element for blogs as they give us the first impression of a post. In most cases introtext is composed by the first one or two paragraphs of the main article.

The problem is that when we have a big number of articles to publish, is always a pain to find and insert the “Read More” function, and at the same time we try to make frontend to look nice with pretty much the same lines of introtext.

So here we are to propose a solution that will create the introtext automatically by limiting the main text into a specific number of characters and also give some ideas to make our blog look better.

image 00

How we will do it?

We will use the Joomla standard template “Protostar” to create a new Blog layout that will create the auto introtext. The steps to complete this are:

  1. Create a custom Blog Layout with “Menu Item Type” support override
  2. Change the code inside overridden files
  3. Create a field to control the characters number through Template parameters.
  4. Create a Menu Item that will link to our new custom Blog Layout.
  5. Create a new css file to enter our tweaks in order to beautify the blog

A. Create a custom Blog Layout override:

1. Lets copy the category blog files from Joomla directory, ../components/com_content/views/category/tmpl/

Copy these files:

  • blog.php
  • blog.xml
  • blog_item.php
  • blog_links.php
  • blog_children.php

2. Paste the above files into this folder (create it if not available):
../templates/protostar/html/com_content/category/

and rename them to:

  • autoblog.php
  • autoblog.xml
  • autoblog_item.php
  • autoblog_links.php
  • autoblog_children.php

B. Change the code inside override files.

We will change some code in the files autoblog_item.php and autoblog.xml.

Changes in autoblog_item.php :

1. In line #12 add these lines to have access in template parameters:

// Getting template parameters
$app = JFactory::getApplication('site');
$template = $app->getTemplate(true);

2. In line #54 find this code:

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

and replace it with this:

<div class=”myIntrotext”>
<?php echo JHtml::_('string.truncate', strip_tags($this->item->introtext), $template->params->get('charactersNumber', 200));?>
</div>

The above code will give us the introtext we want by doing these:

  • Clean text from any tags
  • Limit the characters of the main text according to the template parameter that we will create in the next step ( C ) or if there is not something there it will limit them to the default value of “200”.
  • End the introtext at a word boundary
  • Add periods "..." after the last word.

3. In line #65 find this:

<?php if ($params->get('show_readmore') && $this->item->readmore) :

and replace it with this:

<?php if ($params->get('show_readmore')) :

This will force the blog item to show the “Read more” that will link to the article page.

4. For beautify purposes let's move the line #44 that shows the image before the article title:

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

and move it at line #25

<!-- image moved here -->
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
<!-- // image moved here →

Save autoblog_item.php and move on …

image 01

Changes in autoblog.xml:

Change the code from lines #3 to #8 :

Current code:

<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>

Change to:

<layout title="Category Auto Intotext Blog" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[Displays article with auto created introtext by limiting main text, in a single or multi-column layout.]]>
</message>
</layout>

That way we have created a new “Menu item type” that can be chosen later on when we will create the menu item to link to our new blog layout.

Save autoblog.xml and move on …

image 02


C. Create a field to control the characters number through Template parameters.

Lets create a new field to control the number of the characters so it will be easy to change it through Template parameters in backend.

We will open the ../templates/protostar/templateDetails.xml and add at the end of the fieldset a new field:

<config>
<fields name="params">
<fieldset name="advanced">


<field name="charactersNumber"
label="Blog Introtext characters number"
description="Enter the max characters number that will be used from main text to introtext"
type="number"
default="200" />
</fieldset>
</fields>
</config>

If we save and go to backend Template Styles and pick Protostar we will see in “Advanced” Tab the new parameter we created: “Blog Introtext characters number”.

So we can enter there the number of characters of text that will create the introtext.

NOTE: We can not make an override for the file “templateDetails.xml” we have just changed, and at the next update the changes will be lost. So just re-upload this file after the update.

We have include inside our code (step B.2) a default value “200”, that act also as safety net, so if you will not re-upload the file, again, 200 text characters will create the introtext and of course you can change this number through the file autoblog_item.php.

 

image 03

image 04

D. Create a menu item that will link to our new Custom Blog Layout.

For this tutorial I created a new category called “My Auto Introtext Blog” with 5-6 articles. Keep in mind that in order to have a streamlined workflow when adding articles, it is essential to use “Images and Links” tab to insert images in the articles for both intro and main image.

Of course there is no need to enter “Read More” for introtext as the purpose of this tutorial is exact this: to be created automatically.

So let's go and create the menu item:

  1. Go to Menus, choose your menu and hit the “New” button.
  2. Menu title: add a title, “Blog” for my example.
  3. Menu Item Type: When click “Select” then in the popup “Select Item Type” click “Articles” and you will see the Type :
    “Category Auto Intotext Blog” Displays article with auto created introtext by limiting main text, in a single or multi-column layout.
    It is the new Title and Description we entered in step B inside the override autoblog.xml
  4. So select it!
  5. Choose a category: Select “My Auto Introtext Blog” for my example.
  6. Click the “Page display tab” and in “Page Class” text box enter: “myAutoBlog” (NOTE leave a space before the word “myAutoBlog”)
    Why this? In order to make later on specificity changes to our css and affect ONLY the new override page. This mean that if you select another “Menu Item Type” with blog view will not be affected at all from the changes that we will make.
  7. That's it click “Save”

 

image 05

image 06

image 07


Now go to frontend, select from menu this menu item (Blog) and see the result. Yes, you have a Blog page with even introtext for all posts!

Let's tweak now the look.

image 08

E. Create a new css file to enter our tweaks in order to change the look.

Inside the ../templates/protostar/css/ we will create a new file called user.css. Protostar template by default looks and render, if it exists- this specific file. See below the file, where all selectors have comments in order to see what I am trying to achieve, so you can use them and make your changes easy later:

/* .myautoblog is for specificity purposes so only in the blog page */
/* with this page class you will have the changes below */

/* margin from images */
.blog.myAutoBlog .pull-left.item-image {
margin: 0 0 10px 0;
}

/* remove the word "Details" above article details - I just do not like it there! */
.blog.myAutoBlog .article-info-term {
display: none;
}

/* Use of the flexbox to make items have same high */
.blog.myAutoBlog .items-row {
display:flex;
}

/* give some color to items and other ... */
.blog.myAutoBlog .items-row [class*="span"] {
background:#eee;
margin-bottom: 15px;
padding:0 0px 50px 0px;
position:relative;
}

/* a different color to leading item and other ... */
.blog.myAutoBlog .items-leading [class*="leading-"] {
background:#ddd;
margin-bottom: 15px;
padding:0px 0px 50px 0px;
position:relative;
}

/* force items read more button to be always at the bottom right */
.blog.myAutoBlog .readmore {
position: absolute;
right: 10px;
bottom: 0px;
}

/* minor changes, that you can change easy later */
.blog.myAutoBlog h2, .blog.myAutoBlog .page-header {
margin: 0 0 5px 0;
padding: 0 5px 3px;
}

.blog.myAutoBlog .page-header {
border-bottom: 0px solid #fff;
background: #0088CC;
}
.blog.myAutoBlog .page-header a{
color:#fff;
font-weight: normal;
}
.blog.myAutoBlog .icons {
padding: 0 10px;
}
.blog.myAutoBlog .myIntrotext {
padding: 0 10px;
}

@media (max-width: 767px) {
/* removes flex and allow items to stack on mobiles */
.blog.myAutoBlog .items-row {
display: block;
}
}

And here is the final result:

image 09


Conclusion:

With auto introtext blog creation, we tried to solve a routine publishing problem, but more than that we took a taste of the power and flexibility of Joomla.

Component overrides, page classes, template parameters, a few lines of code and custom css are some of the tools we used to create a total different look of a blog.

Last and most important is that the next time you will update, all changes, except step C that has safety net (see note there), will remain intact.

I hope that you will not limit yourself by the result but to be earned by the path...

Sources:

  • Article images in example pages screenshots are from the unsplash.com
  • Joomla! Documentation - docs.joomla.org
  • Dexter M., Landry L. - Joomla! Programming

 

 

 

 

 

 

 

0
156 Websites Participate in a Successful Update Da...
JUG Round Up February 2017
 

Comments

Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/