The field provides an easy way to connect articles. It offers a dropdown input to select articles based on filters and create relationships between them. The result displayed on the front end is a list of hyperlinked articles.
You can determine which articles show up in the dropdown input by optionally filtering them by categories. The Pro version allows you also to filter the list of articles by tags and authors.
How to add an Articles Custom Field to Joomla! Articles
With different layout options, sorting options, and filtering capabilities, ACF - Articles gives you complete control over how related articles are displayed and organized on your website. So, if you're looking for a flexible and versatile way to manage relationships between articles, ACF - Articles is the ideal choice.
Let's see each field settings.
| Name | Description |
|---|---|
| Input Options | |
| Minimum Articles | Sets a limit on the minimum articles that can be selected. |
| Maxmimum Articles | Sets a limit on the maximum articles that can be selected. |
| Order | Select how the articles will be ordered. |
| Input Filters | |
| By Category | Set whether to filter the articles by categories, select the categories, and also set whether to include child items. Select either No to not select child categories, Yes to also select child categories or Only to only select child categories. |
| By Tag | Set whether to filter the articles by tags, and select the tags. |
| By Author | Set whether to filter the articles by authors, and select the authors. |
| Layout | |
| Layout | Select which layout to use to display the selected articles. Available layouts:
|
| Columns | Set the columns for styles Style A and Style B. |
| Gap | Set the gap between articles for styles Style A and Style B. |
| Custom Layout |
Enter the custom layout for each article item. You can enter any HTML code and Smart Tags you desire. You may use the {acf.article.KEY} Smart Tag to get any article data. Below you can find some more widely used properties:
Apart from the above Smart Tags, you may also use the Smart Tag article.KEY} to fetch data from the current article that the field appears in. The data you can retrieve are similar to the above apart from the index and total keys. |
Usage
Once you are in your Article's Edit screen, choose the "Fields" Tab to see the Articles custom field as you can see in the screenshot below.
You can now select the articles that you'd like to connect with this article and display them.
Frontend Display
Take a look at the screenshot below to see how it could be displayed in your frontend.
List Layout
Displays all selected articles in a list.
Style A Layout
Displays all selected articles in a customized grid by including the article image and title.
Style B Layout
Displays all selected articles in a customized grid by including the article image, title and an excerpt of the article.
Custom Layout
Displays all selected articles based on custom HTML code.
Example custom layout:
<div style="background: #f5f5f5; padding: 20px; border-radius: 4px; margin-bottom: 10px;">
<div>
<img src="/{acf.article.images.image_intro}" />
</div>
<h3>
<a href="/{acf.article.link}" class="display: block; margin-top: 5px; text-decoration: none;">{acf.article.title}</a>
</h3>
<p>
{acf.article.introtext}...
</p>
<a href="/{acf.article.link}" class="btn btn-primary">Read more</a>
</div>
