{"id":16798911,"url":"https://github.com/sjelfull/craft3-imgix","last_synced_at":"2025-03-17T03:31:04.561Z","repository":{"id":48265102,"uuid":"108827796","full_name":"sjelfull/craft3-imgix","owner":"sjelfull","description":"Use Imgix with Craft","archived":false,"fork":false,"pushed_at":"2022-11-09T12:25:58.000Z","size":82,"stargazers_count":13,"open_issues_count":10,"forks_count":7,"subscribers_count":2,"default_branch":"craft-4","last_synced_at":"2024-04-23T14:42:25.488Z","etag":null,"topics":["craft","craft-plugin","craft3","craftcms","craftcms-plugin"],"latest_commit_sha":null,"homepage":"https://superbig.co","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/sjelfull.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":"2017-10-30T09:17:56.000Z","updated_at":"2022-12-23T08:14:13.000Z","dependencies_parsed_at":"2023-01-21T10:01:23.196Z","dependency_job_id":null,"html_url":"https://github.com/sjelfull/craft3-imgix","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sjelfull%2Fcraft3-imgix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sjelfull%2Fcraft3-imgix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sjelfull%2Fcraft3-imgix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sjelfull%2Fcraft3-imgix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sjelfull","download_url":"https://codeload.github.com/sjelfull/craft3-imgix/tar.gz/refs/heads/craft-4","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841204,"owners_count":20356441,"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":["craft","craft-plugin","craft3","craftcms","craftcms-plugin"],"created_at":"2024-10-13T09:27:15.716Z","updated_at":"2025-03-17T03:31:04.298Z","avatar_url":"https://github.com/sjelfull.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- ix-docs-ignore --\u003e\n# imgix plugin for Craft CMS 3.x\n\nUse imgix with Craft\n\n![Screenshot](resources/img/plugin-icon.png)\n\n---\n\u003c!-- /ix-docs-ignore --\u003e\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Configuring imgix](#configuring-imgix)\n- [Using imgix](#using-imgix)\n- [Lazy Loading](#lazy-loading)\n- [Roadmap](#roadmap)\n\n## Requirements\n\nThis plugin requires Craft CMS 3.0.0-beta.23 or later.\n\n## Installation\n\nTo install the plugin, follow these instructions.\n\n1. Open your terminal and go to your Craft project:\n\n    ```\n    cd /path/to/project\n    ```\n\n2. Then tell Composer to load the plugin:\n\n    ```\n    composer require superbig/craft3-imgix\n    ```\n\n3. In the Control Panel, go to Settings → Plugins and click the “Install” button for imgix.\n\n## Configuring imgix\n\nCopy `config.php` into Crafts `config` folder and rename it to `imgix.php`.\n\nThen map your Asset Source handle to your imgix domain, according to the example.\n\nThis plugin will lookup the Asset image's source handle, and figure out which imgix domain to use. If a URL string is passed, it will use the first domain in the config file.\n\n```php\n\u003c?php\n   return [\n       // imgix API key\n       'apiKey'         =\u003e '',\n\n       // Volume handles mapped to imgix domains\n       'imgixDomains'   =\u003e [],\n\n       // imgix signed URLs token\n       'imgixSignedToken' =\u003e '',\n\n       // Lazy load attribute prefix\n       'lazyLoadPrefix' =\u003e '',\n   ];\n```\n\n## Using imgix\n\n```twig\n{% set transforms = [\n    {\n        width: 400,\n        height: 300\n    },\n    {\n        width: 940,\n        height: 520\n    },\n    {\n        width: 1400,\n    },\n] %}\n\n{% set defaultOptions = {\n    sharp: 10\n} %}\n\n{% set firstImage = craft.imgix.transformImage( asset, { width: 400, height: 350 }) %}\n{% set secondImage = craft.imgix.transformImage( asset, transforms) %}\n{% set thirdImage = craft.imgix.transformImage( asset, { width: 1920, ratio: 16/9}) %}\n{% set fourthImage = craft.imgix.transformImage( asset, transforms, defaultOptions) }\n\n{# Image tag #}\n{{ firstImage.img() }}\n\n{# Get url for the first image #}\n{{ firstImage.getUrl() }}\n\n{# Image tag w/ srcset + tag attributes #}\n{{ secondImage.srcset({ width: 700, alt: 'your alt text here' }) }}\n\n{# Image tag w/ srcset + default options for each transform #}\n{{ fourthImage.srcset( {} ) }}\n\n{# Image tag w/ lazyload #}\n{{ firstImage.img({ lazyLoad: true }) }}\n\n{# Image tag w/ srcset + lazyLoad #}\n{{ secondImage.srcset({ lazyLoad: true }) }}\n\n{# See transformed results #}\n{{ dump(secondImage.transformed) }}\n```\n\nTo use with Element API, you can call the service directly:\n\n```php\n\u003c?php\n\nuse craft\\elements\\Entry;\nuse craft\\helpers\\UrlHelper;\nuse superbig\\imgix\\Imgix;\n\nreturn [\n    'endpoints' =\u003e [\n        'news.json' =\u003e [\n            'elementType' =\u003e Entry::class,\n            'criteria' =\u003e ['section' =\u003e 'news'],\n            'transformer' =\u003e function(Entry $entry) {\n                $asset = $entry-\u003efeaturedImage-\u003eone();\n                $featuredImage = Imgix::$plugin-\u003eimgixService-\u003etransformImage( $asset, [ 'width' =\u003e 400, 'height' =\u003e 350 ]);\n                \n                return [\n                    'title' =\u003e $entry-\u003etitle,\n                    'url' =\u003e $entry-\u003eurl,\n                    'jsonUrl' =\u003e UrlHelper::url(\"news/{$entry-\u003eid}.json\"),\n                    'summary' =\u003e $entry-\u003esummary,\n                    'featuredImage' =\u003e $featuredImage,\n                ];\n            },\n        ],\n    ]\n];\n```\n\n## Lazy Loading\n\nTo replace `src` and `srcset` with `data-src` and `data-srcset` for javascript-based lazy loading, add the `lazyLoad` attribute to `transformImage()`.\n\nIf you need to prefix with something other than `data-`, you can set the configuration value `lazyLoadPrefix` in `craft/config/imgix.php`.\n\nAlternatively, you may use the native loading attribute `loading=\"lazy\"` on your image tag as in this example: `{{ image.srcset({ loading: 'lazy' }) }}`.\n\n## Roadmap\n\n* Look into improving srcset/API\n* Look into built-in image editor and focal points \n* Improve docs\n\nBrought to you by [Superbig](https://superbig.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsjelfull%2Fcraft3-imgix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsjelfull%2Fcraft3-imgix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsjelfull%2Fcraft3-imgix/lists"}