What we have learned so far controls the output of the linked articles on the article page.

But what if you are also outputting this Articles Field somewhere else in your site through Articles Anywhere, and you would like to display it with a different layout there?

In this tutorial, you will learn how to create and use an alternate Custom HTML Layout for Articles Field when displaying it with Articles Anywhere in Joomla 4.

Introduction

As you may know, with Articles Anywhere (another Regular Labs extension), you can insert any Joomla articles data anywhere on your site.

And with the Pro version of Articles Anywhere, you can display any Joomla! Custom Field of an article using the name of that specific field. Let's say you want to show the value of the custom field "Speaker" - which has a field name speaker - of article "Conference". You can simply do:

{article Conference}
[speaker]
{/article}

When displaying a field of type Articles Field, Articles Anywhere will correctly use the Output and Layout you have defined for the field.

But what if you would like to output an Articles Field with a different/alternate layout when displaying it through Articles Anywhere?

Well, Articles Anywhere does allow you to customize the output of a custom field. So yes, this can also be done for fields of type Articles Field!

Overriding the Custom HTML

Since Articles Anywhere for Joomla 4 now supports the ability to override field attributes inside the data tag, this means that you no longer need to create an alternate PHP layout for Articles Fields like you had to do in Joomla 3.

Articles Anywhere for Joomla 4 makes this much easier. What you can do instead, is simply override the custom_html parameter to pass another Custom HTML Layout to the field. 

So if you have an Articles Field called [speaker], you can simply override the Custom HTML Layout set in the field parameters by doing:

[speaker custom_html="<a href='[url]'>[title]</a>"]

And yes, you can use any of the data available for the Articles Field Layout, along with any Custom HTML you want. The only thing you have to be careful of, is the editor not messing up your syntax. So you may need to use single quotes instead of double quotes, but that's just fine as well.

You can even add/override separators between the articles returned by Articles Field, if you desire:

[speaker separator=", " last-separator=" and " custom_html="<a href='[url]'>[title]</a>"]

For a complete overview of all the features included in Articles Field, head over to the full Documentation, and check out the Video Tutorials.