Libraries
Superbig Craft Plugin
Requirements
This plugin requires Craft CMS 3.0.0-beta.23 or later.
Installation
To install the plugin, follow these instructions.
Open your terminal and go to your Craft project:
cd /path/to/project
Then tell Composer to load the plugin:
composer require superbig/craft3-imgix
In the Control Panel, go to Settings → Plugins and click the “Install” button for 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.
<?php
return [
// imgix API key
'apiKey' => '',
// Volume handles mapped to imgix domains
'imgixDomains' => [],
// imgix signed URLs token
'imgixSignedToken' => '',
// Lazy load attribute prefix
'lazyLoadPrefix' => '',
];
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() }}
{{ firstImage.getUrl() }}
{{ secondImage.srcset({ width: 700, alt: 'your alt text here' }) }}
{{ fourthImage.srcset( {} ) }}
{{ firstImage.img({ lazyLoad: true }) }}
{{ secondImage.srcset({ lazyLoad: true }) }}
{{ dump(secondImage.transformed) }}
To use with Element API, you can call the service directly:
<?php
use craft\elements\Entry;
use craft\helpers\UrlHelper;
use superbig\imgix\Imgix;
return [
'endpoints' => [
'news.json' => [
'elementType' => Entry::class,
'criteria' => ['section' => 'news'],
'transformer' => function(Entry $entry) {
$asset = $entry->featuredImage->one();
$featuredImage = Imgix::$plugin->imgixService->transformImage( $asset, [ 'width' => 400, 'height' => 350 ]);
return [
'title' => $entry->title,
'url' => $entry->url,
'jsonUrl' => UrlHelper::url("news/{$entry->id}.json"),
'summary' => $entry->summary,
'featuredImage' => $featuredImage,
];
},
],
]
];
Lazy Loading
To replace src
and srcset
with data-src
and data-srcset
for javascript-based lazy loading, add the lazyLoad
attribute to transformImage()
.
If you need to prefix with something other than data-
, you can set the configuration value lazyLoadPrefix
in craft/config/imgix.php
.
Alternatively, you may use the native loading attribute loading="lazy"
on your image tag as in this example: {{ image.srcset({ loading: 'lazy' }) }}
.
Roadmap
- Look into improving srcset/API
- Look into built-in image editor and focal points
- Improve docs
Brought to you by Superbig
More Plugins
- ContentfulbuildBrowse, search, and add assets into your content quickly and easily via the imgix Asset Manager.TypeScript 9 < 1 day ago
- Craft Image OptimizeAutomatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.PHP 234 4 months ago
- FigmaBrowse, search, and insert image assets into your Figma designs quickly and easily via the imgix Asset Manager.Invalid date
- Imager X for CraftAn image manipulation plugin for the Craft CMS that supports imgix URLsPHP 23 3 days ago
- Salesforce Commerce CloudUse this integration to insert images from imgix's Image Manager into your Salesforce Commerce Cloud websites.JavaScript 1 a year ago
- MagentoBrowse, search, and insert image assets into your storefront quickly and easily via the imgix Image Manager.JavaScript 22 a year ago
- Nuxt ImagePlug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using your imgix images.TypeScript 1062 < 1 day ago
- wp-imgixA WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix URLs for your site's imagesPHP 10 7 months ago