PHPackages                             jordanbeattie/craftcms-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. jordanbeattie/craftcms-images

ActiveCraft-plugin[Templating & Views](/categories/templating)

jordanbeattie/craftcms-images
=============================

Render images in craftcms with optimized template tags

v2.0.4(2y ago)06521Twig

Since Nov 9Pushed 2y ago1 watchersCompare

[ Source](https://github.com/jordannbeattie/craftcms-images)[ Packagist](https://packagist.org/packages/jordanbeattie/craftcms-images)[ RSS](/packages/jordanbeattie-craftcms-images/feed)WikiDiscussions master Synced yesterday

READMEChangelog (10)Dependencies (2)Versions (21)Used By (0)

Image Optimization
==================

[](#image-optimization)

Render images in your Craft templates with a single include. Pass in classes, fallbacks, transforms and more and have optimized images on your site compliant with Google Page Speed Insights.

Installation
------------

[](#installation)

Include the package in your project:

```
composer require jordanbeattie/craftcms-images

```

and install the plugin within the CMS.

Usage
-----

[](#usage)

Instead of writing out `` tags in your project, pass variables to the render function which will optimize the image for you.

VariableDescriptionFieldThe CraftCMS field where users can upload a single image.TransformThe handle or attributes of an image transform to use. *\*See transforms.*FallbackA static URL/path to an image that can be used if there is an issue rendering the image or if the field is empty.ClassAny classes that should be added to the tagStyleAny items to be included in the `style` attributesAltText for the alt attribute. If none is supplied and the field variable is passed, the alt text from the image model will be used.AttributesAny other attributes to be added to the tag. This should be an array. *\* See attributes.*### Transforms

[](#transforms)

Including transforms is the best way to serve images. You can pass the transform handle through to the include. The plugin will look for the transform with the handle provided and also a mobile version which should have the same handle appended with "Mobile". e.g. *myTransformHandle* and *myTransformHandleMobile*. You can also pass in the transform manually to avoid creating them in the CMS. See examples below. If you do not specify a format for your transformed image and the server supports WebP, the image will be returned as a WebP to accomodate best web practices.

### Attributes

[](#attributes)

Often, when using third-party packages such as MatchHeight, you will need to add custom attributes. These can be passed in as an array.

```
attributes: {
    'data-mh': 'my-image'
}

```

### Returning a URL

[](#returning-a-url)

Only want to return a URL for the image? Use the URL function instead of render and simply pass in the image and transform and optional fallback image. See examples below

Examples
--------

[](#examples)

#### Full parameters

[](#full-parameters)

```
{{ craft.images.render(block.image, {
    transform: 'blockTransform',
    fallback: 'https://example.com/fallback-image.png',
    class: 'w-full h-full hidden md:block',
    style: 'display:none',
    attributes: {
        'data-mh': 'my-block-image'
    }
}) }}
{{ craft.images.render(block.image, {
    transform: {
        width: 100,
        height: 100,
        mode: 'crop'
    },
    fallback: 'https://example.com/fallback-image.png',
    class: 'w-full h-full hidden md:block',
    style: 'display:none',
    attributes: {
        'data-mh': 'my-block-image'
    }
}) }}

```

#### Image without transform

[](#image-without-transform)

```
{{ craft.images.render(block.image) }}

```

#### Static image

[](#static-image)

```
{{ craft.images.render({
    fallback: 'https://example.com/fallback-image.png'
) }}

```

#### Replacing an existing img tag

[](#replacing-an-existing-img-tag)

```

```

should be replaced with

```
{{ craft.images.render(tab.image, {
    class: "block max-w-full p-0 m-0 rounded-lg pointer-events-none select-none"
) }}

```

or with a transform

```
{{ craft.images.render( tab.image, {
    transform: 'tabBlockImage',
    class: "block max-w-full p-0 m-0 rounded-lg pointer-events-none select-none"
} }}

```

#### Returning a URL

[](#returning-a-url-1)

```
{{ craft.images.url(myImageField, {
    transform: {
        height: 100,
        width: 100
    }
}) }}

```

Contact
-------

[](#contact)

Jordan Beattie

[www.jordanbeattie.com](http://www.jordanbeattie.com)

###  Health Score

28

—

LowBetter than 52% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~46 days

Recently: every ~30 days

Total

19

Last Release

864d ago

Major Versions

v1.1.7 → v2.0.02022-07-01

v1.1.8 → v2.0.12022-09-08

v1.1.10 → v2.0.22023-10-23

v1.1.11 → v2.0.32023-10-31

v1.1.12 → v2.0.42024-02-21

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/6815944?v=4)[Jordan Beattie](/maintainers/jordannbeattie)[@jordannbeattie](https://github.com/jordannbeattie)

---

Top Contributors

[![jordannbeattie](https://avatars.githubusercontent.com/u/6815944?v=4)](https://github.com/jordannbeattie "jordannbeattie (3 commits)")

---

Tags

cmsCraftcraftcmscraft-plugin

### Embed Badge

![Health badge](/badges/jordanbeattie-craftcms-images/health.svg)

```
[![Health](https://phpackages.com/badges/jordanbeattie-craftcms-images/health.svg)](https://phpackages.com/packages/jordanbeattie-craftcms-images)
```

###  Alternatives

[verbb/formie

The most user-friendly forms plugin for Craft.

102393.6k70](/packages/verbb-formie)[wbrowar/guide

A CMS Guide for Craft CMS.

6154.7k1](/packages/wbrowar-guide)[verbb/vizy

A flexible visual editor field for Craft.

4250.4k](/packages/verbb-vizy)[verbb/hyper

A user-friendly links field for Craft.

24147.8k12](/packages/verbb-hyper)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.6k](/packages/verbb-footnotes)[verbb/events

A full-featured plugin for event management and ticketing.

2311.9k](/packages/verbb-events)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)