PHPackages                             sjelfull/imgix - 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. sjelfull/imgix

AbandonedArchivedCraft-plugin[Image & Media](/categories/media)

sjelfull/imgix
==============

Use Imgix with Craft 2.x

1.0.7(8y ago)11765PHP

Since Apr 3Pushed 3y ago1 watchersCompare

[ Source](https://github.com/sjelfull/imgix)[ Packagist](https://packagist.org/packages/sjelfull/imgix)[ RSS](/packages/sjelfull-imgix/feed)WikiDiscussions master Synced 2w ago

READMEChangelog (8)Dependencies (2)Versions (9)Used By (0)

Imgix plugin for Craft CMS
==========================

[](#imgix-plugin-for-craft-cms)

> This is the Craft 2 version, and is deprecated. The Craft 3+ version is available here:

Imgix is awesome

[![Screenshot](resources/icon.png)](resources/icon.png)

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

[](#installation)

To install Imgix, follow these steps:

1. Download & unzip the file and place the `imgix` directory into your `craft/plugins` directory
2. Install plugin in the Craft Control Panel under Settings > Plugins
3. The plugin folder should be named `imgix` for Craft to see it.

Imgix works on Craft 2.4.x and Craft 2.5.x.

Configuring Imgix
-----------------

[](#configuring-imgix)

Copy `config.php` into Crafts `config` folder and rename it to `imgix.php`.

Then map your Asset Source handle to your Imgix domain, according to the example.

This 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.

To purge images automatically on deletion/save or manually, you have to add your API key to the config file.

Using Imgix
-----------

[](#using-imgix)

```
{% set transforms = [
    {
        width: 400,
        height: 300
    },
    {
        width: 940,
        height: 520
    },
    {
        width: 1400,
    },
] %}

{% set defaultOptions = {
    sharp: 10
} %}

{% set firstImage = craft.imgix.transformImage( asset, { width: 400, height: 350 }) %}
{% set secondImage = craft.imgix.transformImage( asset, transforms) %}
{% set thirdImage = craft.imgix.transformImage( asset, { width: 1920, ratio: 16/9}) %}
{% set fourthImage = craft.imgix.transformImage( asset, transforms, defaultOptions) }

{# Image tag #}
{{ firstImage.img() }}

{# Get url for the first image #}
{{ firstImage.getUrl() }}

{# Image tag w/ srcset + tag attributes #}
{{ secondImage.srcset({ width: 700 }) }}

{# Image tag w/ srcset + default options for each transform #}
{{ fourthImage.srcset( {} ) }}

{# Image tag w/ lazyload #}
{{ firstImage.img({ lazyLoad: true }) }}

{# Image tag w/ srcset + lazyLoad #}
{{ secondImage.srcset({ lazyLoad: true }) }}

{# See transformed results #}
{{ dump(secondImage.transformed) }}
```

To use with Element API, you can call the service directly:

```