Grab first <img> or <img> src from Rich Text field

Question

I've had the unfortunate task of importing thousands of entries in to Craft from Worpdress.

Each of the entries has a Rich Text field and within the first couple of paragraphs there is an image.

I need to use this image as the overview thumbnail on a listing page. How can I extract that image tag, or just the src attribute from it to get the url.

Example of the image tag

<img class="size-full wp-image-13325" src="https://www.domain.com/news/wp-content/uploads/2015/12/image.jpg" alt="etc" width="620" height="385" />

I have tried to use the |split filter and some others with no success.

Thanks in advance for any help/direction

Answer 1

I had the exact same issue with a client and their horrendous Wordpress blog posts.

In the end, after importing all the posts and copying over the related images, I wrote a simple plugin that lets you use a |firstImage filter to grab the first image from a rich text field. I've added it to GitHub: https://github.com/DigitalSquid/Craft-CMS-First-Image

A rough example of how to use it: {% set firstImage = entry.body|firstImage %} {% if firstImage|length %} <img src="{{ firstImage }}" /> {% endif %}

Answer 2

Sounds like a job for regular expressions.

Twig has limited support for regex natively, but there is a handy Craft plugin that adds preg_match support, which is what you'll need.