A tool that magazines and newspapers often use in their layout is something called a sidebar. It is used to either give a quick overview of some facts that relates to the main article, or to explain a concept to better understand the main subject.
To do this in Joomla has been a little bit of a hassel, especially if you are not a webdesigner.
Today, Peter van Westen (Twitter: NoNumber_nl) has made this incredibly much easier. One of his Joomla extensions, Articles Anywhere got a few more settings that basically allows you to put a div around the inserted article and set the size and placement.
To make it look really good, it still requires that someone add a few lines of code of css to the template, but it is enough to do this once – all the journalist will have to do is add the name of the css class when he inserts the sidebar.
The first step is to install Articles Anywhere – either through the normal Joomla installation, or by using Peter’s excellent NoNumber! Extension Manager. I would recommend this for all installations – chances are that you will need at least one or two of his extensions anyway.
What Articles Anywhere does is insert one article inside another, so we need to have an article to insert. I have made one here called Facts that contain the following:
FACTS
Model: XYZ
Price: 1020Special features: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris non nunc euismod condimentum at in eros.
Phone: 555-123456
Website: www.yoursite.com
E-mail: info@yoursite.com
Then I open the article where I want this to appear as a sidebar, place the cursor where I want it and click on the “Insert Article” button at the bottom of the editor. The process is a bit like inserting a picture. You get a box popping up that looks like this – I have adjusted the settings to what I need:
The new is the settings box to the right. Check that you want to “Embed in a div”, set the size and either left or right align it. I have also removed all but the “All text” setting in the left configuration box. When the configuration is done, find the article that you want to insert and click on it. It is a good idea to click on the ID of the article just in case you decide to change the title of the article later.
There is even a way to make these settings stick: Go to Extenions>Plugin Manager and find the plugin that is called “Editor Button – Articles Anywhere” and click on it. you will then get the configurations that allow you to set the defaults for the Artcles Anywhere extension. So now, most of your settings will be done and you can make a sidebar in just a few seconds! Really nice!
I have made these settings default:
- Use K2 instead of Joomla content type
- Not use the title tag
- Not use the Readmore tag
- Turn on using a div
- Set a size for the div
- Right align it
- Add a div classname
The only thing I wold need to change now might be the size of the div depending on how how much I needed to add in it.
After going through the steps above, you will have a code inserted in your article that looks something like this:
{article k2:24}{div width:200|height:320|float:right|class:sidebars}{text}{/div}{/article}Save the article, and take a look at what you have:
I want to make the sidebar stand out a little better and add a little air around the text. So I added this section at the end of the css file for the template:
div.sidebars {background:#b6d0d6;margin:10px;padding:5px;}And suddenly I have a sidebar that stands out and help my readers get a quick overview of the facts!
This is just a very basic use of the sidebar, I am sure you can come up with much better styling and use for it. Want to show how you use it? Leave a comment!
nice Tutorial. And it is really usefull for Infos which will be repeated in several items. But for K2 itself you can use Extra Fields and show them @ this position.
greets
Thorsten
Yes, that is true. But as far as I know, extra fields will not be as flexible as this when it comes to placement, size etc. It all has to be hardcoded into the template. With Articles Anywhere, you can decide where you want to place it every time you insert it. And if you want to do one right aligned and one left aligned, you can do that any time you want. No need to change the template, it is all in the settings of the extension.
I was wondering if you know how to pull the image along with the text. I tried using {itemImage} and a bunch of other variants, but no luck?
Hi Rich,
That depends on what image you want where. If you want an image inside the sidebar, it should be added to the article that you put there. Did I understand it right?