Joomla Templates Club 406,261 posts

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#181451

It seems that there is quite a handful of people who have been asking or thinking about the possibility to use articles as a menu item that would open external urls when clicked on. I see that this question has popped up here and there for other templates on this forum, all which remains unsolved as there is simply no plugin that can perform this perfectly or flexible enough to control whether a pop up or new tab is used.

Thus I’m writing this guide to help solve this problem for you. For the sake of compatibility with Joomla & Joomlart templates, this guide will only provide instructions for Joomla articles, and applies to Joomla 2.5 only *since there are no template for 3.0 yet* =) It can also be done for K2 btw but I’ll create a separate thread with K2 code if there’s request for it.

This guide is abit long since it will cover the code modification for Image Link, Title Link & Read More link. I’ll break it down into simple steps so you can understand the flow of the code. Well then, let us begin!

Important note: This code modification is only done for template files. There is no need to hack Joomla core so it should be update safe =)

The guide starts here if you are too lazy to read my commentary above.

1) Go to article manager, add/edit an article.
2) Look under metadata options, there should be a field called “External Reference”.
3) Joomla don’t really uses this field and infact it’s quite undocumented but it’s purpose is to pull meta information from external site such as Wikipedia sources. Still since we’re going to be opening the external link, it doesn’t matter. So let’s put the external URL in there, for example http://www.example.com/

Now, we need to modify the template file to call this field and extract the URL that was entered. Actually, you can even enter other values in this field as well and use the value to perform checks, so you can use it to do something else if you get my drift =) So this guide applies to alot more possibilities.

Open com_contentcategoryblog_item.php and find this line of code:

$xclass = $metadataParams->get('xclass');

That’s for extended classes and below there, we will call add another line of code to call the value of “External reference”. So it looks like this

$xclass = $metadataParams->get('xclass');
$xref = $metadataParams->get('xreference');

Now we have placed the url in the variable $xref and this part only needs to be done once for this php file so let us move on to create a check to determine the article link to use if $xref is not empty.

Read More Button
Still in blog_item.php find this block of code. I’ll give the example for readmore button first as it’s the easiest to understand.

<p class="readmore">
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">

Now we’ll create the check and replace that block of code with this

<p class="readmore">
<?php if (!empty($xref)): ?>
<a href="<?php echo $xref; ?>" target="_blank" title="<?php echo $atitle ?>">
<?php else : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php endif; ?>

Now it will check if “External Reference” is empty. If it’s not empty, it will use the url as the article’s link and open in a new tab. Note that I have remove class=”item-link” so it won’t open in pop up (It’s used in JA Wall, if you’re using other templates, you can remove class=”item-link” ). But if “External Reference” is empty, it will use the default article link =) That should do what you want to perfectly and it’s very flexible to make or add additional changes.

Article Title
Ok so now on the article title, also still in blog_item.php, look for this code. It gets slightly complicated so I’ll show the entire block code.

<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php echo $atitle ?></a>
<?php else : ?>
<?php echo $atitle ?>
<?php endif; ?>

Once again we’ll create a check if $xref is empty and echo the url to use. Replace the block above with this block below.

<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<?php if (!empty($xref)): ?>
<a href="<?php echo $xref; ?>" target="_blank" title="<?php echo $atitle ?>">
<?php echo $atitle ?></a>
<?php else : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php echo $atitle ?></a>
<?php endif; ?>
<?php else : ?>
<?php echo $atitle ?>
<?php endif; ?>

Image Link

Hang in there! We’re almost done here. Just left the image link to do. Once again, still in blog_item.php, look for this block of code.

<div class="item-image">
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php endif; ?>
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<span> </span>
<span class="item-pin"> </span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>

Wow that’s alot of code! But actually, we’re just modifying this one line within that block of code. Wait, I’m just showing an example, I haven’t add the modification yet.

<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">

This is how the line looks like after modification. Just replace that 1 line of code with this and you are done =)

<?php if (!empty($xref)): ?>
<a href="<?php echo $xref; ?>" target="_blank" title="<?php echo $atitle ?>">
<?php else : ?>
<a href="<?php echo $link; ?>" title="<?php echo $atitle ?>" class="item-link">
<?php endif; ?>

And with that, the whole modification is complete. Aren’t it simple? ^_^ If this customization has been of help to you, please thank the post and also share your modification or modification in JA Wall Guides so fellow wall builders can help one another and make this an even better template!

P.S: In case for some reason you don’t understand the purpose of this guide. The end result of this modification would be that, clicking on readmore, image & title of any wall article would open them in a new tab. The url of the new tab will be the value defined in “External Reference”.

1 user says Thank You to arucardx for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#470259

Arucardx, this is a fantastic contribution – thanks so much.

One tweak request.

How can we tell it NOT to open in a new tab for some URL’s

In my situation, I have some cases where the “external URL” is actually a category view inside of JAWALL, and I don’t want it to open in a new tab.

In some of my other cases it is perfect that it opens in a new tab.

Thanks in advance,

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#470268

Hmm.. that’s quite hard to do without having to hack the core file to add another field. Well not really hard, just a question of how ideal. In K2, this can be done easily since we can just create another extra field to perform additional checks but here in Joomla, we only have the “external reference” field to work with.

There are a couple ways that can be achieved.

1) We could attempt to use the “Extended Class” field to do a check though. But that would mean using that field just for the new tab 1,0 value, that would mean no styles. A way to work about that is to use a php function to find the string position of the value to check for, but unfortunately I’m not familiar with this php function. I actually don’t know php, I only know programming logic. This method one is however the more efficient way.

2) Another way is, we can check the item id or category name then determine if this category should open the external link in a new tab. This method is not very efficient since it affects every article in that category.

Those are two of the methods I can think of at the moment, and to get those working a new check statement needs to be added to determine target _blank or not. But site usage wise, I don’t recommend that you do that. To be honest, I don’t even recommend this customization unless all your articles are going to be opened as external links. The reason why is because it’s confusing to a user why an article open in an external link but another doesn’t. Site navigation needs to be logical if not systematic, but what you are trying to do is illogical.

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#470411

Okay I have given this thought and appreciate your feedback. In fact I will abandon the site navigation that I had in mind and follow the traditional way it is supposed to work, putting content and links inside the articles

this leaves me with one pending issue:

How can I make the left menu items open the corresponding article?
I have 62 articles and 62 left menu items. The order is not the same on purpose, but each menu item corresponds to an article.

Thank you

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#470466

Actually you have to abandon the whole idea fully. I gave it some thoughts and there is a way to solve that confusing navigation. All you have to do is change the Read More text to some other Text so there is some indication that this article will open in a external url. While other articles will open as per normal.

Your idea of opening 62 articles in 62 menu items on the sidebar is even more ridiculous -_-

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#470659

arucardx, in comparison to many other of your fantastic technical responses, your ;last remarks are quite disappointing.

My site is a regional directory site. But the visual advantages of using a product like JA WALL for front screen delivery are very strong.
People who I have shown this to locally find it fantastic and are wondering why it is taking me so long to get it live.
How can I explain to them that such simple screen delivery is seemingly quite complex in Joomla (Now I am looking at K2)

Your remarks about site navigation are solid, but there are exceptions, and I am involved in them, and I know I am not the only one, hence your observation that “quite a handful of people are asking about external URL’s”
There is a reason why this thread has over 500 views in 16 days:
http://www.joomlart.com/forums/topic/how-make-article-preview-link-directly-to-an-external-url/

The reason is that while typical site navigation calls for neat tidy and solid menu navigation, the reality is that there are many sites which need to link to external contents for business purposes related to business agreements, etc.

Yes, at the end of the day the user must be kept in mind, and that is the most important in my book too, but some things cannot be avoided because of business. And after all, the new window “solves” keeping people in your main site, assuming they return to the tab where it was left open.

Regarding your comment :
“Your idea of opening 62 articles in 62 menu items on the sidebar is even more ridiculous”

Think of it from a user point of view.
For every minute a user has been on the Internet, since 1993, they are doing one of two things:
1) Searching for something specific
2) Casual browsing

In my case, I have 62 front page graphics that represent “categories”. When a user arrives, and has seen the site before, and for bandwidth or other reasons can’t see all the graphics right away, or simply don’t want to wait, they can go to the left menu and quickly (this is debatable) find the “category” and click it.

This is especially important during a demonstration of the site to a potential advertiser.

Should I be using K2?

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#470671

Ok so you are talking about using those 62 articles as menu items alongside the 62 menu items in the sidebar. I thought you meant having 62 menu items in the sidebar that opens 1 article each. But I somewhat get your idea now, though I’m not so sure how your category nesting would look like. Nonetheless, it’s workable and if it means anything to your friends, I have been working on my JA Wall site for the past 3 months till early morning every night and I’m still not done with it.

Btw I’m not saying that opening links to external contents is wrong or confusing, its just that there must be a slight indication like an extra red arrow next to the button or a different button color so users will know next time that “Hey, clicking on this would open up a new tab cause it has a red arrow, but clicking on the other will just redirect me.”

Also for what you are trying to do, it might be better to just remove the sidebar entirely since the articles on the front page are going to serves as Menu Items/Categories, so the sidebar menu items are going to be identical right? In that case, you will then simply add an option like “SiteMap” to the top navbar which will then display the 62 category links nicely. This will help to eliminate your ordering issue, having too long a navbar to scroll on a mobile device(where poor bandwidth is the concern so you need to focus here), it will also open up an option for your to arrange and slightly style the links in a nicer and more orderly manner for presentation usage.

Finally onto the topic of K2. Well it’s meant for advanced users, thus not really recommended if you are not into modifying other developer’s code and you are better off sticking to Joomla cause of that. An explanation to that would be that K2 actually serves as an overlay on top of Joomla so its kinda piggybacking but at the same time its another platform of its own. As such, majority of plugins developed for Joomla doesn’t work with K2, those that work with K2 are normally commercial plugins. Moving to K2 restricts you instantly in terms of plugins even though there are also some plugins developed just for K2.

Using K2 also means you would now be managing two platform. Both Joomla and K2. Some issues such as captcha conflict between Joomla & K2 when both is enabled such as K2 registration form alongside Joomla Password reset form because K2 doesn’t have its own, results in an error that keeps saying the text entered is wrong because 2 instances of captcha was loaded. Support for K2 is also horrible, even worst than Joomlart. You will be required to debug any problems yourself, come up with the solution and provide it so it gets fixed in the next K2 version. If you think I’m joking, you can look at their bug tracker http://code.google.com/p/getk2/issues/list it goes way back to last year and on their forum, they only answer questions that they have ready answers for else it just disappears down the pages.

Then there’s also the issue of backwards compatibility, Joomla breaks K2, K2 breaks Joomla, this cycle is forever. For example the latest version of K2 to support Joomla 3.0 broke some backwards compatibility with Joomla 2.5 but this was actually caused by the usage of older K2 code in template overwrite. They also did something funny with the registration form that I don’t wish to comment on… the bug is even there on their homepage.

So unless you require specific features from K2 such as tagging and extra fields, don’t use K2.

1 user says Thank You to arucardx for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#470682

Ok K2 is out of the picture for me , based on what you said, thank you for the insight.

I like your idea about sitemap…is that a built in site map tool that I can just activate?

It is crucial that on smaller devices like Ipads all the way down to blackberrys, that the word MENU still appear at the top of the screen like it does in the attached graphic, for those users who dont have bandwidth or patience to scroll through the whole wall. Will this be possible with Sitemap? thank you

I am worried about the languages because I have already loaded english and spanish sidebar categories, with french and portugese already translated and ready to upload , how would that work? My ideas was to close articles in english , that are not translated yet, and show them in the other language categories.

Yes the 62 items on the sidebar are the same names as the article titles so yes, the ideas is whether a user clicks on a sitemap link or the article it self, the same result should happen.

In my case there are only 2 results that could occur from what I see :

1) That the click makes an external URL open (you have documented this solution)
2) That click opens the article itself, an article where I will have to find a way to add pictures and graphics to easily in a nicely laid out manner – these are the business listings themselves. Any ideas short of using old fashioned tables for nicely even listings? Joomlart doesnt seem to have a plugin that lets you fill an article with nicely styled rows of business listings.

Thank you

---

Attachments:

1. 

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#470695

I’m afraid I can’t advise you on this as your question now is about site or design. You might want to create a new thread and see if anyone can help you.

In regards to the sitemap, you can either use a plugin to generate the sitemap or create an article showing the links then creating a menu item to that article.

1 user says Thank You to arucardx for this useful post

1. seaneo

[Honzazi Friend HonzaziJoin date: June 2006Posts: 63Downloads:1Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#476375

Hello,
this sounds very interesting… but I’m not sure I completely understand, can you please post some URL or explaining images where I can check it?
Thanks a lot 🙂

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#476391

Hmm.. the end result is basically when someone clicks on the article in JA Wall, it opens a external url instead of the default item link. Why do you need a demo site for that o.O?

[Honzazi Friend HonzaziJoin date: June 2006Posts: 63Downloads:1Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#476394

Hi, thanks,
I think I understand now… I wasn’t sure I did.
Thanks

[joncr Friend joncrJoin date: January 2009Posts: 17Downloads:3Uploads:0 Thanks: 6]

#480800

Arucardx, that’s an amazing hack. A question: is there a way instead of using the “read more” for the link to jump from the intro image? I mean, insert the link in the extended classes, and use it as a hyperlink for the intro image? It would make our life so much easier, when trying to post ads or such. 🙂

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#480857

Hi joncer,

My hack has two part. One for the Read More button and one for the Image Link(when you click on the intro image). I believe the one you are looking for is Image Link =)

1 user says Thank You to arucardx for this useful post

1. joncr

[joncr Friend joncrJoin date: January 2009Posts: 17Downloads:3Uploads:0 Thanks: 6]

#480939

Arucardx, Would you please attach the corrected file? I tried to make the changes, but I am doing something wrong. No clue what, but the formatting is all messed up in the file when I try saving it. I would greatly appreciate it if you could attach the file.
Thanks again

[Author]

Posts