Custom Statamic tag wrapper for the Imgix API.

Imgix.php

<?php

namespace App\Tags;

use Imgix\UrlBuilder;
use Statamic\Tags\Tags;

class Imgix extends Tags
{
    private static $html_attributes = ['accesskey', 'align', 'alt', 'border', 'class', 'contenteditable', 'contextmenu', 'dir', 'height', 'hidden', 'id', 'lang', 'longdesc', 'sizes', 'style', 'tabindex', 'title', 'usemap', 'width'];

    /**
     * @var UrlBuilder
     */
    protected $builder;

    public function __construct()
    {
        $builder = new UrlBuilder(config('statamic.imgix.source'));
        $builder->setUseHttps(config('statamic.imgix.use_https', true));

        if ($secureURLToken = config('statamic.imgix.secure_url_token')) {
            $builder->setSignKey($secureURLToken);
        }

        $this->builder = $builder;
    }

    public function index()
    {
        return $this->buildUrl($this->categorizedAttributes());
    }

    public function imageUrl()
    {
        return $this->buildUrl($this->categorizedAttributes());
    }

    public function imageTag()
    {
        $categorized_attrs = $this->categorizedAttributes();

        return join('', [
            '<img src="',
            $this->buildUrl($categorized_attrs),
            '" ',
            $this->buildHtmlAttributes($categorized_attrs),
            '>'
        ]);
    }

    public function responsiveImageTag()
    {
        $categorized_attrs = $this->categorizedAttributes();

        return join('', [
            '<img srcset="',
            $this->buildSrcset($categorized_attrs),
            '" src="',
            $this->buildUrl($categorized_attrs),
            '" ',
            $this->buildHtmlAttributes($categorized_attrs),
            '>'
        ]);
    }

    public function pictureTag()
    {
        $categorized_attrs = $this->categorizedAttributes();

        return join('', [
            '<picture>',
            '<source srcset="',
            $this->buildSrcset($categorized_attrs),
            '">',
            '<img src="',
            $this->buildUrl($categorized_attrs),
            '" ',
            $this->buildHtmlAttributes($categorized_attrs),
            '>',
            '</picture>'
        ]);
    }

    protected function categorizedAttributes()
    {
        $attrs = $this->params->toArray();

        $categorized_attrs = [
            'path' => $attrs['path'],
            'img_attributes' => [],
            'imgix_attributes' => [],
        ];

        unset($attrs['path']);

        foreach ($attrs as $key => $val) {
            if (($val !== null && $val !== '') || $key === 'alt') {
                $is_html_attr = in_array($key, self::$html_attributes);
                $is_data_attr = strpos($key, 'data-') === 0;
                $is_aria_attr = strpos($key, 'aria-') === 0;
                if (($is_html_attr || $is_data_attr || $is_aria_attr)) {
                    $categorized_attrs['img_attributes'][$key] = $val;
                } else {
                    $categorized_attrs['imgix_attributes'][$key] = $val;
                }
            }
        }

        return $categorized_attrs;
    }

    protected function buildUrl($categorized_attrs)
    {
        return $this->builder->createURL(
            $categorized_attrs['path'],
            $categorized_attrs['imgix_attributes']
        );
    }

    protected function buildHtmlAttributes($categorized_attrs)
    {
        $img_attributes = $categorized_attrs['img_attributes'];

        $html = '';

        foreach ($img_attributes as $key => $val) {
            $html .= " $key=\"$val\"";
        }

        return $html;
    }

    protected function buildSrcset($categorized_attrs)
    {
        $srcset_values = [];
        $resolutions = config('statamic.imgix.responsive_resolutions', [1, 2]);

        foreach ($resolutions as $resolution) {
            if ($resolution != 1) {
                $categorized_attrs['imgix_attributes']['dpr'] = $resolution;
            }

            $srcset_value = $this->buildUrl($categorized_attrs) . ' ' . $resolution . 'x';

            array_push($srcset_values, $srcset_value);
        }

        return join(',', $srcset_values);
    }
}