tibemolde/placeholder-pixel

Create a base64-encoded transparent pixel of the given width and height

Placeholder Pixel plugin for Craft CMS 3.x

Create a base64-encoded transparent pixel of the given width and height, _(*1)

Pixels once generated are cached on a width * height basis to reduce load, _(*2)

Requirements

This plugin requires Craft CMS 3.0.0-RC1 or later., _(*3)

Installation

To install the plugin, follow these instructions., _(*4)

1. Open your terminal and go to your Craft project:, _(*5)

   cd /path/to/project

2. Then tell Composer to load the plugin:, _(*6)

   composer require tibemolde/placeholder-pixel

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Placeholder Pixel., _(*7)

Placeholder Pixel Overview

Create a base64-encoded transparent pixel of the given width and height, _(*8)

Configuring Placeholder Pixel

No configuration is needed outside of runtime-options, _(*9)

Using Placeholder Pixel

Base usage:, _(*10)

craft.placeholderPixel.get(options)

Default options:, _(*11)

{
    width       : 1,
    height      : 1,
    aspectRatio : {
        w: 16,
        h: 10
    }
}    

Examples:, _(*12)

1. 1 x 1 pixel:, _(*13)

   <img src="{{ craft.placeholderPixel.get }}" alt="">

2. Pixel with two specific dimensions:, _(*14)

   <img src="{{ craft.placeholderPixel.get({width: 64, height: 64}) }}" alt="">

3. Pixel with one specific dimension and default aspect-ratio:, _(*15)

   <img src="{{ craft.placeholderPixel.get({width: 1024}) }}" alt="">

4. Pixel with one specific dimension and specific aspect-ratio:, _(*16)

   <img src="{{ craft.placeholderPixel.get({width: 1024, aspectRatio: {w: 5, h: 4}}) }}" alt="">

Placeholder Pixel Roadmap

Some things to do, and ideas for potential features:, _(*17)

• Make it better, somehow? :o

Brought to you by TIBE Molde, _(*18)