Created
February 25, 2021 19:00
-
-
Save LoganTFox/0c344dd94a4b7ef3e460497bb516dcdd to your computer and use it in GitHub Desktop.
Custom Statamic tag wrapper for the Imgix API.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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