<p>When you call <code>.first</code> on an Asset field, that's going to return an <a href="http://buildwithcraft.com/classreference/models/AssetFileModel" rel="nofollow">AssetFileModel</a>.</p>

<p>Change the relevant part of your code to this:</p>

<pre><code>{# grab the first image #}
{% set image = block.image.first() %}

{# link to the full sized version #}
&lt;a href="{{ image.getUrl('thumb') }}"&gt;

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

    &lt;div id="lightbox-title"&gt;
        &lt;h2&gt;{{ block.imageTitle }}&lt;/h2&gt;
        &lt;p&gt;{{ block.imageContent }}&lt;/p&gt;
    &lt;/div&gt;
&lt;/a&gt;
</code></pre>

CC BY-SA 3.0
2014-09-18T19:25:04.303Z
That did the trick...you know if there's a way to zoom on the image crop?
frshjb373
CC BY-SA 3.0
2014-09-18T19:57:55.353Z
Some of the transforms will scale, but no zooming. http://buildwithcraft.com/docs/image-transforms#defining-transforms-from-the-control-panel
Brad Bell
CC BY-SA 3.0
2014-09-18T20:03:44.233Z
I'll find some css.  Thanks for the help.
frshjb373
CC BY-SA 3.0
2014-09-18T18:33:15.730Z
2014-09-18T18:33:15.730Z
Brad Bell
<p>Trying to output a matrix field image so that it crops the thumbnail. However, I can't seem to get it to work.</p>

<p>Here's what I have:</p>

<pre><code>{% for block in entry.servicesItems.type('images') %}
    &lt;div class="col"&gt;

        {% if block.image|length %}

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

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

                &lt;div id="lightbox-title"&gt;
                    &lt;h2&gt;{{ block.imageTitle }}&lt;/h2&gt;
                    &lt;p&gt;{{ block.imageContent }}&lt;/p&gt;
                &lt;/div&gt;
            &lt;/a&gt;
        {% endif %}
    &lt;/div&gt;
{% endfor %}
</code></pre>

<templating><matrix><image-transforms>
How can you crop an image and output from a Matrix field?
# How can you crop an image and output from a Matrix field?

(Asked by: username_0 on 2014-09-18)

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

        {% if block.image|length %}

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

            
                

                
                    {{ block.imageTitle }}
                    {{ block.imageContent }}
                
            
        {% endif %}
    
{% endfor %}

**Tags:** templating, matrix, image-transforms


---

## 1 answers

### Answer by username_1 on 2014-09-18. Score: 2 | Accepted answer

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


    {# generated the transformed thumbnail version #}
    

    
        {{ block.imageTitle }}
        {{ block.imageContent }}

> **Comments:**
> **username_0**: That did the trick...you know if there's a way to zoom on the image crop?  
> **username_1**: Some of the transforms will scale, but no zooming. http://buildwithcraft.com/docs/image-transforms#defining-transforms-from-the-control-panel  
> **username_0**: I'll find some css.  Thanks for the help.  

---

