[#44] Adds image components. Also image card component.

templates/_components/card.twig → templates/_components/card-icon.twig

@@ -12,8 +12,6 @@
 {# @var string|null icon #}
 {% set icon = icon ?? null %}
 
-{# TODO could add an image prop and use an image instead of an icon in this case #}
-
 {# @var string|null title #}
 {% set title = title ?? null %}
 

templates/_components/card-image.twig

@@ -0,0 +1,50 @@
+{% from '_macros/icon.twig' import icon %}
+
+{# @var string|null class #}
+{% set class = class ?? null %}
+
+{# @var string|null href #}
+{% set href = href ?? null %}
+
+{# @var craft\elements\Asset|null image #}
+{% set image = image ?? null %}
+
+{# @var float|null ratio #}
+{% set ratio = ratio ?? null %}
+
+{# @var array|null sizes #}
+{% set sizes = sizes ?? null %}
+
+{# @var string align #}
+{% set align = align ?? 'left' %}
+
+{# @var string|null title #}
+{% set title = title ?? null %}
+
+{# @var string|null description #}
+{% set description = description ?? null %}
+
+<article class="{{ cx('flex flex-col gap-24', {
+  'items-start': align == 'left',
+  'items-center text-center': align == 'center',
+}, class) }}">
+
+  {% if image %}
+    {{ include('_components/image.twig', {
+      image: image,
+      sizes: sizes,
+      ratio: ratio,
+    }) }}
+  {% endif %}
+
+  {% if title or description %}
+    <div class="flex flex-col gap-8">
+      {% if title %}
+        <h2 class="text-xl font-bold">{{ title }}</h2>
+      {% endif %}
+      {% if description %}
+        <p class="text-sm">{{ description }}</p>
+      {% endif %}
+    </div>
+  {% endif %}
+</article>

templates/_components/image-caption.twig

@@ -0,0 +1,24 @@
+{#
+  @var string|null content
+
+  Example:
+
+  {{ include('_components/image-caption.twig', {
+    content: include('_components/image.twig', {
+      image: craft.assets().filename('image.jpg').one(),
+    }),
+    caption: 'Image caption',
+  }) }}
+#}
+{% set content = content ?? null %}
+
+{# @var string|null caption #}
+{% set caption = caption ?? null %}
+
+{# @var string|null class #}
+{% set class = class ?? null %}
+
+<figure class="{{ class }}">
+  {{ content|raw }}
+  <figcaption>{{ caption }}</figcaption>
+</figure>

templates/_components/image.twig

@@ -0,0 +1,96 @@
+{# @var \craft\elements\Asset|null image #}
+{% set image = image ?? null %}
+
+{# @var string|null class #}
+{% set class = class ?? null %}
+
+{#
+  @var string|null loading
+  Can be 'lazy' or 'eager'
+#}
+{% set loading = loading ?? 'lazy' %}
+
+{#
+  @var array sizes
+
+  The 'sizes' prop is used to specify the size of the image at different viewport widths.
+  It should be an associative array where:
+  - Keys are either Tailwind breakpoint names (sm, md, lg, xl, 2xl) or custom media queries.
+  - Values are CSS length values (e.g., px, em, rem, vw) representing the image width at that breakpoint.
+
+  Example usage:
+  sizes:  {
+    default: '100vw',
+    sm: '50vw',
+    md: '33vw',
+    '(min-width: 1200px)': '400px'
+  }
+  If not provided, it defaults to full viewport width at all sizes.
+
+#}
+{% set sizes = sizes ?? {
+  default: '100vw',
+} %}
+
+{#
+  Calculated by dividing width by height.
+  @var float|null ratio
+#}
+{% set ratio = ratio ?? null %}
+
+{% set defaultSize = sizes.default ?? '100vw' %}
+
+{#
+  Use Tailwind screen config in our sizes prop.
+  Keep this in sync with your TW's screens config.
+  https://tailwindcss.com/docs/screens
+#}
+{% set screens = {
+  'sm': '(min-width: 640px)',
+  'md': '(min-width: 768px)',
+  'lg': '(min-width: 1024px)',
+  'xl': '(min-width: 1280px)',
+  '2xl': '(min-width: 1536px)',
+} %}
+
+{#
+  Remove the default key so we can add it to the end.
+  Create our pair of MQs + Unit values. First we check
+  if the key matches our Tailwind screen config. If not, we'll
+  assume it's a media query.
+#}
+{% set sizes = sizes
+  |filter((value, key) => key != 'default')
+  |map((value, key) => "#{screens[key] ?? key} #{value}")
+  |merge([ defaultSize ])
+  |join(', ') %}
+
+{% set minWidth = 320 %}
+{% set maxWidth = 2200 %}
+
+{#
+  Default settings applied to all transforms
+
+  See:
+  https://www.spacecat.ninja/blog/power-pack-and-quick-transform-syntax
+
+  https://github.com/spacecatninja/craft-imager-x-power-pack
+#}
+{{ image ? ppimg(
+  image: image,
+  transform: [
+    minWidth,
+    maxWidth,
+    {
+      ratio: ratio,
+    },
+  ],
+  params: {
+    class: cx(class, 'w-full h-auto'),
+    loading,
+    fillTransforms: 'auto',
+    autoFillCount: 5,
+    allowUpscale: false,
+    sizes: sizes,
+  },
+) }}

templates/parts-kit/card/default.twig → templates/parts-kit/card/card-with-icon.twig

@@ -3,7 +3,7 @@
 {% block main %}
   <div class="grid grid-cols-3 gap-16 mb-48">
     {% for i in 1..3 %}
-      {{ include('_components/card.twig', {
+      {{ include('_components/card-icon.twig', {
         icon: 'clock',
         title: 'Lorem ipsum dolor sit amet',
         description: 'Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.',
@@ -13,7 +13,7 @@
 
   <div class="grid grid-cols-3 gap-16 mb-48">
     {% for i in 1..3 %}
-      {{ include('_components/card.twig', {
+      {{ include('_components/card-icon.twig', {
         align: 'center',
         icon: 'clock',
         title: 'Lorem ipsum dolor sit amet',

templates/parts-kit/card/card-with-image.twig

@@ -0,0 +1,31 @@
+{% extends 'viget-parts-kit/layout.twig' %}
+
+{% block main %}
+  <div class="grid grid-cols-3 gap-16 mb-48">
+    {% for i in 1..3 %}
+      {{ include('_components/card-image.twig', {
+        image: craft.assets.one(),
+        sizes: {
+          default: '33vw',
+        },
+        title: 'Lorem ipsum dolor sit amet',
+        description: 'Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.',
+      }) }}
+    {% endfor %}
+  </div>
+
+  <div class="grid grid-cols-3 gap-16 mb-48">
+    {% for i in 1..3 %}
+      {{ include('_components/card-image.twig', {
+        align: 'center',
+        image: craft.assets.one(),
+        ratio: 1/1,
+        sizes: {
+          default: '33vw',
+        },
+        title: 'Lorem ipsum dolor sit amet',
+        description: 'Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.',
+      }) }}
+    {% endfor %}
+  </div>
+{% endblock %}

templates/parts-kit/image/default.twig

@@ -0,0 +1,44 @@
+{% extends 'viget-parts-kit/layout.twig' %}
+
+{% block main %}
+  <div class="flex flex-col gap-16">
+    <h2 class="text-2xl font-bold">Basic Image</h2>
+    {{ include('_components/image.twig', {
+      image: craft.assets.one(),
+    }) }}
+
+    <h2 class="text-2xl font-bold">Image with Aspect Ratio</h2>
+    {{ include('_components/image.twig', {
+      image: craft.assets.one(),
+      ratio: 1/1,
+    }) }}
+
+    <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-3">
+      <div>
+        <h2 class="text-2xl font-bold">Image with Custom Sizes</h2>
+
+        {{ include('_components/image.twig', {
+          image: craft.assets.one(),
+          sizes: {
+            default: '50vw',
+            sm: '25vw',
+            md: '33vw',
+          },
+        }) }}
+      </div>
+
+      <div>
+        <h2 class="text-2xl font-bold">Image with Custom Sizes and Aspect Ratio</h2>
+        {{ include('_components/image.twig', {
+          image: craft.assets.one(),
+          sizes: {
+            default: '50vw',
+            sm: '25vw',
+            md: '33vw',
+          },
+          ratio: 3/4,
+        }) }}
+      </div>
+    </div>
+  </div>
+{% endblock %}

templates/parts-kit/image/with-caption.twig

@@ -0,0 +1,14 @@
+{% extends 'viget-parts-kit/layout.twig' %}
+
+{% block main %}
+  <div class="flex flex-col gap-16">
+    <h2 class="text-2xl font-bold">Basic Image</h2>
+
+    {{ include('_components/image-caption.twig', {
+      content: include('_components/image.twig', {
+        image: craft.assets().one(),
+      }),
+      caption: 'Image caption',
+    }) }}
+  </div>
+{% endblock %}