imgix / imgix-statamic

An add-on for integrating imgix into Statamic sites

[DEPRECATED]

This project has reached the end of its development. Feel free to browse the code, but please use other solutions for integrating imgix into your Statmic projects.

imgix-statamic is an add-on for integrating imgix into Statamic sites.

---

• Installation
• Usage
  • imgix:image_tag
  • imgix:image_url
  • imgix:responsive_image_tag
  • imgix:picture_tag
    • Pass-through Attributes
• Meta
• License

Please note that the base branch of imgix-statamic is designed for Statamic v2.x and that we are no longer actively developing for Statamic v1.x. If you are using Statmic v1.x, take a peek at the version 1 branch.

Installation

1. Copy site/addons/imgix into your Statamic installation's site/addons folder. Source can be downloaded from the Statamic Marketplace.
2. Copy site/settings/addons/imgix.yaml into your Statamic installation's site/settings/addons folder.
3. Configure imgix.yaml:
   • source (Required): The imgix source domain to grab images from.
   • secure_url_token: Add this if you want to output signed (secure) image URLs.
   • use_https: Whether to use HTTPS URLs.
   • responsive_resolutions: The device pixel ratios used to generate srcset attributes.
4. Run please addons:refresh to install dependencies.

Usage

After you've installed and configured imgix-statamic, you can start using it in your Statamic templates! You can use any available imgix parameter, including face detection, automatic format detection (e.g. WebP), and more. Here are some examples to get you started:

imgix:image_tag

imgix:image_tag allows users to generate <img> elements quickly with the option of appending imgix parameters to the image source.

{{ imgix:image_tag path="dogs.png" w="200" rot="10" alt="Some dogs!" }}

Will output the following HTML:

<img src="https://your-source.imgix.net/dogs.png?w=200&rot=10" alt="Some dogs!">

imgix:image_url

imgix:image_url allows users to construct image URLs quickly with the option of appending imgix parameters.

{{ imgix:image_url path="dogs.png" w="200" }}

Will output the following URL:

https://your-source.imgix.net/dogs.png?w=200

imgix:responsive_image_tag

imgix:responsive_image_tag will generate an img element with a filled-out srcset attribute that leans on imgix to do the hard work. It uses the configured device pixel ratios in the responsive_resolutions config variable (which defaults to [1, 2]). We talk a bit about using the srcset attribute in an application in the following blog post: “Responsive Images with srcset and imgix”.

{{ imgix:responsive_image_tag path="dogs.png" w="200" }}

Will output the following HTML:

<img srcset="https://your-source.imgix.net/dogs.png?w=200 1x,
             https://your-source.imgix.net/dogs.png?w=200&dpr=2 2x"
     src="https://your-source.imgix.net/dogs.png?w=200">

imgix:picture_tag

imgix:picture_tag will generate a <picture> element with a single source element and a fallback img element. It uses the configured device pixel ratios in the responsive_resolutions config variable (which defaults to [1, 2]).

{{ imgix:picture_tag path="dogs.png" w="200" alt="Some dogs!" }}

Will output the following HTML:

<picture>
    <source srcset="https://your-source.imgix.net/dogs.png?w=200 1x,
                    https://your-source.imgix.net/dogs.png?w=200&dpr=2 2x">
    <img src="https://your-source.imgix.net/dogs.png?w=200" alt="Some dogs!">
</picture>

Pass-through Attributes

Any imgix method that generates an img tag (image_tag, responsive_image_tag, and picture_tag) will automatically pass through the following attributes to the tag, if provided:

• alt
• longdesc
• title
• data-*
• aria-*

Meta

imgix-statamic was made by imgix. It's licensed under the BSD 2-Clause license (see the license file for more info).

License

imgix-statamic's Issues

v3 support

👋

Is this package (or will it be) compatible with statamic 3?

Used this plugin in a v2 project and would like to continue using it when switching to statamic 3.

Thanks

Seems to be broken in Statamic v2.5.x

FatalThrowableError in ImgixTags.php line 75:
Class 'Imgix\UrlBuilder' not found

Alternative text (alt) attributes

This does not appear to allow for alternative text attributes in either v1 or v2 for the imgix:image_tag, imgix:responsive_image_tag, and imgix:picture_tag functions.

alt, longdesc, and/or title are required by Section 508 of the Rehabilitation Act of 1973.

It'd be nice to have the ability to use data-, aria-label, and aria-labelledby attributes, too :)

For the full text of Section 508, please see the official government 508 web site.

FR: Text Overlays

So, imgix has this really cool feature where text can be put on top of an image like a watermark.

Is there maybe some way that new parameters can be added to take advantage of this? Maybe something like:

{{ imgix:image_tag
    path="{ banner_image }"
    fit="crop"
    auto="compress,format"
    w="350"
    h="200"
    alt="{ title }"
    overlay_txt="{ title }"
    overlay_fit="max"
    overlay_align="center,middle"
    overlay_lead="10"
    overlay_track="-5"
    }}

Where the overlay_ keyword can be used in place of mark and txt for these attributes:

• ~text
• markfit
• markalign
• markx
• marky
• markw
• markh
• markpad
• markscale
• txtlead
• txttrack
• txtalign
• txtclr
• txtfit
• txtfont
• txtsize
• txtshad

Right now, the regular txt="whatever" works fine with short words/phrases:

… but longer ones are not so nice:

Update for Statamic V3?

Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.

• Please search through the existing issues to see if your feature has already been discussed.
• Please take a moment to find out whether your idea fits with the scope and aims of this project.

Are there plans for this addon to be updated for Statamic V3?

Thanks!

Need more Pass-through Attributes

Looks like these aren't being passed-through:

id, class, and rel

Might be more standard-ish ones, but I just came across these.

– Chris :)

Parsing of modifiers fails

I'm trying to remove a directory from the path of my image, but the remove_left modifier fails.

{{ imgix:responsive_image_tag path="{ banner_image remove_left='/assets' }" auto="format" aria-labelledby="{ page-title }" w="1000" }}

Results in:

<img srcset="https://coeweb.imgix.net/{ banner_image remove_left='/assets' }?ixlib=php-1.1.0&w=1000& 1x,https://coeweb.imgix.net/{ banner_image remove_left='/assets' }?dpr=2&ixlib=php-1.1.0&w=1000& 2x" src="https://coeweb.imgix.net/{ banner_image remove_left='/assets' }?ixlib=php-1.1.0&w=1000&" >

Way of passing media queries through?

Is there a way of passing the sizes attribute with media queries like I see on this guide? https://docs.imgix.com/tutorials/responsive-images-srcset-imgix

As far as I can tell just the DPR resolutions?

PHP 7.2 Incompatible

Seeing errors because

ErrorException in ImgixTags.php line 24:
The each() function is deprecated. This message will be suppressed on further calls

Looks like it needs to be updated.

feat: statamic v3 support

Any plans to provide Statamic v3 support?

Error with duplicate Imgix attributes

Error message: "rawurlencode() expects parameter 1 to be string, array given"
https://gist.github.com/chris-79/4b7596d72d9d644af6d92b0dc2649b18

Template Code:

{{ imgix:image_tag path="/assets/img/homepage/cassiewrightphoto00075.jpg" w="200" rot="10" auto="format" rot="90" alt="" }}

As you can see in this bit of the error, the second rot attribute (rot="90") is causing the plugin to convert rot into an array:

'imgix_attributes' => array('w' => '200', 'rot' => array('10', '90'), 'auto' => 'format')

Granted, this was my error adding a second, duplicate attribute… palm→face

Just thought I'd throw this out there.

¯_(ツ)_/¯