PHPackages                             amazeelabs/silverback\_cloudinary - 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. [Image & Media](/categories/media)
4. /
5. amazeelabs/silverback\_cloudinary

ActiveDrupal-module[Image & Media](/categories/media)

amazeelabs/silverback\_cloudinary
=================================

A module that creates a graphql field to expose cloudinary image urls based on a config input.

1.4.6(1y ago)014.3k↓33.3%[1 PRs](https://github.com/AmazeeLabs/silverback_cloudinary/pulls)GPL-2.0+PHP

Since Feb 24Pushed 1y ago3 watchersCompare

[ Source](https://github.com/AmazeeLabs/silverback_cloudinary)[ Packagist](https://packagist.org/packages/amazeelabs/silverback_cloudinary)[ Docs](https://silverback.netlify.app)[ RSS](/packages/amazeelabs-silverback-cloudinary/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (16)Used By (0)

Silverback Cloudinary
=====================

[](#silverback-cloudinary)

This module provides a graphql data producer that can be used to load (responsive) images using the [Cloudinary](https://cloudinary.com/) service.

The data producer takes as parameters the original image url, and optionally the width, height, sizes and a arbitrary cloudinary transformation string and produces a json encoded string containing the html properties of the image (src, width, height, sizes, srcset).

```
type Page {
  heroImage(
    width: Int
    height: Int
    sizes: [[Int!]!]
    transform: String
  ): String
}
```

You can use the data producer like that:

```
  addResolver('Page.heroImage',
    $builder->compose(
      // ...any other calls to data producers or callbacks that will return a string (image url), for example:
      //$builder->callback(function ($value) {
      //  return 'http://www.example.com/demo.jpg';
      //}),
      $builder->produce('responsive_image')
        ->map('image', $builder->fromParent())
        ->map('width', $builder->fromArgument('width'))
        ->map('height', $builder->fromArgument('height'))
        ->map('sizes', $builder->fromArgument('sizes'))
        ->map('transform', $builder->fromArgument('transform'))
      )
    )
  );
```

When no width is supplied, the returned data will just consist of the original image url, encoded as json

Then you can query data like this:

```
fragment Hero on Page {
  heroImage(
    # Display a 1600/800 header image by default.
    width: 1600
    height: 800
    sizes: [
      # For screens smaller than 800px, scale down to 780px width.
      [800, 780]
    ]
    transform: "co_rgb:000000,e_colorize:60"
  )
}
```

and the response you get should contain all the data needed for you to build the necessary tags for displaying the image.

Apart from the data producer, there is also a directive called *responsiveImage*which you can use directly in the graphql schema. So the above code could become:

```
fragment Hero on Page {
  heroImage(
    # Display a 1600/800 header image by default.
    width: 1600
    height: 800
    sizes: [
      # For screens smaller than 800px, scale down to 780px width.
      [800, 780]
    ]
    transform: "co_rgb:000000,e_colorize:60"
  )
    @responsiveImage(
      width: "$width"
      height: "$height"
      sizes: "$sizes"
      transform: "$transform"
    )
}
```

Other parts:

- [Gatsby plugin](../../../npm/@amazeelabs/gatsby-silverback-cloudinary)

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

[](#installation)

Drupal:

- `composer require amazeelabs/silverback_cloudinary`
- Make sure you have the CLOUDINARY\_URL env variable set as instructed on the [Cloudinary dashboard](https://console.cloudinary.com/console) (testing credentials: CLOUDINARY\_URL=cloudinary://219736568324247:PsDMMn1fMdm2lj9TlJMICX25KEA@ddj1ybv54)
- `drush en silverback_cloudinary`

Gatsby:

- `yarn add @amazeelabs/gatsby-silverback-cloudinary`
- Make sure you have the following env variables set: *CLOUDINARY\_API\_SECRET*, *CLOUDINARY\_API\_KEY*, *CLOUDINARY\_CLOUDNAME*
- in gatsby-config.ts , add the plugin like this (**very important**: after the *@amazeelabs/gatsby-source-silverback* plugin)

```
{
  resolve: '@amazeelabs/gatsby-silverback-cloudinary';
}
```

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance48

Moderate activity, may be stable

Popularity24

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity53

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

Recently: every ~140 days

Total

14

Last Release

388d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/501415?v=4)[Philipp Melab](/maintainers/pmelab)[@pmelab](https://github.com/pmelab)

---

Top Contributors

[![pmelab](https://avatars.githubusercontent.com/u/501415?v=4)](https://github.com/pmelab "pmelab (1 commits)")

### Embed Badge

![Health badge](/badges/amazeelabs-silverback-cloudinary/health.svg)

```
[![Health](https://phpackages.com/badges/amazeelabs-silverback-cloudinary/health.svg)](https://phpackages.com/packages/amazeelabs-silverback-cloudinary)
```

###  Alternatives

[goat1000/svggraph

Generates SVG graphs

132849.6k3](/packages/goat1000-svggraph)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[contao/image

Contao image library

131.7M9](/packages/contao-image)[intervention/image-driver-vips

libvips driver for Intervention Image

4495.5k6](/packages/intervention-image-driver-vips)

PHPackages © 2026

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