>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3174032. --> Reported by: [mamoschli](https://www.drupal.org/user/2482902) Related to !16 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The user picture displayed in the secondary toolbar at the top right is not properly cached. In fact it is cached in the same way as the sourrounding toolbar which is cached by user.permissions (<a href="https://git.drupalcode.org/project/gin/-/blob/8.x-3.0-alpha27/gin.theme#L83">https://git.drupalcode.org/project/gin/-/blob/8.x-3.0-alpha27/gin.theme#L83</a>). This results in the user picture being the same for users with the same set of permissions.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Install Drupal</li> <li>enable Gin theme</li> <li>allow authenticated users to access the backend or create a new role</li> <li>add 2 users (and add a the role if you created one)</li> <li>upload user pictures for both users</li> <li>clear the cache</li> <li>with settings set to defaults (all caches enabled) log in with user 1, log out and log in with user 2</li> </ol> <p>After doing so the user picture should be the same for user 2 because Drupal is using the cached toolbar from user 1.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>I've attached a patch where the user_picture is rendered using a lazy builder callback and a placeholder. That way we don't have to cache the toolbar for every user (which would be the easiest solution I guess, just setting the context to "user" instead of "user.permissions"). Unfortunately I had to replace the link and image markup with a render array in order to get this to work. These elements are now created inside the lazy builder callback using a render array.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>I don't like to have that much markup with classes inside render arrays so we might end up creating a template in hook_theme and using that to render the user picture inside the callback. If this is a welcome addition I can implement this a s well.</p> <h3 id="summary-ui-changes">User interface changes</h3> <p>There should be none ;)</p> <h3 id="summary-api-changes">API changes</h3> <p>None</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None</p>