Sidebars in Joomla articles using Articles Anywhere

Articles Anywhere

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: 1020

Special 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:

Articles Anywhere-popup

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.

Articles Anywhere - Editor ButtonThere 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:

Articles Anywhere No styling

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!

Articles Anywhere Side bar

Svein

After living in Norway for over 40 years, I have moved to Brazil. I still sometimes travel to Norway to work, but aim at making those trips shorter and shorter. My worklife has been spent in the professional broadcast area. I have been doing regular production, both recorded and live shows. And I have been working for one of the major suppliers of editing systems, Avid Technology. The last few years I have done a lot of training and teaching. It is a very rewarding kind of work and no two days are the same. I also spend some time hacking together websites and tell people about the benefits of having websites with content management systems - CMS and lately also about the advantages of Linux. My preferred flavour is called Kubuntu.

You may also like...

6 Responses

  1. Troponin says:

    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

    • Svein says:

      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.

  2. Rich says:

    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?

  1. October 18, 2010

    Story added…

    This story has been submitted to fsdaily.com! If you think this story should be read by the free software community, come vote it up and discuss it here: http://www.fsdaily.com/Beginner/Sidebars_in_Joomla_using_Articles_Anywhere

  2. October 18, 2010

    [...] This post was mentioned on Twitter by Datahverdag, NoNumber! Peter v W. NoNumber! Peter v W said: Check out Sidebars in Joomla articles using Articles Anywhere @ http://digs.by/9Is8eU [...]