Give flexible fields slug IDs automatically.

• aaronrobb

• May 3, 2022 at 9:06 pm

I’m working with some sites that have 20-40 flexible field ‘components’.

I’d like to be able to give each of those components an automatic ID in the frontend based on the field slug, and potentially show it in the page editor as well.

Anyone familiar with CraftCMS will know that fields in that CMS can show the field slug for each copying.

See: https://www.awesomescreenshot.com/image/26627352?key=ce87b07d3a1af549da2904b5f15297db

The goal is to use this for in-page anchors for links.

So for example if I create a Flexible field with a layout with the label ‘Secondary Headline’ and a name “secondary_headline”, I want to be able to see that name/ID in the backend editor so if a page admin is creating an in-page link, they know what to use as an anchor. I also want to be able to just code a set field or php command for every component that will automatically get that ID (to ensure there is no difference from what the editor area shows and what the coded ID is.

So with the above example, my template code may be something like:

<section class="someclass" id="THIS_FLEX_FIELD_SLUG">

Does this at all make sense? Any ideas where to start to look for or build this??

The hardest part will be the editor area….is it possible to modify the field group/layouts to add in some code to show the layout name??

Thanks for any suggestions!

• John Huebner

• May 3, 2022 at 11:35 pm

Maybe this https://www.advancedcustomfields.com/resources/acf-fields-flexible_content-layout_title/

• aaronrobb

• May 4, 2022 at 12:39 pm

@hube2 Thanks for the reply.
Using that code, I’ve set this up:

add_filter(
    "acf/fields/flexible_content/layout_title",
    function ($title, $field, $layout, $i) {
        $fieldId = $field["id"];
        return $title_value
            ? "<strong>$title</strong> - <small>#$fieldId</small>"
            : "<small>$title</small>";
    },
    10,
    4,
);

which shows the field ID (ie: field_61a5392dc9480) in the title bar, which is great.

I’m wondering if there is a way to not have the whole field collapse when clicking on the title bar? I’d like to be able to allow the admin to click/double-click on that field ID to copy it, but clicking it just collapses the field.

Also, found an issue where when you collapse and reopen the field group it erases the new title – like it is there til you collapse then it disappears. I read some forum posts asking how to fix this and I didn’t find anything that worked. Is this possible to fix? Maybe its an ajax issue?

• aaronrobb

• May 4, 2022 at 12:57 pm

Correction, the $fieldId = $field["id"]; code gives the code of the main flexible field….How would I get the ‘id’ of each layout?

• John Huebner

• May 4, 2022 at 1:25 pm

you can use get_sub_field() inside the filter.

Layouts do not have “IDs” built into ACF. If you want an ID then you need to build a field for that.

I do the same thing. I have a field in layouts that I make read only. I auto generate the value for these fields. The field is always named the same. This allows the client to copy and paste the ID from that field. It also allows me to auto generate links and navigation based on the field. Actually what I have a field group with layout settings that I clone into every layout. It consists of all of the common settings for every flex layout added.