[#45] Add heading to card grid block. Make card heading levels dynamic

vigetlabs · Oct 3, 2024 · d46d25a · d46d25a
1 parent dd63dec
commit d46d25a
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 24 deletions.
diff --git a/config/project/entryTypes/cardGrid--7ced3e9d-9b54-47f6-8103-e5c3a4fbaf9c.yaml b/config/project/entryTypes/cardGrid--7ced3e9d-9b54-47f6-8103-e5c3a4fbaf9c.yaml
@@ -35,6 +35,22 @@ fieldLayouts:
             userCondition: null
             warning: null
             width: 100
+          -
+            dateAdded: '2024-10-02T23:56:36+00:00'
+            elementCondition: null
+            fieldUid: 4382f55f-01a1-4b67-84c8-ebbc89b238d2 # Heading
+            handle: null
+            includeInCards: false
+            instructions: null
+            label: null
+            providesThumbs: false
+            required: false
+            tip: null
+            type: craft\fieldlayoutelements\CustomField
+            uid: dbdfb37c-efcb-4c7f-a367-c9bf274977ed
+            userCondition: null
+            warning: null
+            width: 100
           -
             dateAdded: '2024-09-30T23:33:26+00:00'
             elementCondition: null

diff --git a/config/project/project.yaml b/config/project/project.yaml
@@ -1,4 +1,4 @@
-dateModified: 1727908021
+dateModified: 1727913396
 email:
   fromEmail: $SYSTEM_EMAIL_FROM
   fromName: 'Viget Craft Starter'

diff --git a/templates/_blocks/_cardGrid.twig b/templates/_blocks/_cardGrid.twig
@@ -1,25 +1,36 @@
 {# @var \craft\elements\Entry block #}
 {% set block = block ?? null %}
 
-<div class="container grid gap-24 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-48">
-  {% for card in block.cardGrid.eagerly().all() %}
-    {% switch card.type.handle %}
-      {% case 'imageCard' %}
-        {{ include('_components/card-image.twig', {
-          image: card.image.eagerly().one(),
-          href: card.href,
-          newWindow: card.newWindow,
-          title: card.title,
-          description: card.description,
-        }) }}
-      {% case 'iconCard' %}
-        {{ include('_components/card-icon.twig', {
-          href: card.href,
-          newWindow: card.newWindow,
-          icon: card.icon.value,
-          title: card.title,
-          description: card.description,
-        }) }}
-    {% endswitch %}
-  {% endfor %}
+{% set cardHeadingLevel = block.heading is not empty ? 3 : 2 %}
+
+<div class="container">
+  {% if block.heading %}
+    <h2 class="text-3xl font-bold mb-48">
+      {{ block.heading }}
+    </h2>
+  {% endif %}
+  <div class="grid gap-24 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-48">
+    {% for card in block.cardGrid.eagerly().all() %}
+      {% switch card.type.handle %}
+        {% case 'imageCard' %}
+          {{ include('_components/card-image.twig', {
+            image: card.image.eagerly().one(),
+            href: card.href,
+            newWindow: card.newWindow,
+            title: card.title,
+            description: card.description,
+            headingLevel: cardHeadingLevel,
+          }) }}
+        {% case 'iconCard' %}
+          {{ include('_components/card-icon.twig', {
+            href: card.href,
+            newWindow: card.newWindow,
+            icon: card.icon.value,
+            title: card.title,
+            description: card.description,
+            headingLevel: cardHeadingLevel,
+          }) }}
+      {% endswitch %}
+    {% endfor %}
+  </div>
 </div>
diff --git a/templates/_components/card-icon.twig b/templates/_components/card-icon.twig
@@ -15,13 +15,18 @@
 {# @var string|null icon #}
 {% set icon = icon ?? null %}
 
+{# @var int headingLevel #}
+{% set headingLevel = headingLevel ?? 3 %}
+
 {# @var string|null title #}
 {% set title = title ?? null %}
 
 {# @var string|null description #}
 {% set description = description ?? null %}
 
+{# Computed values #}
 {% set element = href ? 'a' : 'article' %}
+{% set headingElement = "h#{headingLevel}" %}
 
 {% tag element with {
   class: cx(class, 'flex flex-col gap-24', {
@@ -42,7 +47,11 @@
   {% if title or description %}
     <div class="flex flex-col gap-8">
       {% if title %}
-        <h2 class="text-xl font-bold">{{ title }}</h2>
+        {% tag headingElement with {
+          class: 'text-xl font-bold',
+        } %}
+          {{ title }}
+        {% endtag %}
       {% endif %}
       {% if description %}
         <p class="text-sm">{{ description }}</p>

diff --git a/templates/_components/card-image.twig b/templates/_components/card-image.twig
@@ -21,13 +21,18 @@
 {# @var string align #}
 {% set align = align ?? 'left' %}
 
+{# @var int headingLevel #}
+{% set headingLevel = headingLevel ?? 3 %}
+
 {# @var string|null title #}
 {% set title = title ?? null %}
 
 {# @var string|null description #}
 {% set description = description ?? null %}
 
+{# Computed values #}
 {% set element = href ? 'a' : 'article' %}
+{% set headingElement = "h#{headingLevel}" %}
 
 {% tag element with {
   class: cx(class, 'flex flex-col gap-24', {
@@ -48,7 +53,11 @@
   {% if title or description %}
     <div class="flex flex-col gap-8">
       {% if title %}
-        <h2 class="text-xl font-bold">{{ title }}</h2>
+        {% tag headingElement with {
+          class: 'text-xl font-bold',
+        } %}
+          {{ title }}
+        {% endtag %}
       {% endif %}
       {% if description %}
         <p class="text-sm">{{ description }}</p>