{"id":24499688,"url":"https://github.com/codewithkyle/craft-jitter","last_synced_at":"2025-07-27T12:35:19.552Z","repository":{"id":43768432,"uuid":"294982998","full_name":"codewithkyle/craft-jitter","owner":"codewithkyle","description":"Jitter: the just in time image transformer for Craft CMS.","archived":false,"fork":false,"pushed_at":"2024-10-05T14:40:36.000Z","size":131,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T01:39:30.789Z","etag":null,"topics":["craftcms","craftcms-plugin","image-manipulation","lazy-loading","lazysizes"],"latest_commit_sha":null,"homepage":"https://plugins.craftcms.com/jitter","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codewithkyle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-12T16:31:58.000Z","updated_at":"2024-10-05T14:40:40.000Z","dependencies_parsed_at":"2022-09-14T20:52:01.842Z","dependency_job_id":"fbe481ef-de84-49cf-ad46-eff01f1f162e","html_url":"https://github.com/codewithkyle/craft-jitter","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fcraft-jitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fcraft-jitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fcraft-jitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fcraft-jitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithkyle","download_url":"https://codeload.github.com/codewithkyle/craft-jitter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248827114,"owners_count":21167822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craftcms","craftcms-plugin","image-manipulation","lazy-loading","lazysizes"],"created_at":"2025-01-21T22:15:17.840Z","updated_at":"2025-04-14T05:33:01.551Z","avatar_url":"https://github.com/codewithkyle.png","language":"PHP","readme":"# Just In Time Image Transformations\n\nJitter is a just in time image transformation plugin for Craft CMS. The API is based on [Imgix](https://docs.imgix.com/apis/url). This plugin was created to be a simple and free alternative to an Imgix style service. It **does not and will not** have all the bells and whistles that other paid services/plugins offer. If you need something a bit more advanced besides basic image transformations I suggest you pay for [Imgix](https://www.imgix.com/pricing) or select a different [Craft Plugin](https://plugins.craftcms.com/categories/assets).\n\n## Requirements\n\nThis plugin requires [ImageMagick](https://imagemagick.org/index.php) and the following versions of PHP and Craft CMS:\n\n- Craft CMS 5 with PHP 8 (Jitter v2.0, active)\n- Craft CMS 4 with PHP 8 (Jitter v2.0, maintenance)\n- Craft CMS 3 with PHP 7.2+ (Jitter v1.x, unsupported)\n\n## Installation\n\nTo install the plugin, follow these instructions.\n\n1. Open your terminal and go to your Craft project:\n\n        cd /path/to/project\n\n2. Then tell Composer to load the plugin:\n\n        composer require codewithkyle/jitter\n\n3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Jitter.\n\n## Configuring Jitter\n\nJitter can be configured to use S3-compatible object storage solutions by adding a `jitter.php` file to your projects `config/` directory. Transformed images will be stored in the storage solution but will still be served from your web server. If you would like to serve images from a CDN read the section below.\n\n```php\n\u003c?php\n\nreturn [\n    \"accessKey\" =\u003e getenv(\"PUBLIC_KEY\"),\n    \"secretAccessKey\" =\u003e getenv(\"PRIVATE_KEY\"),\n    \"region\" =\u003e \"region-name\",\n    \"bucket\" =\u003e \"bucket-name\",\n    \"folder\" =\u003e \"transformed-images\",\n    \"endpoint\" =\u003e getenv(\"ENDPOINT_URL\"),\n    \"acl\" =\u003e \"private\", // supports \"private\" or \"public-read\"\n];\n```\n\n\u003e **Note**: the `endpoint` and `acl` config values are optional. You will only need to use `endpoint` when using an S3-compatible alternative S3 cloud object storage solution (like Digital Ocean Spaces).\n\n## Using a Content Delivery Network (CDN)\n\nJitter can be configured to use CDN URLs. The `cdn` config value should be the CDN's origin URL. Jitter's `url()` and `srcset()` functions will automatically switch from using the `/jitter/` URL to the CDN URL over time as the image transformations are performed.\n\n```php\n\u003c?php\n\nreturn [\n    \"accessKey\" =\u003e getenv(\"PUBLIC_KEY\"),\n    \"secretAccessKey\" =\u003e getenv(\"PRIVATE_KEY\"),\n    \"region\" =\u003e \"region-name\",\n    \"bucket\" =\u003e \"bucket-name\",\n    \"folder\" =\u003e \"transformed-images\",\n    \"endpoint\" =\u003e getenv(\"ENDPOINT_URL\"),\n    \"acl\" =\u003e \"public-read\",\n    \"cdn\" =\u003e \"https://demo.cdn.example.com/\"\n];\n```\n\n\u003e **Note**: if you use Craft's template caching or a 3rd party HTML caching service (like Cloudflare's Edge Cache) `/jitter/` image URLs may be cached when a CDN URL is available. We do not recommend disabling your caching systems, however, you may want to consider using a lower TTL to ensure the CDN URLs propagate sooner rather than later.\n\n## Using Jitter\n\nImage transformations via the API:\n\n```\n/jitter/v1/transform?id=1\u0026w=768\u0026ar=16:9\n```\n\nImage transformations via Twig:\n\n```twig\n{# This will transform the image when the template renders. #}\n{# This can cause site-wide performance issues depending on how many times this method is used (per template) and how much RAM is available. #}\n{% set transformedImageUrl = craft.jitter.transformImage(entry.image[0], { w: 150, ar: \"1:1\", m: \"fit\", fm: \"gif\", q: 10 }) %}\n\n{# For a faster template render build the API URL instead #}\n{# If you have configured Jitter to use CDN URLs this value will swap to the CDN URL after the image has been transformed #}\n{% set transformedImageUrl = craft.jitter.url(entry.image[0], { w: 150, ar: \"1:1\", m: \"fit\", fm: \"gif\", q: 10 }) %}\n\n\u003cimg \n    src=\"{{ transformedImageUrl }}\" \n    srcset=\"{{ craft.jitter.srcset(entry.image[0], [\n        { w: 300, h: 250, },\n        { w: 768, ar: \"16:9\", },\n        { w: 1024, ar: \"16:9\", },\n    ]) }}\" \n    loading=\"lazy\"\n    width=\"1024\"\n/\u003e\n```\n\nImage transformations via PHP:\n\n```php\n$jitter = new \\codewithkyle\\jitter\\services\\Transform();\n$src = $jitter-\u003egenerateURL([\n    \"id\" =\u003e $image-\u003eid,\n    \"w\" =\u003e 300,\n    \"ar\" =\u003e \"1:1\",\n]);\n$srcset = $jitter-\u003egenerateSourceSet($image, [\n    [\n        \"w\" =\u003e 300,\n        \"h\" =\u003e 250,\n    ],\n    [\n        \"w\" =\u003e 768,\n        \"ar\" =\u003e \"16:9\",\n    ],\n    [\n        \"w\" =\u003e 1024,\n        \"ar\" =\u003e \"16:9\",\n    ],\n]);\n```\n\n## Transformation parameters\n\n| Parameter     | Default                    | Description                     | Valid options                                  |\n| ------------- | -------------------------- | ------------------------------- | ---------------------------------------------- |\n| `id`          | `null`                     | the image asset id              | `int`                                          |\n| `path`        | `null`                     | the image file path             | `string`                                       |\n| `w`           | base image width           | desired image width             | `int`                                          |\n| `h`           | base image height          | desired image height            | `int`                                          |\n| `ar`          | base image aspect ratio    | desired aspect ratio            | `int`:`int`                                    |\n| `fm`          | `auto`                     | desired image format            | `jpg`, `png`, `gif`, `auto`                    |\n| `m`           | `clip`                     | how the image should be resized | `crop`, `clip`, `fit`, `letterbox`, `croponly` |\n| `q`           | `80`                       | desired image quality           | `0` to `100`                                   |\n| `bg`          | `ffffff`                   | letterbox background color      | `hex`                                          |\n| `fp-x`        | `0.5` or asset focal point | horizontal focus point          | `0` to `1`                                     |\n| `fp-y`        | `0.5` or asset focal point | vertical focus point            | `0` to `1`                                     |\n\nThe `auto` format type will return a `webp` image when the server can generate the format and the client's browser supports the format.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fcraft-jitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithkyle%2Fcraft-jitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fcraft-jitter/lists"}