Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-18T19:25:04.303Z
Answers.Text: That did the trick...you know if there's a way to zoom on the image crop?
Answers.UserDisplayName: frshjb373
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-18T19:57:55.353Z
Answers.Text: Some of the transforms will scale, but no zooming. http://buildwithcraft.com/docs/image-transforms#defining-transforms-from-the-control-panel
Answers.UserDisplayName: Brad Bell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-18T20:03:44.233Z
Answers.Text: I'll find some css.  Thanks for the help.
Answers.UserDisplayName: frshjb373
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-09-18T18:33:15.730Z
Answers.LastActivityDate: 2014-09-18T18:33:15.730Z
Answers.UserDisplayName: Brad Bell
Body: <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>
  
Tags: <templating><matrix><image-transforms>
Title: How can you crop an image and output from a Matrix field?
ThreadText: # 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') %}
      <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>
                  </div>
              </a>
          {% endif %}
      </div>
  {% 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](http://buildwithcraft.com/classreference/models/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>
      </div>
  </a>
  
  ```
  
  > **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.  
  
  ---
  
  