How can you crop an image and output from a Matrix field? 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') %}
    &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 %}
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 #}
&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;