Replace buggy Author avatar object with block (#1723)

Author: tylersticka

.changeset/good-ligers-arrive.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Replaces the buggy Author `avatar.src` functionality with a template block

src/components/author/author.stories.mdx

@@ -13,7 +13,7 @@ const allAuthors = [
   },
   {
     name: 'Danielle Romo',
-    avatar: { src: danielleImage, width: 64 },
+    avatar: danielleImage,
     link: 'https://cloudfour.com/is/danielle',
   },
   {
@@ -142,7 +142,7 @@ Multiple authors are also supported.
 `authors` (array): Array of [author objects](https://timber.github.io/docs/reference/timber-user/#properties), each containing:
 
 - `name` (string): The author's name.
-- `avatar` (string or object): If this is an object containing a `src`, this will be passed directly to [the Avatar component](/?path=/docs/components-avatar--empty) (along with any other properties, for example `srcset` or `sizes`). Otherwise, it is assumed to be a string and used as the Avatar's `src` property.
+- `avatar` (string): A URL for the author's avatar. For more complex customization, use the `avatars` block.
 - `link` (optional, string): An `href` for the author's name to link to, for example a bio page.
 
 `author_prefix` (optional, string, default "By"): Used to create a more
@@ -154,3 +154,9 @@ accessible user experience by adding visually hidden text, prefixes the author n
 
 `date_prefix` (optional, string, default "Published on"): Used to create a more
 accessible user experience by adding visually hidden text, prefixes the date value (e.g. "Published on March 31st, 2021")
+
+## Template Blocks
+
+- `authors`: The author links to display.
+- `avatars`: The [Avatars](/?path=/docs/components-avatar--empty), which will be passed to a [Bunch](/?path=/docs/objects-bunch--of-avatars). Use this if you want to make deeper customizations to the avatars, for example adding `srcset` and `sizes`.
+- `meta_content`: The date or other additional content to display.

src/components/author/author.twig

@@ -40,17 +40,22 @@
   {% endblock %}
 {% endset %}
 
+{% set _avatars %}
+  {% block avatars %}
+    {% for author in authors %}
+      {% include '@cloudfour/components/avatar/avatar.twig' with { src: author.avatar } only %}
+    {% endfor %}
+  {% endblock %}
+{% endset %}
+
 <div class="c-author o-media{% if class %} {{ class }}{% endif %}">
   {# Avatar(s) #}
-  {% embed '@cloudfour/objects/bunch/bunch.twig' with { class: 'o-media__object' } %}
+  {% embed '@cloudfour/objects/bunch/bunch.twig' with {
+    class: 'o-media__object',
+    _avatars: _avatars
+  } only %}
     {% block content %}
-      {% for author in authors %}
-        {% if author.avatar.src is defined %}
-          {% include '@cloudfour/components/avatar/avatar.twig' with author.avatar only %}
-        {% else %}
-          {% include '@cloudfour/components/avatar/avatar.twig' with { src: author.avatar } only %}
-        {% endif %}
-      {% endfor %}
+      {{_avatars}}
     {% endblock %}
   {% endembed %}
 
@@ -59,15 +64,17 @@
     {# Author links #}
     <p class="c-author__author">
       <span class="u-hidden-visually">{{ author_prefix|default("By") }}</span>
-      {% for author in authors %}
-        {% if loop.last and loop.length > 1 %}and {% endif %}
-          {% if author.link %}
-            <a href="{{ author.link }}">{{ author.name }}</a>
-          {% else %}
-            <span>{{ author.name }}</span>
-          {% endif %}
-        {%- if not loop.last and loop.length > 2 %},{% endif %}
-      {% endfor %}
+      {% block authors %}
+        {% for author in authors %}
+          {% if loop.last and loop.length > 1 %}and {% endif %}
+            {% if author.link %}
+              <a href="{{ author.link }}">{{ author.name }}</a>
+            {% else %}
+              <span>{{ author.name }}</span>
+            {% endif %}
+          {%- if not loop.last and loop.length > 2 %},{% endif %}
+        {% endfor %}
+      {% endblock %}
     </p>
 
     {# Author meta content #}