feat: image support in header decorator (#393)

Author: lukasvinclav

README.md

@@ -651,7 +651,16 @@ class UserAdmin(ModelAdmin):
         """
         Third argument is short text which will appear as prefix in circle
         """
-        return "First main heading", "Smaller additional description", "AB"
+        return [
+            "First main heading",
+            "Smaller additional description", # Use None in case you don't need it
+            "AB", # Short text which will appear in front of
+            # Image instead of initials. Initials are ignored if image is available
+            {
+                "path": "some/path/picture.jpg,
+                "squared": True, # Picture is displayed in square format, if empty circle
+            }
+        ]
 ```
 
 ## Change form tabs

src/unfold/templates/unfold/helpers/display_header.html

@@ -1,17 +1,20 @@
 <div class="flex gap-4 items-center">
-  {% if value.2 %}
-    <div class="border flex font-medium h-8 justify-center items-center rounded-full text-xs uppercase w-8 dark:border-gray-700">
-      {{ value.2 }}
-    </div>
-  {% endif %}
+    {% if value.3 and value.3.path %}
+        <div class="bg-center bg-cover bg-white border flex font-medium h-8 w-8 dark:bg-gray-900 dark:border-gray-700 {% if value.3.squared %}rounded-sm{% else %}rounded-full{% endif %}" style="background-image: url('{{ value.3.path }}')">
+        </div>
+    {% elif value.2 %}
+        <div class="bg-white border flex font-medium h-8 justify-center items-center rounded-full text-xs uppercase w-8 dark:bg-gray-900 dark:border-gray-700">
+            {{ value.2 }}
+        </div>
+    {% endif %}
 
-  <div class="flex flex-col text-right lg:text-left">
-    <h3>{{ value.0 }}</h3>
+    <div class="flex flex-col text-right lg:text-left">
+        <h3>{{ value.0 }}</h3>
 
-    {% if value.1 %}
-      <p class="text-gray-500">
-        {{ value.1 }}
-      </p>
-    {% endif %}
-  </div>
+        {% if value.1 %}
+            <p class="text-gray-500">
+                {{ value.1 }}
+            </p>
+        {% endif %}
+    </div>
 </div>