Create Line Breaks in Joomla Article Titles PDF Print E-mail
Written by Administrator   
Tuesday, 29 December 2009 13:40
There are times when I need to have the title of an article break somewhere in the title itself. This is not something which is easy to do in Joomla without modifications, as far as I know.By applying a small modification of the Joomla template overrides however, we can achieve our goal quite easily. Some restrictions apply, though.In this tutorial, I'll show you how to create the line breaks by replacing text in article titles on the fly.
In my case, I needed to break the title of an article name when showing the article view.Many titles on this site have a similar pattern, for instance 'Tutorial:'.

I want this pattern to show on the first line, then show the rest of the title.
I don't want it to show like this any other place (blog view, front page etc), so I will have to do the manipulation of the text string on the article view.

What I need to do is to do a PHP string replace to find the pattern in the title text, and then replace the pattern with a the pattern + linebreak code

The original text string could be: 'Tutorial: How to Create Line Breaks in Joomla Article Titles', and I want it to become 'Tutorial:<br /> How to Create Line Breaks in Joomla Article Titles'. Thus, 'Tutorial:' will show on the first line, while the rest of the title will show on the second line.

 

Edit Your Template Overrides

To acheive this, you need to edit the HTML override for your article view. This file can be found in the directory templates/TEMPLATENAME/html/com_content/article/. The file is called default.php.

Create a copy of the file before starting to edit the original.

Open the file with eXtplorer or your HTML editor of choice.

Then, find the following code (should be near to the start of the file):

<?php if ($this->params->get('show_page_title', 1) && $this->params->get('page_title') != $this->article->title) : ?>
<h1>
<?php echo $this->escape($this->params->get('page_title')); ?>
</h1>
&lt;?php endif; ?>

The code can vary slightly, depending on which template you're using. Just make sure you find the piece of code showing your title.

I insert the following code before the just mentioned code.

&lt;?php
$page_title = str_replace("Tutorial:", "Tutorial:&lt;br />", $this->escape($this->params->get('page_title')));
?>

In the previous code, we set a variable ($page_title) and replace the occurrence of 'Tutorial:' wth 'Tutorial'<br />', which breaks the line.

I can add as many of these lines as I need, for instance like this:

&lt;?php
$page_title = str_replace("Tutorial:", "Tutorial:&lt;br />", $this->escape($this->params->get('page_title')));
$page_title = str_replace("Tip:", "Tip:&lt;br />", $this->escape($this->params->get('page_title')));
?>

Then, replace all instances of this:

&lt;?php echo $this->escape($this->params->get('page_title')); ?>

with:

&lt;?php echo $page_title; ?>

Now we pick up the new, manipulated text string from the variable $page_title that we just created.

Thus, the resulting code will be:

&lt;?php
$page_title = str_replace("Tutorial:", "Tutorial:&lt;br />", $this->escape($this->params->get('page_title')));
?>

/lt;?php if ($this->params->get('show_page_title', 1) && $this->params->get('page_title') != $this->article->title) : ?>
&lt;h1>
&lt;?php echo $this->escape($this->params->get('page_title')); ?>
</h1>
&lt;?php endif; ?>

Now, the article title will break after each occurrence of the text string 'Tutorial:'.

You can do some fun stuff with this. For instance, you can add <span> tags to certain patterns, which makes it possible to style separate parts of the title individually.

Example:

$pagetitle = str_replace("Tutorial:", "&lt;span>Tutorial:&lt;/span>&lt;br />", $this->escape($this->params->get('page_title'))); 

By using the span tag as a selector in your CSS file, you can style the text 'Tutorial:' in another font size, color etc.

In my example, this is the styling I applied to my span:

div.joomla h1.title span {
font-size:22px;
color:#000;
letter-spacing:normal;
line-height:26px;
}

Some Restrictions When Using this Technique

There's no use applying this technique if you don't have patterns that regularly show up in your article titles. You could of course enter a new string replace line to your code for every thinkable combination of words etc. However, this can very quickly produce unwanted and unexpected results.

Another thing to consider is that the string you want to replace should be unique enough to avoid confusion. If you have a string that is to generic, the title may be broken in a sange place. My string is 'Tutorial:', a string I only use in the beginning of article titles on this site.

If you find some fun use for this technique, let me know by commenting below.

Author : Kristoffer, About Hi, my name is Kristoffer Sandven, and I want to help
you become successful with Joomla! Please don't hesitate to
comment, email me and suggest a topic I should explore.Read Original Post Here


Administrator Written on Tuesday, 29 December 2009 13:40 by Administrator

Viewed 860 times so far.

Rate this article

(0 votes)


Newer news items:
Older news items:

Comments (3)Add Comment
0
...
written by Clark, December 30, 2009
Nice tutorial, But In the image, I see the blue line after title.how can I make it, can you write a tip to do that? thank you
admin
...
written by admin, December 30, 2009
Nice tutorial, But In the image, I see the blue line after title.how can I make it, can you write a tip to do that? thank you


I use A new content management called K2 compoment from Joomlawork... with this extensions, you can easy tag, decorate your article .I am writing a Article about K2 compoment and Some Content management compoment, It will be public soon
0
...
written by Bill, January 23, 2010
It seems in your example, you have gotten the left angle bracket at the start of the line quoted, so you get "lt" rather than >

The ending right angle brackets seem OK.

Write comment

security code
Write the displayed characters


busy
Last Updated on Tuesday, 29 December 2009 14:03
 

Extensions

Tools
+Backup
+Mini tools

+
Advertise
+
SEO &SEF

Media
+
Gallery
+
Video
Styles
+Tab & Slide
+Sharing
+
Tags Cloud
+Visitors
Shop
+
Update
+Update

Articles
+Blogger
+News
+Comments
+Auto post
Social
+
Forums
+ShoutBox

Special
+
Holidays
+Editors

+Files

Manage
+
Download
+Update

+Update

Most downloads in 10 days

calendar.gifAug.01

Today Joomlapanel are pleased to announce the release of  Free JP Dreamland Template, the 5th Te...

calendar.gifMay.20

a free Joomla template for travel

calendar.gifMay.20

A nice templates for Joomla 1.5

calendar.gifMar.16

MyPortfolio Joomla 1.5 template is very first template I ever made for Joomla Community when Port...

calendar.gifApr.06

Free Joomla templates from Templatemonster. It's nice

Extensions stats

The download archive contains currently 139 downloads in 24 categories. To date, these have been downloaded 45359 times.

Blog Tips

Blog News
SEO Tips

Online

We have 43 guests online

Newest Files

calendar.gifMar.01

Latest Free Template From Joomvision

calendar.gifMar.01

Today Joomvision are pleased to announce the release of Free JV 9BodyTemplate

calendar.gifSep.11

The Fastest Joomla! Admin Template AdminPraise Lite is a super lightweight Joomla! administrator ...

calendar.gifAug.15

Hi! JoomPlaza members,today, I received anouncement from Rockettheme. A new free Joomla template ...

calendar.gifAug.01

Today Joomlapanel are pleased to announce the release of  Free JP Dreamland Template, the 5th Te...

SocialTwist Tell-a-Friend