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
Wallogit.com
2017 © Pedro Peláez
craft-plugin imgix
Use Imgix with Craft 2.x
sjelfull/imgix
Use Imgix with Craft 2.x
- Monday, March 12, 2018
- by superbig
- Repository
- 2 Watchers
- 9 Stars
- 47 Installations
- PHP
- 0 Dependents
- 0 Suggesters
- 5 Forks
- 4 Open issues
- 9 Versions
- 15 % Grown
The README.md
Imgix plugin for Craft CMS
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)
Installation
To install Imgix, follow these steps:, (*4)
- Download & unzip the file and place the
imgixdirectory into yourcraft/pluginsdirectory - Install plugin in the Craft Control Panel under Settings > Plugins
- The plugin folder should be named
imgixfor Craft to see it.
Imgix works on Craft 2.4.x and Craft 2.5.x., (*5)
Configuring Imgix
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)
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:, (*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,
];
},
],
]
];
Lazy loading
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)
Imgix Roadmap
- Clean it up
- Add documentation
- Look into improving srcset/API
Imgix Changelog
1.0.0 -- 2017.04.03
- Initial release
Brought to you by Superbig, (*13)