Home / Advanced Custom Fields / Fields Types

ACF Articles - Connect Joomla articles to each other

The ACF Articles custom field is your go-to Joomla solution for effortlessly connecting and organizing articles on your website. Featuring two modes – Manual Selection and Automatic Discovery – this custom field offers flexible solutions to cater to your content relationship needs.

In Manual Selection mode, easily curate article connections by handpicking specific articles when editing an article, utilizing a straightforward dropdown interface for seamless association. On the other hand, Automatic Discovery mode takes a dynamic approach, generating a list of interconnected articles. It identifies related articles by checking if the current article is linked to other ACF Articles fields that use the Manual Selection option. Utilize various filtering options, such as categories, tags, authors, and status, to tailor your displayed articles.

TABLE OF CONTENTS

Requirements

To use the Articles field, there are a few requirements that must be met, listed below:

  • If you'd like to use the Automatic Discovery option, you must have the Pro version installed. You can easily upgrade to Pro if you're currently in the Free version

Setting up Articles Field

To start using the Articles Field, create a new custom field and select ACF - Articles.

ACF Articles Create Field

Once you have selected the ACF - Articles Field, you will be presented with all available options to configure the custom field.

General

Connection Options

Select how the articles will be displayed.

Manual Selection: Choose specific articles manually.

Automatically: Automatically identify related articles by checking if the current article is linked to other ACF Articles fields that use the Manual Selection option.
Note: By default, you must enable this custom field on each article. To automatically make all articles display the linked articles, set the Default Value to 1/true.

Order

Select how to order the items

Automatic Discovery

ACF - Articles fields

To automatically find articles, select at least one ACF - Articles field, and the current article must be linked to the selected ACF - Articles fields.

Limit Articles

Define how many linked articles to display. Enter 0 for no limit.

Input Options

Minimum Articles

Sets a limit on the minimum number of articles that can be selected.

Maximum Articles

Sets a limit on the maximum number of articles that can be selected.

Input/Output Filters

By Category

Set whether to filter the articles by category, select the categories, and 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

By Status

Set whether to filter the articles by their status, and select the status.

Layout

Layout

Select which layout to use to display the selected articles.

Available layouts:

  • List: Show the selected articles in a list.
  • Style A: Show the selected articles in a grid by displaying the article image and title.
  • Style B: Show the selected articles in a grid by displaying the article image and, next to it, the title and intro text.
  • Custom: Write HTML and use Smart Tags to display your desired articles.

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:

  • {acf.articles.index}: The index of the article.
  • {acf.articles.total}: The number of total articles to show.
  • {acf.article.field.KEY}: Display a custom field value. Where KEY is the custom field > Name value.
  • {acf.article.id}: The ID of the article.
  • {acf.article.title}: The title of the article.
  • {acf.article.alias}: The alias of the article.
  • {acf.article.link}: The link to the article.
  • {acf.article.introtext}: The intro text of the article.
  • {acf.article.fulltext}: The full text of the article.
  • {acf.article.created}: The created date of the article.
  • {acf.article.modified}: The date the article was last modified.
  • {acf.article.images.image_intro}: The intro image of the article.
  • {acf.article.images.image_fulltext}: The full image of the article.

You may also use the Smart Tag {article.KEY} besides the above Smart Tags 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.

This setting also supports Smart Tags, which allows you to define a dynamic approach to storing the uploaded files, such as using dates, current item (article, contact, user, etc...) information, and more! You can read more here: Using Smart Tags in Tassos Extensions

Conditional Logic

{loadmoduleid 199}

Use Cases

The Articles Field can be used with any component that supports the Joomla! Fields such as the Articles (com_content), User (com_user), and the Contact (com_contact) component. Now that we've seen how to create an ACF - Articles custom field, let's see a few use cases.

How to add a Manual Articles Custom Field to Joomla! Articles

In this use case, we have a scenario where we already have a list of actors and movies and are interested in creating a movie directory site. So, we want to link each actor to the movie they have acted on. After we select the actor for each movie, we expect to see a list of actors appearing on each movie article page.

Step 1: Create a new Articles Field

