use this, and add reaction counter

templates/card.html

@@ -1,7 +1,7 @@
 <div class="col">
   <div class="card shadow-sm">
     <div class="card-header">
-      <span class="flex">{{ gallery.title }}</span>
+      <span class="flex">{{ this.title }}</span>
       <a
         href="#"
         class="btn btn-link float-end"
@@ -15,24 +15,45 @@
 
     <img
       class="card-image-top"
-      width="{{ gallery.width | default('100%') }}"
-      height="{{ gallery.height | default('225') }}"
-      src="{{ gallery.src }}"
-      alt="{{ gallery.alt_text if gallery.alt_text else gallery.title }}"
+      width="{{ this.width | default('100%') }}"
+      height="{{ this.height | default('225') }}"
+      src="{{ this.src }}"
+      alt="{{ this.alt_text if this.alt_text else this.title }}"
     />
 
     <div class="card-body">
-      <p class="card-text">{{ gallery.description | default('') }}</p>
+      <p class="card-text">{{ this.description | default('') }}</p>
     </div>
 
-    {% if gallery.reactions %}
+    {% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
     <div class="card-footer text-body-secondary text-end">
-      {% for reaction in gallery.reactions %}
-      {# TODO: limit total number of reactions shown #}
-      <span class="badge rounded-pill text-body">
+
+      {% set reaction_iterations = namespace(value=0) %}
+      {% for reaction, reaction_count in this.reactions|dictsort(by="value") %}
+        {# Don't render reaction if we've reached the max number, or its counter is 0 (or lower) #}
+        {% if reaction_iterations != gallery.max_reactions_per_card|int and reaction_count >= 1 %}
+
+      <button class="btn btn-link btn-sm disabled text-body position-relative">
+        {# TODO: Enable the button, and make clicking it toggle adding/removing that reaction to the counter, also color reaction button #}
         <i class="bi-{{ reaction }}"></i>
-      </span>
+
+          {# Only show counter if more than 2 people gave the same reaction #}
+          {% if reaction_count|int >= 2 %}
+        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark">
+            {# Don't render reaction counts larger than 1000 #}
+            {{ reaction_count if reaction_count <= 999 else '1K+' }}
+          <span class="visually-hidden">
+            {{ reaction_count }} people reacted with {{ reaction }}
+          </span>
+        </span>
+          {% endif %}
+
+      </button>
+
+          {% set reaction_iterations.value = reaction_iterations.value + 1 %}
+        {% endif %}
       {% endfor %}
+      {% set reaction_iterations = none %}
     </div>
     {% endif %}
 

templates/gallery.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
 
-      {% for gallery in gallery_items %}
+      {% for this in gallery_items %}
         {% include 'card.html' %}
         {# include 'card_loading.html' #}
       {% endfor %}

test.py

@@ -64,18 +64,21 @@ template_vars = {
             },
         ],
     },
+    "gallery": {
+        "max_reactions_per_card": 10,
+    },
     "gallery_items": [
         {
             "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
             "description": "An arctic fox :3",
             "title": "fox",
-            "reactions": ["heart-fill", "backpack4", "balloon-fill", "bag-x-fill"],
+            "reactions": {"heart-fill":4, "backpack4":1, "balloon-fill":45, "bag-x-fill":0},
         },
         {
             "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
             "description": "An arctic fox :3",
             "title": "fox",
-            "reactions": [],
+            "reactions": {"heart-fill":1024, "bag-x-fill":50},
         },
         {
             "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",