Image Crops via Tag


#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' %}
{{ image.crop(0, 0, 500, 500).html(image.meta.title,image.meta.caption) }}
{% include 'partials/cards/cards-right.html.twig' %} {% elseif viztype == 'Recap-graphic' %}
{{ image.crop(0, 0, 400, 400).html(image.meta.title,image.meta.caption) }}
{% include 'partials/cards/cards-right.html.twig' %} {% else %}
{{ image.cropZoom(600,600).html(image.meta.title,image.meta.caption) }}
{% include 'partials/cards/cards-right.html.twig' %} {% endif %}