Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Client for Pupiq

It's designated to be integrated in ATK14 applications - i.e. applications powered by ATK14 Framework.


Just use the Composer:

cd path/to/your/atk14/project/
composer require atk14/pupiq-client

ln -s ../../vendor/atk14/pupiq-client/src/app/fields/pupiq_attachment_field.php app/fields/pupiq_attachment_field.php
ln -s ../../vendor/atk14/pupiq-client/src/app/widgets/pupiq_attachment_input.php app/widgets/pupiq_attachment_input.php
ln -s ../../vendor/atk14/pupiq-client/src/app/fields/pupiq_image_field.php app/fields/pupiq_image_field.php
ln -s ../../vendor/atk14/pupiq-client/src/app/widgets/pupiq_image_input.php app/widgets/pupiq_image_input.php
ln -s ../../vendor/atk14/pupiq-client/src/app/helpers/modifier.img_url.php app/helpers/modifier.img_url.php
ln -s ../../vendor/atk14/pupiq-client/src/app/helpers/modifier.img_attrs.php app/helpers/modifier.img_attrs.php
ln -s ../../vendor/atk14/pupiq-client/src/app/helpers/modifier.img_height.php app/helpers/modifier.img_height.php
ln -s ../../vendor/atk14/pupiq-client/src/app/helpers/modifier.img_width.php app/helpers/modifier.img_width.php
ln -s ../../vendor/atk14/pupiq-client/src/app/helpers/modifier.img_color.php app/helpers/modifier.img_color.php
ln -s ../../vendor/atk14/pupiq-client/src/app/helpers/modifier.pupiq_img.php app/helpers/modifier.pupiq_img.php


Write your PUPIQ API KEY into config/settings.php


Optionally the following constants can be defined:


Usage in templates

Consider an image in the original resolution 800x600. In the string variable $img there is URL to the image.

To preserve aspect ratio:
{!$img|pupiq_img:"80"} {* 80x60 *}
{!$img|pupiq_img:"x30"} {* 40x30 *}
{!$img|pupiq_img:"80x80"} {* 80x60 *}

To crop the image:
{!$img|pupiq_img:"!80x80"} {* 80x80 *}
{!$img|pupiq_img:"80x80xcrop"} {* 80x80 *}

Top crop image to the top or bottom line:
{!$img|pupiq_img:"80x80xcrop,top"} {* 80x80 *}
{!$img|pupiq_img:"80x80xcrop,bottom"} {* 80x80 *}

To preserve aspect ratio and fill the background size with a specific colour:
{!$img|pupiq_img:"80x80x#ffffff"} {* 80x80, the image is not cropped *}

To preserve aspect ratio and use transparent background:
{!$img|pupiq_img:"80x80xtransparent"} {* 80x80, the image is not cropped *}

Keep in mind that transparent background works only on PNG images.

Transparent background can be specified with a fallback background colour for JPG images:
{!$img|pupiq_img:"80x80xtransparent_or_#ffffff"} {* 80x80, the image is not cropped *}

To add some attributes to img tag:
{!$img|pupiq_img:"80x80,enable_enlargement":"class='image-icon',title='Nice icon',data-clickable"}

To set a specific format:

To add some attributes prepared as array (got from a controller for example):

class SomeController extends ApplicationController {
    $this->tpl_data["image_attributes_array"] = array(
        "class" => "image-icon",
        "title" => "Nice icon",
        "data-clickable" => true


To magnify:
{!$img|pupiq_img:"1600x1600"} {* 800x600, i.e. there is no magnification by default *}
{!$img|pupiq_img:"1600x1600,enable_enlargement"} {* 1600x1200 *}

To render a <img> tag by hand:
<img src="{$img|img_url:"!80x80"}" width="80" height="80" alt="a nice butterfly">
<img {!$img|img_attrs:"80x80"} alt="a nice butterfly">

To determine image width and height:
Width is {$img|img_width:"80x80"} pixels
Height is {$img|img_height:"80x80"} pixels

Detecting dominant colours

Helper img_color returns dominant colour in the given image.


Name of the colour can be specified in the optional 2nd parameter.

Possible names are:

  • vibrant

  • light_vibrant

  • dark_vibrant

  • muted

  • light_muted

  • dark_muted


In some special cases the requested color may not be returned.


It may be useful to specify multiple colors in the desired order.

{$img|img_color:"light_vibrant or light_muted or muted"|desired:"#FFFFFF"}


At first you need to create one or more watermark definitions at address

The default watermark should be named "default". When you didn't mention the name of the watermark, "default" is used.

{!$img|pupiq_img:"600x600xcrop,watermark"} {* default *}
{!$img|pupiq_img:"600x600xcrop,watermark=default"} {* also default *}
{!$img|pupiq_img:"600x600xcrop,watermark=logo"} {* watermark definition named logo is used *}

Set up local proxy

With local proxy, images uploaded to the Pupiq are being cached and served from your server.

Here you can find guides how to set up a local proxy in your application.

cd path/to/your/atk14/project/
mkdir i a
chmod 777 i a
ln -s ../vendor/atk14/pupiq-client/src/i/error.php i/error.php
ln -s ../vendor/atk14/pupiq-client/src/i/.htaccess i/.htaccess
ln -s ../vendor/atk14/pupiq-client/src/a/error.php a/error.php
ln -s ../vendor/atk14/pupiq-client/src/a/.htaccess a/.htaccess

Add following lines to .gitignore:


Prevent dispatcher.php to handle requests starting with /i/ or /a/ by adding these lines before RewriteRule (.*) dispatcher.php [L]

RewriteCond %{REQUEST_URI} !^\/i\/
RewriteCond %{REQUEST_URI} !^\/a\/

So the given part of the .htaccess may look like:

RewriteCond %{REQUEST_URI} ^\/
RewriteCond %{REQUEST_URI} !^\/public\/
RewriteCond %{REQUEST_URI} !^\/server-status\/
RewriteCond %{REQUEST_URI} !^\/server-info\/
RewriteCond %{REQUEST_URI} !^\/i\/
RewriteCond %{REQUEST_URI} !^\/a\/
RewriteRule (.*) dispatcher.php [L]

Define constant PUPIQ_PROXY_HOSTNAME in config/settings.php:



Pupiq Client is free software distributed under the terms of the MIT license


Pupiq client for ATK14 applications




You can’t perform that action at this time.