How to expose the user's email on the user's detail page?

Question

Currently in the manage display page there is no way to display the email field in the manage display page. How do you expose this in Drupal 8 contacts details page?

There can be a work around for this as in user template or views-block rendering on profile page.

Answer 1

Simply with no code required use Show Email Address

Answer 2

By default the mail field is not configurable in view modes.

You can change this in a custom module. Place this hook in mymodule.module

function mymodule_entity_base_field_info_alter(&$fields, $entity_type) {
  if ($entity_type->id() == 'user') {
    if (isset($fields['mail'])) {
      $fields['mail']->setDisplayConfigurable('view', TRUE);
    }
  }
}

and you'll find the mail field in the Manage Display page.

Answer 3

There is not a direct way through "Manage Display" but a workaround through user.html.twig in your theme.

We get {{ user }} variable which can be accessed to get other values related to the user.

Code -

`

<div class="col-sm-12">
      <header>
        <h2> My Profile </h2>
      </header>
      <div class="row">
        <div class="col-sm-8">
           <h4>About Me</h4>
           <ul class="profile-list">
              <li> Email:&nbsp;&nbsp;{{ user.mail.value }}  </li>
              <li> Name:&nbsp;&nbsp;{{ user.name.value }}  </li>
           </ul>
        </div>
      </div>
</div>

`

Answer 4

I assume the reason this wasn't added was to encourage use of the Contact form instead (given email addresses are hidden, there's flood protection and you can allow users to enable/disable it). However, clearly there are reasons for it being convenient to see the actual address.

(Do take time to check your permissions for user profile pages though, so you're not exposing people to spam.)

Here's a modified user.html.twig, using classy as the base theme, with clickable address and a translatable string for the label:

<article{{ attributes.addClass('profile') }}>
  {% if content %}
    <div class="field field--name-email field--label-above">
        <div class="field__label">{% trans %}Email{% endtrans %}</div>
        <div class="field__item"><a href="mailto:{{ user.mail.value }}">{{ user.mail.value }}</a></div>
    </div>
    {{- content -}}
  {% endif %}
</article>