Image Crops via Tag

Support Themes & Styling
1

I am using quark
I have a variety of image styles for the different type of content with a number of taxonomies, ex…

  • resource (quote, exercises to do, link)
  • viztype (infographic, recap)

I a trying to get the images to crop differently in the blog-list-item

This works when my taxonomy is 'more than one word’

  {% if image and resource == 'exercises to do' %}
<div class="card-image">
    <a href="{{ page.url }}">{{ image.crop(0, 0, 600, 600).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% elseif image %}
<div class="card-image">
    <a href="{{ page.url }}">{{ image.cropZoom(800,800).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% endif %}

This doesn’t work

 {% if image and resource == quote %}
<div class="card-image">
    <a href="{{ page.url }}">{{ image.crop(0, 0, 600, 600).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% elseif image %}
<div class="card-image">
    <a href="{{ page.url }}">{{ image.cropZoom(800,800).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% endif %}

I’m baffled can anyone provide insight??

2

I figured this out.
Sharing for anyone who may find it helpful.
I neglected to set all the taxomony I was using.

here’s the full twig

{% set pagetype = page.taxonomy().pagetype|first %}
{% set viztype = page.taxonomy().viztype|first %}

{% set image = page.media.images|first %} {% if pagetype == 'Exercise to Do' %} {% include 'partials/cards/cards-right.html.twig' %} {% elseif viztype == 'Recap-graphic' %} {% include 'partials/cards/cards-right.html.twig' %} {% else %} {% include 'partials/cards/cards-right.html.twig' %} {% endif %}
1 Like