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)06511Twig

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 1mo ago

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

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity16

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

811d 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://www.gravatar.com/avatar/386767c01607b6d47904c71fd4f101c309183b826e047b32c41a8c76de4e8720?d=identicon)[jordannbeattie](/maintainers/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

[lewisjenkins/craft-dynamic-fields

Populate Craft fields with dynamic data using the power of Twig.

14667.0k](/packages/lewisjenkins-craft-dynamic-fields)[nystudio107/craft-minify

A simple plugin that allows you to minify blocks of HTML, CSS, and JS inline in Craft CMS templates.

37461.2k29](/packages/nystudio107-craft-minify)[jalendport/craft-preparse

A fieldtype that parses Twig when an element is saved and saves the result as plain text.

1086.4k](/packages/jalendport-craft-preparse)[craftpulse/craft-colour-swatches

Let clients choose from a predefined set of colours and utilise associated colour codes and class names in your templates.

3530.8k2](/packages/craftpulse-craft-colour-swatches)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.3k](/packages/verbb-footnotes)

PHPackages © 2026

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