Article fields layout

Question

I am using Joomla 4 with casseiopa template.

I have created a load of custom fields where the layout ends up like this:

<ul class="fields-container">
  <li class="field-entry image-3 img1"><span class="field-value "><img src="/images/1.jpg" alt="" width="2000" height="1331" loading="lazy"></span></li>
  <li class="field-entry image-4 img2"><span class="field-value "><img src="/images/2.jpg" alt="" width="2000" height="1331" loading="lazy"></span></li>
  <li class="field-entry image-4 img3"><span class="field-value "><img src="/images/3.jpg" alt="" width="2000" height="1331" loading="lazy"></span></li>
  <li class="field-entry image-4 img4"><span class="field-value "><img src="/images/4.jpg" alt="" width="2000" height="1331" loading="lazy"></span></li>
</ul>

How do you change the layout for this?

Ideally I need to itroduce rows and columns so this ends up a 2 X 2 image grid.

Answer 1

You would do a Joomla template override - there are plenty of videos and tutorials on this, but post a comment if you get stuck.

The file to override is in components/com_fields/layouts/fields/render.php. I've a Windows PC so I generally use the notepad++ facility "Find in Files" to search the joomla instance for an appropriate string; in this instance I used "fields-container". Or on linux-based computers you can use eg grep. This is an easy way to find what file you need to override.

So once you've clicked on Cassiopeia Details and File, go to the Create Overrides tab, and then click in the right-hand Layouts panel on com_fields, then fields.

This will copy the layout file render.php into your templates/cassiopeia folder structure, and you can then edit it via the Editor tab, by expanding the file structure down through templates/cassiopeia, /html, /layouts, /com_fields etc.

Just a note of warning though: this template override will affect where you have custom fields in any component - not just com_content. If you didn't want to affect other component's custom fields output then you'd have to put code in your override to check for that, eg by using the Joomla Input functionality and checking the option parameter.