dev-master
9999999-devUse Imgix with Craft 2.x
The Requires
1.0.7
1.0.7.0Use Imgix with Craft 2.x
The Requires
1.0.6
1.0.6.0Use Imgix with Craft 2.x
The Requires
Use Imgix with Craft 2.x
This is the Craft 2 version, and is deprecated. The Craft 3+ version is available here: https://github.com/sjelfull/craft3-imgix, (*1)
Imgix is awesome, (*2)
, (*3)
To install Imgix, follow these steps:, (*4)
imgix
directory into your craft/plugins
directoryimgix
for Craft to see it.Imgix works on Craft 2.4.x and Craft 2.5.x., (*5)
Copy config.php
into Crafts config
folder and rename it to imgix.php
., (*6)
Then map your Asset Source handle to your Imgix domain, according to the example., (*7)
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., (*8)
To purge images automatically on deletion/save or manually, you have to add your API key to the config file., (*9)
{% 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:, (*10)
<?php namespace Craft; return [ 'endpoints' => [ 'news.json' => [ 'elementType' => ElementType::Entry, 'criteria' => ['section' => 'news'], 'transformer' => function(EntryModel $entry) { $asset = $entry->featuredImage->first(); $featuredImage = craft()->imgix->transformImage( $asset, [ 'width' => 400, 'height' => 350 ]); return [ 'title' => $entry->title, 'url' => $entry->url, 'jsonUrl' => UrlHelper::getUrl("news/{$entry->id}.json"), 'summary' => $entry->summary, 'featuredImage' => $featuredImage, ]; }, ], ] ];
To replace src
and srcset
with data-src
and data-srcset
for lazy loading, add the lazyLoad
attribute to to transformImage()
., (*11)
If you need to prefix with something other than data-
, you can set the configuration value lazyLoadPrefix
in craft/config/imgix.php
., (*12)
Brought to you by Superbig, (*13)
Use Imgix with Craft 2.x
Use Imgix with Craft 2.x
Use Imgix with Craft 2.x