Answers.Body: <p>I think the best way to do this, is by creating a small Twig extension plugin that uses PHP's html parser to find the first occurrence of an IMG tag and return the src of that tag to your template. <a href="https://cameronspear.com/blog/craft-cms-twig-filter-extension/" rel="nofollow">This</a> is a step-by-step explanation of how to create your very own Twig filter.</p>
  
  <p>You could then to this:</p>
  
  <p>{{ entry.body | firstImageSrc }}</p>
  
  <p>And it would return the url you need.</p>
  
  <p><strong>The easiest way, however, is to add an asset field to your Entry Type's field layout and choose a file manually.</strong></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-26T15:48:50.660Z
Answers.Text: Just discovered you can do this with the hacksaw plugin: {{ article.articleText|hacksaw(hack='image')|striptags('<img>')|raw }}
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-01-30T14:11:02.570Z
Answers.LastActivityDate: 2015-01-30T14:11:02.570Z
Answers.UserDisplayName: Paul
Body: <p>Is there a way to output the first image of a rich text field?</p>
  
  <p>At the moment the template code is as simple as:</p>
  
  <pre><code>{{ entry.body }}
  </code></pre>
  
  <p>The purpose is so that I can use the image in the meta section of the template. If there is no easy solution I could change it to be a Matrix field.</p>
  
Tags: <entries><richtext>
Title: Pull first image from rich text field
ThreadText: # Pull first image from rich text field
  
  (Asked by: username_0 on 2015-01-30)
  
  Is there a way to output the first image of a rich text field?
  
  At the moment the template code is as simple as:
  
  ```
  {{ entry.body }}
  
  ```
  
  The purpose is so that I can use the image in the meta section of the template. If there is no easy solution I could change it to be a Matrix field.
  
  **Tags:** entries, richtext
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-01-30. Score: 4 | Accepted answer
  
  I think the best way to do this, is by creating a small Twig extension plugin that uses PHP's html parser to find the first occurrence of an IMG tag and return the src of that tag to your template. [This](https://cameronspear.com/blog/craft-cms-twig-filter-extension/) is a step-by-step explanation of how to create your very own Twig filter.
  
  You could then to this:
  
  {{ entry.body | firstImageSrc }}
  
  And it would return the url you need.
  
  **The easiest way, however, is to add an asset field to your Entry Type's field layout and choose a file manually.**
  
  > **Comments:**
  > **username_2**: Just discovered you can do this with the hacksaw plugin: {{ article.articleText|hacksaw(hack='image')|striptags('<img>')|raw }}  
  
  ---
  
  