First Image

First Image finds the first image inside a rich text field and gives you its URL, so you can use it as a thumbnail, card image, or social sharing image without asking authors to fill in a separate image field.

It works with Redactor and CKEditor fields, and with any other HTML string.

Features

• One simple call. Use it as a Twig filter or a function, whichever reads better in your template.
• Image transforms. Pass a named transform or a transform definition, the same way you would with asset.getUrl(), to get a resized or cropped version.
• Redactor and CKEditor. Reads the field's content directly and recognises the Craft asset behind each image.
• Safe on empty content. Returns null when there is no image, so it works in an {% if %} check.
• Lazy-loaded images. Falls back to data-src when an image has no src.
• Lightweight. No third-party libraries, and results are cached for the duration of the request.

Usage

Get the first image URL:

{{ entry.body | getFirstImage }}

{% set image = getFirstImage(entry.body) %}

Check whether the content has an image:

{% set image = entry.body | getFirstImage %}
{% if image %}
    <img src="{{ image }}" alt="{{ entry.title }}">
{% endif %}

Apply a named image transform:

{{ entry.body | getFirstImage('thumb') }}

Or define the transform inline:

{{ entry.body | getFirstImage({
    mode: 'crop',
    width: 400,
    height: 300,
    quality: 80,
    position: 'top-center'
}) }}

Good to know

• Transforms apply to images that are Craft assets. For images hosted elsewhere, or if the transform handle doesn't exist, the original image URL is returned.
• No settings and nothing to configure: install it and use it in your templates.

Requirements

• Craft CMS 5.0 or later
• PHP 8.2 or later

Upgrading from by/first-image

From version 3.0.0 the package is named uxi360/first-image. The plugin handle is unchanged, so there is nothing to uninstall and no template changes are needed. See the README for the two Composer commands.