Image Crops via Tag

Started by Cath 8 years ago · 1 replies · 705 views

8 years ago

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'

TWIG

  {% 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

TWIG

 {% 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??

8 years ago Solution

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 %}

<div class="card card-r">
{% set image = page.media.images|first %}
{% if pagetype == 'Exercise to Do' %}
<div class="card-image card-image-r">
<a href="{{ page.url }}">{{ image.crop(0, 0, 500, 500).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% include 'partials/cards/cards-right.html.twig' %}
{% elseif viztype == 'Recap-graphic' %}
<div class="card-image card-image-r">
<a href="{{ page.url }}">{{ image.crop(0, 0, 400, 400).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% include 'partials/cards/cards-right.html.twig' %}
{% else %}
<div class="card-image card-image-r">
<a href="{{ page.url }}">{{ image.cropZoom(600,600).html(image.meta.title,image.meta.caption) }}</a>
</div>
{% include 'partials/cards/cards-right.html.twig' %}
{% endif %}
</div>

Topic	Replies	Views	Activity
Is it a way to get the "content - summary" in a twig template ? Themes & Styling · by FrViPofm, 4 weeks ago	4	474	2 weeks ago
Website shifting Themes & Styling · by johan thomas, 5 years ago	1	800	3 weeks ago
Typhoon set width Themes & Styling · by stuart young, 2 months ago	3	660	2 months ago
Quark2 theme skeleton Themes & Styling · by Sebadamus, 3 months ago	5	680	2 months ago
A Visual Acceptance Matrix for Grav 2 Theme Reviews: What to Check Before CSS Ships Themes & Styling · by martynfoster735, 3 months ago	1	642	3 months ago

Suggested topics