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

CC BY-SA 3.0
2017-09-26T15:48:50.660Z
Just discovered you can do this with the hacksaw plugin: {{ article.articleText|hacksaw(hack='image')|striptags('<img>')|raw }}
Martin
CC BY-SA 3.0
2015-01-30T14:11:02.570Z
2015-01-30T14:11:02.570Z
Paul
<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>

<entries><richtext>
Pull first image from rich text field
# 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 }}  

---

