Positioning the User's Profile Picture on the Manage Display Screen
It's been a while since I've had time to share my Drupal experiences with the community. New additions to the family, moving, and a large / length Drupal project have taken up my time. Hopefully things are easing up a bit and I'll be back to sharing.
Have you ever noticed that not all elements rendered on the user account page are visible on the user account -> manage display configuration page?
The project I'm currently working on utilizes panels and in more than one situation we want the ability to insert the user entity as a pane. When we insert the user entity we want to be able to choose a specific view mode that's configured with the fields we want displayed. Let me walk through this in more detail.
Our user account contains the following fields:
- First Name
- Last Name
- Address
- Telephone
- etc...
When viewing a user's account page, if / how the fields are displayed are controlled through the Administration » Configuration » People » Account settings » Manage Display tab. We can re-order the fields, hide the fields, etc. One user account element that is missing is the User's profile picture.
Note: the screenshot was taken before the additional user account fields were added.
Let's say that you want to hide the profile picture on the user account page or provide new view modes that display / hide the profile picture. Here's how we can easily go about doing that.
Extra Fields: User Picture
I'm assuming that you're familiar with creating a custom module.
In our EXAMPLE.module file we're going to add a single call to hook_field_extra_fields() as follows.
/**
* Implements hook_field_extra_fields()
*/
function EXAMPLE_field_extra_fields() {
$extra = array();
$extra['user']['user'] = array(
'display' => array(
'user_picture' => array(
'label' => t('User Picture from Core'),
'weight' => -5,
'description' => t('This can be anything. I have not seen where this is rendered.'),
),
),
);
return $extra;
}
Ok, so what did we do there?
- hook_field_extra_fields() let's us add pseudo-fields to the entity. We could have provided a form option as well, but in this situation we're only concerned with the display of an existing element.
- $extra['user']['user'] is the User bundle of the User entity, both provided by Drupal core.
- 'display' says that we're dealing with the display (manage display).
- 'user_picture' is the identifier for the actual User Picture uploaded on the user account page
- 'label' is the text that is shown on the Manage Display tab. Depending on how the element is themed, it's possible this would show up on the rendered user account page
- 'weight' is the default / initial weight of the element compared to the other elements. This value will change as you re-order elements on the manage display screen.
Save the module, clear your caches, and refresh your manage display configuration screen and you should see "User Picture from Core" as an element you can re-order.
You can also hide the picture from rendering on the user account page. While that's probably not something most will do, let's see how this might be useful with other view modes.
View Mode: Author Bio
If you're not familiar with view modes, you probably just aren't recognizing the term. If you look at a node's manage display screen you'll notice 'Default' and 'Teaser'.
Here are some other blog posts that describe view modes.
The user account only comes with one view mode by default. Back to my original situation, I will be inserting the user entity as a pane in a panel but I don't want to display all of the fields that typically render on the user account page. So what we're going to do is create a new view mode for the user entity.
Back to our EXAMPLE.module we're going to add a single function hook_entity_info_alter().
/**
* Implements hook_entity_info_alter()
*/
function EXAMPLE_entity_info_alter(&$entity_info) {
$entity_info['user']['view_modes'] += array(
'author_bio' => array(
'label' => t('Author Bio'),
'custom settings' => TRUE,
),
);
}
Ok, let's look at what's going on.
- $entity_info is passed in by reference so we're directly altering this variable.
- $entity_info['user']['view_modes'] += is adding to the existing view modes for the user entity.
- 'author_bio' is the machine name for the new view mode.
- 'label' is the text displayed on the Manage Display screen for the new view mode.
- 'custom settings' is the default setting to say whether we want to configure the fields differently from the default view mode. This value can be changed on a per-bundle bases.
Save the module, clear your caches, and refresh the manage display page and you should see a new View Mode. It will most likely have all of the fields setup the same as the default view mode.
I'm now able to display the user profile picture and first / last name fields. When I insert the user entity as a pane and choose the 'Author Bio' view mode, it will render only those fields in the order I've set them. I can now use CSS to position them accordingly.