Go to Content -> Fields, click New to create a new field. From the Type dropdown, select the ACF - Articles option.

Set the title of the custom field to Actors.

acf articles field manual step 1

Click to save the field to return to the same page where, now, you can see a few new setting groups.

Step 2: Set how to connect the articles

Next, we want to set the ACF Articles custom field to let us choose the actors that will be linked on each movie, so under Connection Options, we select the Manual Selection option.

acf articles field manual step 2

Step 3: Filter results

On this group, called Input Filters, we want to grab only the actors, so we select the Actors category. This helps us narrow down the available options in the dropdown, which we will use to select each actor, and not having to include unneeded articles.

acf articles field manual step 3

Save the field and proceed to the next step.

Step 4: Select the actors

Once our custom field is ready, it's time to head back to our Movies articles, and select the actors for each of our movies.

So, head into each movie article editing page and select the actors for each movie.

acf articles field manual step 4

In case the field is displayed disabled in the form and you're not allowed to upload files, you probably don't have the right permissions to edit the content of the field. To fix it, you must set the Edit Custom Field Value option to Allowed in the Permissions tab in the Field settings as well as in the Users component configuration page.

Step 5: View the selected actors

The last step is, once you have selected the actors, to save the article, and see all selected actors:

acf articles field manual step 5

How to add an Automatic Articles Custom Field to Joomla! Articles

In this use case, we also have a scenario with some movies and actors we'd like to link. Let's assume that we have selected each actor in each movie so that when we view each movie article, we see a list of actors, letting us know who has played in each movie. The focus of this use case will let us view all the movies each actor has played in. Note that this use case requires the previous use case to be set up. Click here to follow that guide first.

Step 1: Create a new Articles custom field

Go to Content -> Fields, click New to create a new field. From the Type dropdown, select the ACF - Articles option.

Set the title of the custom field to Movies Played.

acf articles field auto step 1

Click to save the field to return to the same page where, now, you can see a few new setting groups.

Step 2: Set how to connect the articles

Next, we want to set the ACF Articles custom field to let us automatically display all movies when viewing an actor article page, so we select the Automatic Discovery option under Connection Options.

acf articles field auto step 2

Step 3: Set Automatic Discovery

Now, we must define which ACF Articles will be used when identifying the related articles. To find a related article, we check if the current article is linked to other ACF Articles fields that use the Manual Selection option.

Select the Actors ACF Articles custom field we created earlier under ACF - Articles fields.

acf articles field auto step 3

Save the field and proceed to the next step.

Step 4: Enable the automatic articles field

Go into an actor article and enable the Movies Played ACF Articles custom field. This will now automatically display any articles linking to the current article.

acf articles field auto step 4

To automatically enable this for all actors, instead of manually enabling it on each actor article, you just need to go into the Movies Played ACF Articles custom field > Default Value and set it to either 1 or true.

In case the field is displayed disabled in the form and you're not allowed to upload files, you probably don't have the right permissions to edit the content of the field. To fix it, you must set the Edit Custom Field Value option to Allowed in the Permissions tab in the Field settings as well as in the Users component configuration page.

Step 5: View the automatically linked actors

The last step, once you have enabled the toggle, is to save the article and see all linked movies of the actor:

acf articles field auto step 5

Layouts

The ACF - Articles custom field provides different pre-made layouts. Below, you can see a preview of each layout.

List Layout

Displays all selected articles in a list.

acf articles field list layout

Style A Layout

Displays all selected articles in a customized grid by including the article image and title.

acf articles field style a layout

Style B Layout

Displays all selected articles in a customized grid by including the article image, title, and excerpt.

acf articles field style b layout

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>

acf articles field custom layout

To-do list

Advanced Custom Fields is regularly updated with new features and bug fixes. The roadmap is quite packed with new features, and enhancements. Find out the upcoming new features by visiting the Roadmap page.

FAQ

How do custom fields appear in Smart Tags?

While you can use the {article.field.KEY} Smart tag to get any custom field value within your custom layout; it will only return the raw value, not the prepared value. By raw value, we mean the value stored in the database; by prepared value, we mean the final HTML code.

{loadmoduleid 200}

Last updated on Oct 29th 2024 14:10