feat: Add image attribution for blog posts

Adds support for attributing banner images in blog posts. Includes front matter configuration, layout changes, and styling.

Author: neural-loop

CONTRIBUTING.md

@@ -120,7 +120,7 @@ Adding new content is one of the best ways to contribute. We use Hugo's [archety
     ```
 2.  **Location:** `content/blog/your-post-title-slug/index.md`
 3.  **Images:** Place images for the post inside the `content/blog/your-post-title-slug/` directory.
-4.  **Front Matter:** Fill in the `title`, `description`, `author`, and `image` (for the banner).
+4.  **Front Matter:** Fill in the `title`, `description`, `author`, and `image` (for the banner). Remember to add `image_attribution` if the banner image requires credit.
 
 ### Adding Events (Workshops, Student Talks, etc.)
 

archetypes/blog.md

@@ -6,6 +6,11 @@ date: {{ .Date }}
 # Entice users to click by showing the value they'll get from reading.
 description: "Engaging summary of this blog post, highlighting key insights or takeaways."
 image: "your-banner-image.png" # Suggested: place banner (1200x630px) in this post's folder. Used for OG image.
+# Optional: Add image attribution for the banner image.
+# image_attribution:
+#   text: "Photo by"
+#   author: "Artist Name"
+#   url: "https://link.to.source"
 draft: true
 author:
   - "Your Name or Author Slug" # Match with a contributor profile title or slug (see project docs for format)

assets/scss/_typography-custom.scss

@@ -275,3 +275,32 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
     color: #bcfbff; 
   }
 }
+
+.image-attribution-caption {
+  // Positioning for the container div
+  @apply text-right text-xs italic -mt-8 mb-4 pr-2 relative z-10;
+
+  .attribution-backdrop {
+    // Styling for the text's background
+    @apply inline-block px-2 py-1 rounded-md;
+    background-color: rgba(0, 0, 0, 0.6); // Semi-transparent black
+    backdrop-filter: blur(2px); // Optional: adds a nice blur effect on supported browsers
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // Adds a subtle shadow for pop
+
+    // Link styling within the backdrop
+    a {
+      color: #bcfbff !important; // Bright, readable link color
+      text-decoration: underline !important;
+      text-underline-offset: 2px;
+      transition: color 0.2s;
+
+      &:hover {
+        color: #ffffff !important; // Brighten on hover
+      }
+    }
+  }
+}
+
+// NOTE: We no longer need a separate .dark rule for this,
+// as the dark semi-transparent background works well in both light and dark modes.

content/blog/strategic-vision-open-neuromorphic/index.md

@@ -2,6 +2,10 @@
 title: "Strategic Vision for Open Neuromorphic"
 description: "Why 'open' matters and where we want to take the Open Neuromorphic community"
 image: stars.jpg
+image_attribution:
+  text: "Photo by"
+  author: "Casey Horner"
+  url: "https://unsplash.com/photos/fireworks-pXZxuXmpsNo"
 aliases:
   - /blog/vision
 draft: false

layouts/blog/single.html

@@ -8,6 +8,7 @@
         {{ if $image }}
         <div class="mb-6">
           {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full rounded" "Size" "1280x720" "Command" "Crop") }}
+          {{ partial "components/image-attribution.html" . }}
         </div>
         {{ end }}
         {{ partial "components/metadata-bar.html" (dict "context" . "type" "blog") }}

layouts/partials/components/image-attribution.html

@@ -0,0 +1,7 @@
+{{ with .Params.image_attribution }}
+  <div class="image-attribution-caption">
+    <span class="attribution-backdrop">
+      {{ .text | default "Image:" }} <a href="{{ .url }}" target="_blank" rel="noopener">{{ .author }}</a>
+    </span>
+  </div>
+{{ end }}

readme.md

@@ -12,6 +12,7 @@ This repository contains the source code for the official **Open Neuromorphic (O
 *   **Resource Hubs:** Curated guides for [Neuromorphic Hardware](/neuromorphic-computing/hardware/) and [Software](/neuromorphic-computing/software/).
 *   **Automated Deployments:** CI/CD pipeline using GitHub Actions for automated builds and deployments.
 *   **Dynamic OG Images:** Automatically generated Open Graph images for better social sharing.
+*   **Image Attribution:** Simple front matter configuration to give credit for banner images.
 
 ## 🚀 Getting Started: Running Locally