How to add custom HTML on user profile page in Drupal 8?

Question

When a user logs in, it takes them to their /user page. This page usually has the default text on it: Member for X months. But nothing else.

You can manage this display here: admin/config/people/accounts/display

The problem is, it's not very obvious how to add more information on this page. I preferred editing the user-profile template directly, but that doesn't seem to be used on Drupal 8 anymore.

The type of things I want to add:

• An icon menu to links to different aspects of the user's account (e.g. Invoices, Orders, Edit Account, My Points etc)
• Random blocks of text for things like: "X invoices due", "X time until next game starts" etc
• Account information obtained from an external API (Username, password, address, total orders etc)

I was going to make a "drupal block" and just show that on all /user paths, but I don't think I'm using the page properly.

1. Is there a way I should be adding fields that can be used to display this information? (So that I can manage it from admin/config/people/accounts/display)
2. Is there perhaps a user-profile template I can override

Keep in mind, whatever is used, one user muust never get access to another users profile. It will only be used as the landing page for a logged in user, so that user and that user only, can see the details on their account.

UPDATE

I see that you can override user.html.twig, but this means no PHP in the file (which of course is not a good way to do it anyway). So how do I get PHP logic onto that template?

Answer 1

First thing: you can override user profile template. make a template named user--profile.html.twig in yourtheme/templates/ dir. In this file you can find user entity in {{ var_dump(user) }}. you can render info as you want.

Second thing: If you want extra variables on user profile. you can attach those variables to user in hook_user_load(). In this hook you can write all your logic, you can attach your block from here. and access those as {{ user.your_variable }} in twig.

As we can not write php code in twig, we need to attach everything to thing from our hooks, module_functions, controllers to twig. and this is very good practice.

Answer 2

I have adopted the above suggestion by @Monal Sof but it doesn't work in my case and also i have copied user.html.twig file (from user module) under MYTHEME/templates/user/user.html.twig to define my custom code but it was showing on all the node pages.

So i have used hook_theme_suggestions_HOOK_alter() in MYTHEME.theme file to define my custom template for user profile.

Here is the steps which i have followed:

 /**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MYTHEME_theme_suggestions_user_alter(array &$suggestions, array $variables) {
  $request = \Drupal::routeMatch()->getRouteObject();
  $path_args = explode('/', $request->getPath());
  if (\Drupal::currentUser()->isAuthenticated() && in_array('user', $path_args)) {
    $suggestions[] = 'user__profile';
  }
}

After this i have put my custom template under MYTHEME/templates/user/user--profile.html.twig and clear the cache.

Answer 3

There is a module that helps with this template suggestion and more others: https://www.drupal.org/project/twigsuggest