footballrs.net

Media Item 

<!-- Error rendering component -->
<!-- TwigException: Unable to find filter resize -->
<!-- Error: TwigException: Unable to find filter resize
    at /builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/twig/src/adapter.js:156:24
    at new Promise (<anonymous>)
    at TwigAdapter.render (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/twig/src/adapter.js:134:16)
    at ComponentSource._renderVariant (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/co/index.js:65:19) -->
 
{# --BLUEPRINT DO NOT REMOVE--
<!-- atom / Picture picture -->
{% include '@atoms/Picture/picture.twig' with picture only %}
<!-- molecule member_avatar -->
{% include '@molecules/MemberAvatarLayer/member_avatar.twig' with member_avatar only %}

/--BLUEPRINT DO NOT REMOVE-- #}
<div class="media-item">
    <a class="no-underline" href="{{ link }}">
        {% include '@atoms/picture/picture.twig' with picture only %}
    </a>
    {% if member_avatar is defined %}
        {% include '@molecules/memberAvatarLayer/member_avatar_layer.twig' with member_avatar only %}
    {% endif %}
    {% if disableReporting is not defined %}
        <button class="x-btn--accent report rounded-full absolute right-1 bottom-1" data-id="{{ id }}">
            {% include '@atoms/icon/icon.twig' with {
                icon: 'warning-circled-outline',
                iconType: 'iconoir'
            } %}
        </button>
    {% endif %}
</div>
 
{
  "picture": {
    "default": {
      "src": "https://loremflickr.com/800/600/sports",
      "alt": "Laudantium at placeat nemo earum.",
      "width": 800,
      "height": 600
    },
    "sources": [
      {
        "src": "https://loremflickr.com/800/600/sports",
        "media": "(max-width: 2560px)"
      }
    ]
  },
  "member_avatar": {
    "avatar": {
      "default": {
        "srcset": "https://loremflickr.com/100/100/people",
        "alt": "Laboriosam corporis autem at rem.",
        "width": 100,
        "height": 100
      },
      "sources": [
        {
          "src": "https://loremflickr.com/100/100/people",
          "media": "(max-width: 2560px)"
        }
      ]
    },
    "link": "#",
    "name": "Cassandra Z."
  }
}

Media item

{% include '@molecules/media_item/media_item.twig' with {

    } only %}

ACF

Fields picture -> atom

member_avatar -> molecule