ACF user field array subfield

Hi,

I cannot find informations about the ACF user field in L&L documentation.
Do you know how I can do this with L&L ?

[array user_customfield ][field display_name][/array]

Note : “user_customfield” is my ACF user custom field name.

Thanks a lot

Is ACF User supported by L&L…?

At least, <Field user_customfield /> returns the user ID, but how to access the user’s data?

It looks like we don’t explicitly support the ACF user field yet, but if Emmanuel is correct that <Field user_customfield /> outputs the user ID (you might need to set the field return output to User Object in your ACF field group setup), it can then be passed to a user loop to get a user’s data:

<If field=user_customfield>
  <Loop type=user id="{Field user_customfield}">
    <Field display_name />
  </Loop>
</If>

OK, this is the way I manage it as well. It works indeed but it would be better to use the specific user ACF field.

Wow clever, it works for me too.
Thanks for sharing @julia!

The ACF User field type is now supported and documented here.

<Loop acf_user=field_name>
  <Field display_name />
</Loop>
2 Likes

Great, thanks a lot !

1 Like

@eliot I am using a user loop and I have ACF fields on the users. Text fields are working, but as you can see below, I have a custom field for headshot, and even though the ACF field is set to return image url, it will only return the image ID. So I’m getting this on the frontend:

<img src="18986">

Here is my loop:

<Loop acf_user=resource_user>
  <div class="speaker aiq-speaker">
    <img src="{Field author_headshot /}">
    <div class="speaker-info">
      <div><Field full_name /></div>
      <Field position-title />
    </div>
  </div>
</Loop>

And here you can see my ACF settings:

Hey @zack, that’s a great question and it’s one that I had to ask the team myself a few weeks back so I figured I’d chime in to share what I learned.

The way WordPress works is that when you upload an image to a custom field you’ve created, you’re not actually adding an image directly to that field. Instead, you’re creating a new “attachment” post (attachments are a unique default WordPress post type just like pages and posts) and you’re then telling WordPress “hey, this user as an attachment post associated with it and you can find that attachment using this post ID.” That’s why when you use the Field author_headshot tag to try to grab the image, all you’re getting is the ID of that attachment.

The way to get your image is pretty simple, it just requires creating another loop to tell WordPress to go grab the actual image URL that’s associated with a given attachment post ID. In practice, that would just look like this where you’re creating an attachment based on the post ID and then getting any of the fields available in an attachment loop, in your case probably url:

<Loop acf_user=resource_user>
  <div class="speaker aiq-speaker">
    <Loop type=attachment id="{Field author_headshot}">
      <img src="{Field url}" />
    </Loop>
    <div class="speaker-info">
      <div><Field full_name /></div>
      <Field position-title />
    </div>
  </div>
</Loop>

Now you may be asking yourself (as I did): “why do I need a nested attachment loop to do this when normally I can just use tags like <Field image> to grab a post’s featured image directly without an attachment loop?” Well, it turns out that featured images are image arrays, which are saved differently than image attachments and therefore don’t require a separate search through the database to get the image.

I hope that’s helpful!

Oh and one last tiny tip: no need to add the closing / to your tags when they’re inside curly braces :slight_smile:

2 Likes

Thanks for the detailed explanation! :+1:t2: I appreciate it

2 Likes

Thank you @benjamin for explaining about the image field, and how the attachment loop is used to get fields from the image itself. Good info about the difference between featured image, which WordPress handles specially, and ACF image fields, which WordPress doesn’t know anything about and simply treats it as a number (the attachment ID).

For an ACF image field, this should also work:

<Loop acf_image=author_headshot>
  <img src="{Field url}" />
</Loop>

Oh, and the documentation shows a shortcut using only the Field tag.

<img src="{Field acf_image=author_headshot field=url}" />

This is useful for creating “one-off” loops to get a single field.

However, for images, it’s probably best to create a loop and get the URL as well as the image title for better accessibility.

<Loop acf_image=author_headshot>
  <img src="{Field url}" alt="{Field title}" />
</Loop>

The alt text may be used by screen readers and other assistive technologies to help differently-abled users make full use of your content. It will be read aloud or sent to the touch device, for example, to support visually impaired users.

MDN: HTMLImageElement.alt

2 Likes

Great. Thanks for the additional info on that!

One more follow up. I don’t see documentation on how to retrieve the “Biographical Info” field from the user?

I figured it out through trial. Found that it is stored as user_description so I tried <Field user_description /> and it worked haha :+1:t2:

Ah, you’re right - that user field is not listed in the documenation for the User loop type.

OK, I think it would be nice to add it as the field name description. The prefix user_ seems unnecessary, since we know it’s a user field.

@eliot I agree, that seems logical. Will description just be an alias of user_description then?

I do wonder if biography would be better though as that’s what it is called on the frontend…