Introduction
In this video we’ll take a look at the Pro version of Articles Anywhere.
In the last video we looked at the basics of the Free version. Now we’ll take a closer look at the exciting extras that the Pro version has to offer.
In the previous video we have already seen how you can place a single article - or specific data of that article - with the {article} tag. So let’s continue where we left off. In the last example we had this code which outputs the title, intro text and read more button of 3 articles.
This is what it looks like on the website.
What we have done here is duplicate this code 3 times. The only difference is the title of the article in the {article} tags here. As you can imagine, this solution is not very dynamic. What if we add an animal, like Pigs. Then we have to copy this code again.
So let’s make this better using the Pro version of Articles Anywhere.
In this video we will be working with the latest Articles Anywhere Pro version 8.2.0. And what you see here is a Joomla 3.8.11 setup.
If you are using newer versions, things might look a bit different.
Instead of using the {article} tag, we will use the {articles} tag - so the plural word.
To begin with, we will just remove this code for the Dogs and Guinea Pigs articles. The {articles} tag allows us to display multiple articles with one single tag, based on Filters. Don’t forget to change the ending tag to {/articles} as well.
Articles Tag
Instead of just using the title of the single article here, we can add filters to display articles by Category, Tags, Article Titles, Custom Fields and a lot more.
In this case we want to show all articles from the category ‘Animals’.So let’s put that in the {articles} tag.
{articles category="Animals"}
[link][title][/link]
[introtext]
[readmore]{/articles}
And there we have the result. All articles from the category ‘Animals’ are displayed automatically, with our title, intro text and read more button repeated for every article.
Separating the Output
Now let’s add an extra Animal article to see what happens.
I already created this “Pigs" article to save time, but it is unpublished. So we’ll just publish it.
Let’s refresh the page. And look at that, we now have all 4 animals listed here, without needing to touch that code.
But what if we wanted a horizontal line between each article? How do we do that?
Now, just to explain what is happening in this code:
This {articles} tag tells Articles Anywhere what articles it needs to look up.
Then between these {articles} tags, we tell Articles Anywhere what data to show of every article. So this part gets repeated for every article.
If we want to have a separator between each article, we can use the separator attribute inside the articles tag. So to have a horizontal line, we can simply type:
<hr>
That is the HTML code for a horizontal line.
{articles category="Animals" separator="<hr>"}...
And there you go! Now every article is separated with a horizontal line.
Also, be aware that the content that gets repeated for every article, doesn’t have to only be article data using the data tags. It can also be fixed text or html. This way we can add html to style things in any way we want.
In this html view it’s easier to add html. Let’s surround the whole content part with a...
<div>
And we can give it a class “well”. This is a ready-to-use Bootstrap class which is supported by the template we are using.
<p>{articles category="Animals" separator="<hr>"}<p>
<div class="well">
...
<div>
{/articles}
Now that’s looking awesome. But as you can see now, we don’t really need that horizontal line anymore.
So let’s remove that separator.
That’s looking good.
Limit and Ordering
By default Articles Anywhere will show *all* articles matching the given Filters. So, if we had 50 articles in the Animals category, it will show all of them.
But we may only want to show the latest 3. Well, good news, we can define the number of Articles we want to display. And we can also define the ordering in which the articles are displayed.
We do so with the limit and ordering attributes.
For example, to only show the latest 3 Animals published, ordered by date, we set the limit to “3", and ordering to “publish_up DESC". publish_up corresponds with the field name of the Article Publishing Date, and DESC means in descending order.
{articles category="Animals" limit="3" ordering="publish_up DESC"}
...
Let’s refresh the page. We now only have 3 Articles displayed, and they are ordered by the publishing date. The “Pigs" Article is the first one on top, because is the most recent one that we Published.
You can order articles by anything you want: alphabetically, by date as we’ve just seen, by number of views, or even in a random order. You can find all the possible Ordering options in the documentation.
Images (+ quick ref. to Videos)
Another feature of Articles Anywhere Pro is the ability to place images attached to the article.
That means that not only you can place the Intro Image or Fulltext Image, but you can also output images that are placed inside the content of the article's text.
For example, if we add this [image-1] tag (the 1 referring to the first image in the article, so you can chose 2nd, or 3rd with a 2 or a 3, etc) the first image from each article will appear on the page.
{articles category="Animals"}
[link][title][/link]
[image-1]
[introtext]
[readmore]
{/articles}
That works, but notice how the images are output the same size as they are in the full article. In this case that makes a mess of the layout. No problem!
Articles Anywhere has the ability to automatically create resized images. We can specify the width or the height, and the image will be resized maintaining its aspect ratio. Let’s try a width of 300 pixels.
...
[image-1 width="300"]
...
That’s better, but maybe a lesser width would look even better. And if we also add the height, the image will be cropped to fill the specified dimensions. Let’s make the image a square, with both width and height at 150 pixels.
...
[image-1 width="150" height="150"]
...
Much better!
This is just the beginning of what you can do with images in Articles Anywhere Pro. There are a great amount of possibilities that allows you full freedom on which Images to display and how to display them.
Beyond just images, you can also place Youtube and Vimeo videos that are embedded inside your article! The sky is the limit.
We will discuss and play with all the features regarding Images and Videos in separate video tutorials.
If Structures
Articles Anywhere supports IF statements. That means we can show or hide content based on special conditions.
For example, say that some of the Animals articles have an Intro Image assigned to them, some don’t. If an article has an Intro Image, we want to use that in the overview we are creating. But if it doesn’t, it should fall back on the first image found in the article content as we defined earlier.
We can do that with {if} tags.
Let's start by wrapping our image in {if} tags
...
{if}[image-1 width="150" height="150"]{/if}
...
Now inside this {if} tag we need to place the condition.
In this case, if an Image Intro exists for an article, we want to show that ([image-intro]) Else (so if there is no Image Intro assigned to an article), we want to fallback to showing the first image of the article as we defined earlier.
...
{if image-intro}[image-intro width="150" height="150"]{else}[image-1 width="150" height="150"]{/if}
...
You can also conditionally output html, content, or data based on the dynamic values. Like the number of the article in the list. Or if it is an 'even' or 'uneven' article in the displayed results.
For example, we can align the image on the right if it’s an ‘even’ article, or on the left if it’s an ‘uneven’ article. The ‘image-left’ and ‘-right’ classes we use here are classnames I prepared earlier and because they align the image, making the introtext wrap around the image, I'll move this on to it's own line so everything is easier to see.
...
{if even}[image-1 width="150" height="150" class="img-right"]{else}[image-1 width="150" height="150" class="img-left"]{/if}
...
And just because we can, let’s add a nice ready-to-use bootstrap class to both:
...
{if even}[image-1 width="140" class="img-right img-rounded"]{else}[image-1 width="140" class="img-left img-rounded"]{/if}
…
Articles Anywhere Pro supports a whole range of different If Structures conditions, which we’ll get into in a separate video.
Other Filter Types
Up until now we have told Articles Anywhere to output all articles in a particular category: Animals.
But you can also use a lot of other filters to determine which articles you want to show, and you can even combine multiple filters.
For instance, let’s say we only want to display animals that have the tag “rodent". To do this we simply add a filter to the opening “articles" tag.
{articles category="Animals" tags="rodent"}
...
When we refresh the page - there are all the articles from the Animals category with a rodent tag.
We can also use wildcards in filters. For instance, if we wanted to display only articles whose title or alias contains with the letter “d", we could use this filter:
articles equals d and then asterisk or star (meaning anything)
{articles articles="d*"}
...
Refresh the page and there you have it!
Or, if we only want to show articles with the word “pig” in it, we could use this filter:
articles equals asterisk, pigs, asterisk.
{articles articles="*pigs*"}
...
Refresh the page and there you have them!
There are a bunch of other filters that you can use to display articles. You can input a comma-separated list of articles, or also filter by Authors, or Date Ranges, or even Custom Fields, and much more.
We’ll dig into more filtering options in another video.
And more…
Now this is all just a taste of what you can do with Articles Anywhere Pro. There are a lot of other features, like using custom fields, customizing data, overriding settings, combining Articles Anywhere with other extensions, etc. You can find a lot of this explained in the Articles Anywhere tutorial. We will also go more in depth into these topics in other video tutorials.
Recap
So just to recap.
We have seen how easy it is to place specific data of all articles in a certain category. And we have seen we can use all sorts of other filters, like tags and custom field values.
We have seen how to place article images, how to resize them, and we have also learned how to conditionally show stuff using the IF tags.
There are a lot more advanced features to explore in Articles Anywhere. Head over to the tutorial to find more treasures. 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 Articles Anywhere works.