feat: serve admin avatars through the picture helper

admin/views/_components/structure/header.php

@@ -1,6 +1,8 @@
 <?php
 
 use Nails\Admin\Constants;
+use Nails\Cdn\Helper\Picture;
+use Nails\Cdn\Resource\CdnObject;
 use Nails\Common\Service;
 use Nails\Config;
 use Nails\Environment;
@@ -132,9 +134,31 @@ class="btn btn-brand-primary u-md-mr5 u-mr15"
                 </a>
             </div>
             <div class="topbar__account">
-                <div class="topbar__avatar"
-                     style="background-image: url('<?=cdnAvatar(activeUser('id'))?>')"
-                ></div>
+                <?php
+
+                $mProfileImg = activeUser('profile_img');
+                $sAvatarAlt  = htmlspecialchars((string) activeUser('name'), ENT_QUOTES, 'UTF-8');
+
+                //  Picture only applies to a CDN object. 200px is the 2x crop
+                //  of the 100px avatar, already a permitted dimension.
+                if ($mProfileImg) {
+                    $mCdnObject = $mProfileImg instanceof CdnObject
+                        ? $mProfileImg
+                        : (int) (is_object($mProfileImg) ? $mProfileImg->id : $mProfileImg);
+
+                    echo (new Picture($mCdnObject, 100, 100, $sAvatarAlt, null, [
+                        'class' => 'topbar__avatar',
+                    ]))->source(200, 200, null, 2);
+
+                } else {
+                    echo img([
+                        'src'   => (string) cdnBlankAvatar(100, 100, (string) activeUser('gender')),
+                        'alt'   => $sAvatarAlt,
+                        'class' => 'topbar__avatar',
+                    ]);
+                }
+
+                ?>
                 <h3 class="topbar__name heading--sm color--white bold  u-md-ml5 u-ml15 u-mb0 d-none d-md-inline">
                     <?=activeUser('name')?>
                 </h3>

admin/views/_components/table-cell-user.php

@@ -1,16 +1,29 @@
 <?php
 
+use Nails\Cdn\Helper\Picture;
+use Nails\Cdn\Resource\CdnObject;
+
 $sNoDataClass = isset($id) && $id ? '' : 'text-muted';
 
+$sName = !empty($first_name) ? $first_name . ' ' : '';
+$sName .= !empty($last_name) ? $last_name . ' ' : '';
+$sName = $sName ?: 'Unknown User';
+
 ?>
 <td class="user-cell <?=$sNoDataClass?>">
     <?php
 
-    //  Profile image
+    //  70px is the 2x crop. Picture requests it as its own CDN URL, so a
+    //  cached 35px file is never probed with an @2x suffix.
     if (isset($profile_img) && $profile_img) {
+        $mCdnObject = $profile_img instanceof CdnObject
+            ? $profile_img
+            : (int) (is_object($profile_img) ? $profile_img->id : $profile_img);
+
         echo anchor(
             cdnServe($profile_img),
-            img(cdnCrop($profile_img, 35, 35)),
+            (string) (new Picture($mCdnObject, 35, 35, htmlspecialchars($sName, ENT_QUOTES, 'UTF-8')))
+                ->source(70, 70, null, 2),
             'class="fancybox"'
         );
 
@@ -23,10 +36,6 @@
     <span class="user-data">
         <?php
 
-        $sName = !empty($first_name) ? $first_name . ' ' : '';
-        $sName .= !empty($last_name) ? $last_name . ' ' : '';
-        $sName = $sName ?: 'Unknown User';
-
         if (!empty($id) && userHasPermission(\Nails\Auth\Admin\Permission\Users\Edit::class)) {
             echo anchor(
                 \Nails\Auth\Admin\Controller\Accounts::url('edit/' . $id),

assets/sass/admin-ui/layouts/_topbar.scss

@@ -41,6 +41,11 @@
         padding: 0 14px;
         align-items: center;
 
+        picture {
+            display: flex;
+            flex-shrink: 0;
+        }
+
         //  Use a brand secondary style of button
         //.btn {
         //    border-radius: 10rem;
@@ -58,11 +63,11 @@
     &__avatar {
         width: 36px;
         height: 36px;
-        background-position: center;
+        object-fit: cover;
+        object-position: center;
         border: 4px solid rgb(var(--brand-color-highlight));
         border-radius: 100%;
         margin-left: 5px;
-        background-size: cover;
         flex-shrink: 0;
     }
 

composer.json

@@ -85,7 +85,8 @@
                 "nails/module-cdn": {
                     "permitted-image-dimensions": [
                         "30x30",
-                        "35x35"
+                        "35x35",
+                        "70x70"
                     ]
                 }
             }