Pipit Imgix

Pipit Imgix is a Perch template filter that enables you to easily manipulate and optimise your images on the fly using Imgix. Imgix also serves your images with a worldwide CDN optimized for visual content.

Installation

include('filters/PipitTemplateFilter_imgix.class.php');

Imgix setup

Follow Imgix’s setup guide and set up your Source.

If you are storing your images on your server along with your Perch installation (i.e. not in cloud storage), create a web folder source and use your root domain as the base URL.

Perch configuration

Enable template filters in your Perch config file config.php:

define('PERCH_TEMPLATE_FILTERS', true);

Add your Imgix source subdomain to your config. If your subdomain is grabapipit.imgix.net, you would add:

define('PIPIT_IMGIX_SUBDOMAIN', 'grabapipit');

Usage

Use filter="imgix" on your image field tags to serve the image via Imgix:

<perch:content id="image" type="image" filter="imgix">

Adding parameters

Refer to Imgix’s documentation for what parameters you can use. You can also use their Sandbox tool to see them in action.

You can add Imgix parameters in 2 ways:

  1. Use the opts attribute and add them all together as if you were to add them to a URL:
<perch:content id="image" type="image" filter="imgix" opts="auto=format&q=80&w=800">
  1. Or you can add each parameter as a tag attribute prefixed with imgix-:
<perch:content id="image" type="image" filter="imgix" imgix-auto="format" imgix-q="80" imgix-w="800">

Options

You can specify a subdomain other than the default PIPIT_IMGIX_SUBDOMAIN with the subdomain attribute:

<perch:content id="image" type="image" filter="imgix" opts="auto=format&q=80&w=800" subdomain="grabapipit">
link