Merge pull request #49 from Mazizova/people-initials-placeholder

Show initials placeholder for People without a photo

Author: Mazizova

assets/scss/_light-theme.scss

@@ -320,6 +320,17 @@
   .resource-single-img {
     border-color: #dde3ed;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+
+    &--placeholder {
+      background: #f1f5f9;
+      color: #0272a5;
+      box-shadow: none;
+    }
+  }
+
+  .resource-card-image--placeholder {
+    background: #f1f5f9;
+    color: #0272a5;
   }
 
   .resource-tag {

assets/scss/_resources.scss

@@ -428,6 +428,21 @@
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
     border-radius: 3px;
   }
+
+  &--placeholder {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $accent-glow;
+    color: $accent;
+    font-size: 2.25rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    box-shadow: none;
+  }
 }
 
 .resource-card-body {
@@ -1106,6 +1121,19 @@ body.sheet-open {
   border: 1px solid $dark-border;
   display: block;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+
+  &--placeholder {
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $accent-glow;
+    color: $accent;
+    font-size: 3rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    box-shadow: none;
+  }
 }
 
 .resource-csv-btn {

layouts/resources/list.html

@@ -261,7 +261,14 @@ <h1 class="resources-section-title">{{ .Title }}</h1>
             {{ range (index $page.Params $fp) }}{{ $chips = $chips | append (dict "value" . "path" $fp) }}{{ end }}
           {{ end }}
         {{ end }}
-        <div class="resource-card{{ if $images }} resource-card--has-image{{ end }}"
+        {{ $isPerson := in .Params.subcategories "People" }}
+        {{ $imgRes := "" }}
+        {{ with $images }}
+        {{ $imgFile := index . 0 }}
+        {{ $imgRes = $pageRes.Get $imgFile }}
+        {{ if not $imgRes }}{{ $imgRes = resources.Get (strings.TrimPrefix "/" $imgFile) }}{{ end }}
+        {{ end }}
+        <div class="resource-card{{ if or $imgRes $isPerson }} resource-card--has-image{{ end }}"
           data-url="{{ $pageURL }}"
           data-title="{{ .Title }}"
           data-description="{{ .Description }}"
@@ -270,16 +277,17 @@ <h1 class="resources-section-title">{{ .Title }}</h1>
           data-format="{{ .Params.format }}"
           data-location="{{ $loc := slice }}{{ with .Params.city }}{{ $loc = $loc | append . }}{{ end }}{{ range .Params.countries }}{{ $loc = $loc | append . }}{{ end }}{{ delimit $loc ", " }}"
         >
-          {{ with $images }}
-          {{ $imgFile := index . 0 }}
-          {{ $imgRes := $pageRes.Get $imgFile }}
-          {{ if not $imgRes }}{{ $imgRes = resources.Get (strings.TrimPrefix "/" $imgFile) }}{{ end }}
-          {{ with $imgRes }}
-          {{ $thumb := .Fit "320x480 jpg" }}
+          {{ if $imgRes }}
+          {{ $thumb := $imgRes.Fit "320x480 jpg" }}
           <a href="{{ $pageURL }}" class="resource-card-image-wrap resource-card-image-wrap--portrait">
             <img src="{{ $thumb.RelPermalink }}" alt="{{ $pageTitle }}" class="resource-card-image" loading="lazy" width="{{ $thumb.Width }}" height="{{ $thumb.Height }}">
           </a>
-          {{ end }}
+          {{ else if $isPerson }}
+          {{ $initials := "" }}
+          {{ range split $pageTitle " " }}{{ $initials = printf "%s%s" $initials (substr . 0 1) }}{{ end }}
+          <a href="{{ $pageURL }}" class="resource-card-image-wrap resource-card-image-wrap--portrait">
+            <div class="resource-card-image resource-card-image--placeholder" aria-hidden="true">{{ $initials }}</div>
+          </a>
           {{ end }}
           <div class="resource-card-body">
             <h2 class="resource-card-title">{{ .Title }}</h2>

layouts/resources/single.html

@@ -8,19 +8,30 @@
     <span>{{ .Title }}</span>
   </nav>
 
-  <div class="resource-single-layout{{ with .Params.images }} resource-single-layout--with-image{{ end }}">
-
-  {{/* Image column — leaf bundle first, fallback to global assets */}}
+  {{/* People without a photo still get the image column — an initials
+       placeholder — so the layout doesn't collapse to full-width just
+       because a photo wasn't available (e.g. no public LinkedIn photo). */}}
+  {{ $isPerson := in .Params.subcategories "People" }}
+  {{ $imgRes := "" }}
   {{ with .Params.images }}
   {{ $imgFile := index . 0 }}
-  {{ $imgRes := $.Resources.Get $imgFile }}
+  {{ $imgRes = $.Resources.Get $imgFile }}
   {{ if not $imgRes }}{{ $imgRes = resources.Get (strings.TrimPrefix "/" $imgFile) }}{{ end }}
-  {{ with $imgRes }}
+  {{ end }}
+
+  <div class="resource-single-layout{{ if or $imgRes $isPerson }} resource-single-layout--with-image{{ end }}">
+
+  {{ if $imgRes }}
   <div class="resource-single-image-col">
-    {{ $img := .Fit "600x900 jpg" }}
+    {{ $img := $imgRes.Fit "600x900 jpg" }}
     <img src="{{ $img.RelPermalink }}" alt="" class="resource-single-img" loading="lazy" width="{{ $img.Width }}" height="{{ $img.Height }}">
   </div>
-  {{ end }}
+  {{ else if $isPerson }}
+  {{ $initials := "" }}
+  {{ range split $.Title " " }}{{ $initials = printf "%s%s" $initials (substr . 0 1) }}{{ end }}
+  <div class="resource-single-image-col">
+    <div class="resource-single-img resource-single-img--placeholder" aria-hidden="true">{{ $initials }}</div>
+  </div>
   {{ end }}
 
   {{/* Content column */}}