PHPackages                             legrisch/statamic-graphql-thumbnails - 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. [Utility & Helpers](/categories/utility)
4. /
5. legrisch/statamic-graphql-thumbnails

ActiveStatamic-addon[Utility & Helpers](/categories/utility)

legrisch/statamic-graphql-thumbnails
====================================

A Statamic CMS GraphQL Addon that provides a convenient thumbnail field on all asset fields.

v0.5.0(4y ago)3222MITPHPPHP ^7.3 || ^8.0

Since Apr 19Pushed 4y agoCompare

[ Source](https://github.com/legrisch/statamic-graphql-thumbnails)[ Packagist](https://packagist.org/packages/legrisch/statamic-graphql-thumbnails)[ RSS](/packages/legrisch-statamic-graphql-thumbnails/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (10)Dependencies (1)Versions (26)Used By (0)

GraphQL Thumbnails for Statamic CMS
===================================

[](#graphql-thumbnails-for-statamic-cms)

This Statamic GraphQL addon provides a `thumbnail` field on all `AssetInterface` fields. Either provide the argument `name` to query by predefined formats or use Just-In-Time thumbnail generation and provide `width`, `height` or `fit`.

Features
--------

[](#features)

- Predefined thumbnail Formats: Query by `name`
- Just-In-Time thumbnail: Query by `width`, `height` or `fit`
- Control Panel UI to define formats and enable/disable JIT thumbnail generation
- Permissions for managing GraphQL thumbnail Settings

[![GraphQL Thumbnails for Statamic CMS](https://user-images.githubusercontent.com/46897060/116623211-2fd19000-a946-11eb-8d45-f8908499e542.png)](https://user-images.githubusercontent.com/46897060/116623211-2fd19000-a946-11eb-8d45-f8908499e542.png)

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

[](#installation)

Run `composer require legrisch/statamic-graphql-thumbnails`

Setup
-----

[](#setup)

After installation, you must visit the control panel to define formats to query for or enable the JIT thumbnail generation.

Usage
-----

[](#usage)

### Formats Usage

[](#formats-usage)

The `thumbnail` field requires an argument `name` which resolves to the name of one of your formats.

If formats are defined, you can also directly access a property `srcset` on the Asset.

```
asset {
  thumbnail(name: "small")
  srcset
}
```

yields

```
"asset": {
  "thumbnail": "http://absolute.url/to/thumbnail-small.jpg",
  "srcset": "http://absolute.url/to/thumbnail-small.jpg 500w, http://absolute.url/to/thumbnail-medium.jpg 1000w",
}
```

### JIT Usage

[](#jit-usage)

The `thumbnail` field requires an argument `width` or `height` with an integer. Additionally you may specify the parameter `fit`. The possible values are: `contain`, `max`, `fill`, `stretch`, `crop`, `crop_focal` with the default being `crop_focal`.

```
asset {
  thumbnail(width: 100)
}
```

yields

```
"asset": {
  "thumbnail": "http://absolute.url/to/thumbnail-with-100px-width.jpg"
}
```

### Full Examples

[](#full-examples)

#### Query single thumbnail

[](#query-single-thumbnail)

```
query MyQuery {
  entries(collection: "pages") {
    data {
      ... on Entry_Pages_Pages {
        image {
          id
          thumbnail(width: 200)
        }
      }
    }
  }
}
```

yields

```
{
  "data": {
    "entries": {
      "data": [
        {
          "image": {
            "id": "assets::20210409232458.jpg",
            "thumbnail": "http://absolute.url/to/thumbnail.jpg"
          }
        }
      ]
    }
  }
}
```

#### Query multiple thumbnails

[](#query-multiple-thumbnails)

Use GraphQL aliases to query multiple thumbnails:

```
query MyQuery {
  entries(collection: "pages") {
    data {
      ... on Entry_Pages_Pages {
        image {
          id
          thumbnailSmall: thumbnail(width: 100)
          thumbnailMedium: thumbnail(width: 250)
          thumbnailLarge: thumbnail(width: 500)
          thumbnailSquare: thumbnail(width: 500, height: 200, fit: "crop")
        }
      }
    }
  }
}
```

yields

```
{
  "data": {
    "entries": {
      "data": [
        {
          "image": {
            "id": "assets::20210409232458.jpg",
            "thumbnailSmall": "http://absolute.url/to/small/thumbnail.jpg",
            "thumbnailMedium": "http://absolute.url/to/medium/thumbnail.jpg",
            "thumbnailLarge": "http://absolute.url/to/large/thumbnail.jpg",
            "thumbnailSquare": "http://absolute.url/to/square/thumbnail.jpg"
          }
        }
      ]
    }
  }
}
```

---

License
-------

[](#license)

This project is licensed under the MIT License.

###  Health Score

28

—

LowBetter than 52% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity58

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 ~9 days

Recently: every ~3 days

Total

25

Last Release

1682d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/73345788?v=4)[le grisch](/maintainers/legrisch)[@legrisch](https://github.com/legrisch)

---

Top Contributors

[![grischaerbe](https://avatars.githubusercontent.com/u/46897060?v=4)](https://github.com/grischaerbe "grischaerbe (30 commits)")

### Embed Badge

![Health badge](/badges/legrisch-statamic-graphql-thumbnails/health.svg)

```
[![Health](https://phpackages.com/badges/legrisch-statamic-graphql-thumbnails/health.svg)](https://phpackages.com/packages/legrisch-statamic-graphql-thumbnails)
```

###  Alternatives

[statamic/seo-pro

68488.6k](/packages/statamic-seo-pro)[statamic-rad-pack/runway

Eloquently manage your database models in Statamic.

135212.4k7](/packages/statamic-rad-pack-runway)[statamic/ssg

Generate static sites with Statamic.

254319.5k](/packages/statamic-ssg)[rias/statamic-redirect

29322.9k](/packages/rias-statamic-redirect)[spatie/statamic-responsive-images

Responsive Images for Statamic

114250.6k](/packages/spatie-statamic-responsive-images)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

23100.9k12](/packages/marcorieser-statamic-livewire)

PHPackages © 2026

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