Creating a carousel
JUG London (UK) | 2021.12.21
present slides https://slides.woluweb.be
Build anything (like a carousel) with only 1 Custom Field
Joomla 3 came with an interesting Repeatable Custom Field (CF) but it was rather limited as only simple fields like Text or Integers were allowed.
Joomla 4 has completely revamped the concept of Custom Field of type “Repeatable”, which is now called Custom Field of type “Subform”.
Now you can select any type of Custom Field within your “Subform”, ie any native CF but also any 3rd party CF. This means for instance that you can even use videos (YouTube, Vimeo, …), maps, related articles etc
You will find the detailed version on
and the code examples on
On the General Tab: note the new switch called Only Use In Subform
Note: when editing an Article having CF of type Subform (front-end and back-end)
This is excellent news because otherwise it would not have been very comfortable for the user having to edit the values of those CF.
See the illustration on the next 2 screenshots with respectively 4 and 5 CF
Rename the newly created file by staying in that Joomla’s interface
> Tab Editor > html > layouts > com_fields > field
render.phpfile into something explicit. Examples:
carousel.phpor in this case
rawvalue.php. Note that dashes are allowed in the filename (but not underscores afaik)
Tab Options > Render Options > Layout. There you find a dropdown which lists all available Alternate Layouts. Select the newly created & renamed file
Available Alternate Layouts on https://github.com/woluweb/Custom-Field-of-Type-Subform
step4-my-carousel-article-and-blog-views-with-article-id.php, which requires also
For the detailed explanations, see the two corresponding Joomla Community Magazine articles.
One step beyond:
what about having Custom Fields…
…in the Smart Search Result Pages!
Speaking about J4, did you know that you can customize independently the layout for Articles, Contacts etc in the Smart Search Result Pages (
See in the Official Documentation how to achieve this:
The ready-to-use default_article.php can be found on https://github.com/bluecoderr/default_article/blob/main/html/com_finder/search/default_article.php
BTW: good new, Sakis made this a feature for J!4.1. So there will be an option to display the Images natively in the Smart Search Result Pages, without even the need for an override
So with the help of Alexandre ELISÉ (another “Super Joomler”) I could improve on that Tutorial to show how to add Custom Fields to the Smart Search Result Pages 🎉
At the beginning of the
/[template]/html/com_finder/search/default_article.php override (speaking here atm only about Articles), where
[template] is for example
use \Joomla\Component\Fields\Administrator\Helper\FieldsHelper; // makes the FieldsHelper available in our override $myCustomFields = FieldsHelper::getFields('com_content.article', $this->result); // create a variable which will contain all CF of the current article $myCustomFieldsById = \Joomla\Utilities\ArrayHelper::pivot($myCustomFields, 'id'); // we use a pivot on id so that we can easily use the id to access every CF by its ID
and where you want to display the CF (having here ID 4) add
By default, it seems that it wil displays the rawvalue, even if you type
->value instead of
If you want to select any of your Alternate Layouts (like my-carousel-article-and-blog-views.php), simply replace the last line above by the following:
echo FieldsHelper::render('com_content.article', 'field.my-carousel-article-and-blog-views', ['field' => $myCustomFieldsById]);
See the result on the animated gif hereafter: even our Carousel is now directly displayed on the Smart Search Result Pages!
Beware if you force a given Alternate Layout as shown on the previous slide (at least if you need a unique ID for the Container)!
You should pick up the appropriate Alternate Layout
Above we showed several possible Alternate Layouts when having several Carousels on the same page:
Alexandre ELISÉ is also always very inspired regarding Custom Fields.
Look at what he sent me yesterday:
JUG London for having me today
So many members of the Joomla Community for being #jPositive
Any suggestion about this presentation?
Please feel free to contact me. I’ll be happy to keep improving it 🙂