Introduction

In this video we'll take a look at the Pro version of Quick Index.

In the previous video we looked at the basics of the Free version. We have seen how to add a table of contents to your Joomla website by simply using the {index} tag.

We looked at how to control which headings to include in the index.

And we learned that we can choose between a numbered list or a bullet list.

The Pro Version extends the possibilities, with more control over what the index includes and how it looks.

So, let's take dive into the exciting features that the Pro version has to offer!

We now have the latest Pro version of Quick Index installed, which at the moment is version 2.2.0. And what you see here is a Joomla 3.9.2 setup. If you are using newer versions, things might look a bit different.

Place an Article Index anywhere

Let’s jump into one of the coolest features that Quick Index Pro offers.

This is the Index we played around with in the previous video.

What if, instead of placing the index on top of the article, we could place the Index on the sidebar here? We can do that!

The Pro version adds the ability to place an article Index anywhere we want, not necessarily within the same content where the headings reside.

Let’s try this!

Let’s go to the modules manager and create a Custom HTML module We turn off the title option as we don’t need it. And we set it to the module position “Right”.

And here comes the best part. So, how do we call an Index from a certain article here?

It’s very simple. We insert the {index} plugin tag. And we specify our desired article with an “article” attribute. We can either use the title of the article, or the ID. For simplicity, we’ll use the ID. In our case, the ID of the article where our headings are, is number 20.

And here we go! Now the Article Index is placed in the sidebar.

That looks okay, but the default styling of the module makes it look like there’s a block inside another block. We’ll get into the Styling of Quick Index in the next video dedicated to the Settings. For now, let’s remove the module styling to make it look nicer.

This is done via the “Advanced” tab of the module manager. Here, we set the “Module Style” to none.

Now it looks even better!

And as you can see, the original index in the article has been automatically hidden, so that we don’t have two identical indexes in the same page.

Currently we didn’t limit this module by any assignment, so that means it would be displayed on all pages of the site. We suggest using another Regular Labs extension - “Advanced Module Manager” - to limit a module to specific articles.

But either way, the Index will also work even when viewing another page.

For example, let’s navigate to this “Cats” article. As you can see, the Index of our article we specified is still here on the sidebar.

And the links automatically point to the headings of our article.

Check out the documentation for more details on what you can do with this feature.

Minimum and Maximum depth

Now, let’s take a look at some other features that come with the Pro version of Quick Index.

As we learned, by default Quick Index will include all headings found in the content.

This includes all levels of heading tags, from Heading 1 to Heading 6. To show this behavior, here we created an example article that all 6 levels of headings.

The Pro version of Quick Index allows to limit the depth of levels we want to show.

So, for example: If we only want the first two levels of Headings to appear in the index, we can simply add a "max" attribute to the "index" tag. And set it to "2".

Now the Index doesn't show the third or deeper levels anymore. It only shows the first two.

We can even decide to skip Level 1, and only show headings from Level 2 and 3 instead. How? Simply by adding a "min" attribute as well. We'll set the "min" attribute to "2." And "max" to "3".

And here's the result, now the main "Fruit" and "Animals" headings from the top level do not appear. The index only shows Level 2 and 3.

Individual Level Style

In the previous video, we've seen how we can change the list style, from numbered list to bullet list.

Well, the Pro version goes one step further. With the Pro version we can control the style for each individual level of the list.

Instead of using the simple "ordered" attribute, we can add specific attributes for the level we want to control. For example, let's say we want the first level to use the ordered list... the second level to use the bullet list... and the third level to use the ordered list again.
So we just add an underscore and 1 for the first... And a 2 here... And the last gets an underscore 3.

{index ordered_1="true" ordered_2="false" ordered_3="true"}

Here is what the result looks like.

We can also accomplish the same result in a simpler way, including all levels in the single "ordered" attribute. We simply separate the true and false values with a comma.

{index ordered="true,false,true"}

And this generates the same result. You can use whichever method you prefer.

Ordered List Style

And speaking of styles... As you know, not every ordered list is created equal. They can be of different types. They can use regular numbers... They can use letters, either uppercase or lowercase... and they can use roman numerals.

Quick Index Pro allows to customise this style as well.

So, as you probably guessed it, regular numbers is the default behaviour for ordered lists. Let's change the type to letters. We simply add an "ordered_style" attribute. And set it to "letters".

{index ordered_style="letters"}

Now our ordered list is using letters instead of number.

Let's take a look at the other styles as well. We can have lowercase letters.

{index ordered_style="letters_lowercase"}

Or we can also set our list to use roman numerals.

{index ordered_style="roman"}

Roman numerals can be lowercase as well.

{index ordered_style="roman_lowercase"}

But what if you wanted a different order style for different levels of the index? No problem, you can do that too! Similarly to what we have seen earlier for the list type, we simply add to the attribute an underscore and the number of the level we want to change.
So let's set the first level to regular numbers. The second to letters. And finally the third level to roman.

{index ordered_style_1="numbers" ordered_style_2="letters" ordered_style_3="roman"}

And here we have our diverse index, with different styles for each level.

Also here, we can include all Levels in the single "ordered_style" attribute, by separating the true and false values with a comma.

{index ordered_style="numbers,letters,roman"}

This also works the same. You can use the method you prefer.

As we've seen, we can pretty much style the Index list however we want, with any combination we can think of! 

Add Number to Headings

And finally, the Pro version of Quick Index comes with another cool feature. In the Quick Index Plugin Settings, which we'll examine in detail in the next video, we can turn on this "Add Number to Headings" option.

This automatically adds the index numbering to the headings in the content. Let's see how that looks.

Now the Headings in the content have been automatically prepended with the numbers used in the index. Another useful ability that Quick Index puts at your disposal.

Recap

So just to recap.

We have seen how we can place an index of an article anywhere we want, even in modules...

We have learned how we can limit the depth of levels we want to show in the index...

...how we can set the list to bulleted or numbered for each individual level...

And how we can even control the style of ordered lists, using letters or roman numerals.

Head over to the Quick Index Tutorial for more details on all of the extension's features. Or stay tuned for other videos that look more in depth at specific functionalities.

In the next video we'll walk through all the settings which help you control how Quick Index works and what the index looks like.