Learn More About Us

Latest Blog Posts

    Success Stories

    Documentation

    Setup Guide

    Featured Solutions

    Page Weight Analysis

    See how images affect your page speed

    Customers
    Solutions
    Pricing
    Developers
    Company
    Contact Us

    Libraries

    1. Documentation
    2. Libraries
    3. Superbig Craft Plugin

    Superbig Craft Plugin

    A plugin for the Craft CMS that adds full access to the imgix API for manipulating images
    PHP 8 a month ago Creator: Superbig

    Requirements

    This plugin requires Craft CMS 3.0.0-beta.23 or later.

    Installation

    To install the plugin, follow these instructions.

    1. Open your terminal and go to your Craft project:

      cd /path/to/project

    2. Then tell Composer to load the plugin:

      composer require superbig/craft3-imgix

    3. 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 }) }}


{{ 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 lazy loading, add the lazyLoad attribute to to transformImage().

    If you need to prefix with something other than data-, you can set the configuration value lazyLoadPrefix in craft/config/imgix.php.

    Roadmap

    • Look into improving srcset/API
    • Look into built-in image editor and focal points
    • Improve docs

    Brought to you by Superbig

    More Plugins