How to create an alternative layout for Advanced Custom Fields

Advanced Custom Fields provides some widget-based custom fields, meaning they are extendable, and you can easily create layout overrides for them. Advanced Custom Fields provides a similar approach in overriding the layout for these custom fields as seen in core Joomla custom fields.

Which are the widget-based custom fields?

The widget-based custom fields are:

• ACF - Address Autocomplete
• ACF - Countdown
• ACF - FAQ
• ACF - Gallery
• ACF - Map

Why create another Layout override option?

While Joomla provides a Layout override option within each custom field > Options > Layout, it asks why we created a similar setting.

The main issues with the Joomla Layout setting are:

• Problem #1: By overriding the render.php layout, you get access to the custom field's final HTML, which is not friendly if you want to make adjustments.

  Our solution: You get access to every available variable, and you can fine-tune all custom field parameters.

• Problem #2: You are required to make replacements in the HTML to customize the custom field.

  Our solution: You don't need to perform HTML replacements. You may customize the final HTML and create new unique designs.

• Problem #3: The render.php file contains the whole control group. This includes not only the field value but also the field label. This adds unnecessary complexity since we only want to customize the custom field layout.

  Our solution: Our widget-based fields gives you access to just the value so you can focus on building your custom fields.

How to create a layout override for Advanced Custom Fields?

Step 1 - Locate the Custom Field Layouts: You can find the Advanced Custom Fields layouts in

/plugins/system/nrframework/layouts/widgets/NAME/default.php

where NAME is the name of the field you want to override.

Assuming you are interested in overriding the "ACF - Gallery" custom field, you should look into

/plugins/system/nrframework/layouts/widgets/gallery/default.php

. Keep the gallery name as you will use it in the next step.

Step 2 - Create the Layout Override: To override a layout file, you will need to create the directory

/templates/YOUR_TEMPLATE/html/tassos/widgets/NAME/

where YOUR_TEMPLATE is the your template name, NAME is the field name (as per the previous step).

For example, to override the "ACF - Gallery" layout, we need to create the directory:

/templates/YOUR_TEMPLATE/html/tassos/widgets/gallery/

Step 3 - Copy the Layout File: From Step 1, copy the layout file named "default.php" into the directory you created in the previous step. You can rename the layout as you desire.

For example, to override the "ACF - Gallery" layout, you should copy the layout file "default.php" from

/plugins/system/nrframework/layouts/widgets/gallery/default.php

into

/templates/YOUR_TEMPLATE/html/tassos/widgets/gallery/layout1.php

Step 4 - Customize the Layout: You can now open the layout file you just copied and customize it to fit your needs. You can modify the HTML structure, load your own CSS, or enhance it with new functionality.

Step 5 - Select the new Layout: From within the custom field settings > ACF - Options tab > Layout, you will now be able to select the newly created layout file and hit "Save".

How to override Joomla Custom Fields layouts

If you want to override the Joomla custom fields, we have a detailed guide with all available ways to do so. You can read more here: How to create an alternative layout for Joomla Custom Fields