Skip to content

Instantly share code, notes, and snippets.

@LoganTFox

LoganTFox/Imgix.php

Created Feb 25, 2021
Embed
What would you like to do?
Custom Statamic tag wrapper for the Imgix API.
<?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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment