Trying to output a matrix field image so that it crops the thumbnail. However, I can't seem to get it to work.

Here's what I have:

{% for block in entry.servicesItems.type('images') %}
    <div class="col">

        {% if block.image|length %}

            {% set thumb = {
                mode: 'crop',
                width: 229,
                height: 172,
                quality: 75,
                position: 'center-center'
            } %}

            <a href="images/{{ block.image.first }}.jpg">
                <img src="images/{{ block.image.first('thumb') }}.jpg" alt="{{ block.alt }}" width="{{ block.image.first.getWidth(thumb) }}" height="{{ block.image.first.getHeight(thumb) }}">

                <div id="lightbox-title">
                    <h2>{{ block.imageTitle }}</h2>
                    <p>{{ block.imageContent }}</p>
        {% endif %}
{% endfor %}

When you call .first on an Asset field, that's going to return an AssetFileModel.

Change the relevant part of your code to this:

{# grab the first image #}
{% set image = block.image.first() %}

{# link to the full sized version #}
<a href="{{ image.getUrl('thumb') }}">

    {# generated the transformed thumbnail version #}
    <img src="{{ image.getUrl('thumb')}}" alt="{{ block.alt }}" width="{{ image.getWidth('thumb') }}" height="{{ image.getHeight('thumb') }}">

    <div id="lightbox-title">
        <h2>{{ block.imageTitle }}</h2>
        <p>{{ block.imageContent }}</p>
  • That did the trick...you know if there's a way to zoom on the image crop? – frshjb373 Sep 18 '14 at 19:25
  • Some of the transforms will scale, but no zooming. buildwithcraft.com/docs/… – Brad Bell Sep 18 '14 at 19:57
  • I'll find some css. Thanks for the help. – frshjb373 Sep 18 '14 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.