Example: price tag

Output

Code

<?php

require 'vendor/autoload.php';

use Kehet\ImagickLayoutEngine\Containers\ColumnContainer;
use Kehet\ImagickLayoutEngine\Containers\RowContainer;
use Kehet\ImagickLayoutEngine\Enums\Gravity;
use Kehet\ImagickLayoutEngine\Enums\ImageMode;
use Kehet\ImagickLayoutEngine\Items\Image;
use Kehet\ImagickLayoutEngine\Items\Text;

$width = 500;
$height = 250;

$imagick = new Imagick;
$imagick->newImage($width, $height, new ImagickPixel('white'));

$root = new RowContainer();

// Left side

$column1 = new ColumnContainer();
$column1->setMarginRight(10);

$redAndItalic = draw(fill: 'red');
$redAndItalic->setFontStyle(Imagick::STYLE_ITALIC);

$cell1 = new ColumnContainer();
$cell1->setBorder(draw(stroke: 'red', strokeWidth: 5));
$cell1->setPadding(5);
$cell1->addItem(
    new Text(
        $redAndItalic,
        'YOU SAVE:',
        20,
    ),
    30
);

$cell1->addItem(
    new Text(
        $redAndItalic,
        '1,00 €',
        gravity: Gravity::RIGHT,
    )
);

$column1->addItem($cell1);
$column1->addItem(
    new Image(
        'example-ean.png',
        ImageMode::FIT
    )
);

$root->addItem($column1);

// Right side

$column2 = new ColumnContainer();

$blackAndItalic = draw(fill: 'black');
$blackAndItalic->setFontStyle(Imagick::STYLE_ITALIC);

$column2->addItem(
    new Text(
        $blackAndItalic,
        'Special Price:',
        initialFontSize: 30,
    ),
    50
);
$column2->addItem(
    new Text(
        draw(stroke: 'black'),
        '1,97 €',
        initialFontSize: 100,
        gravity: Gravity::CENTER,
    )
);
$column2->addItem(
    new Text(
        draw(stroke: 'black'),
        'Cranberry Juice 1 L',
        initialFontSize: 20,
        gravity: Gravity::CENTER,
    ),
    40
);

$root->addItem($column2);

$root->draw($imagick, 0, 0, $width, $height);

$imagick->setImageFormat('png');
$imagick->writeImage(__DIR__ . '/51-price-tag.png');

Template

The same layout as a template, with one gap: the PHP puts the red/black text in italics via ImagickDraw::setFontStyle(), but templates build their ImagickDraw through the draw() helper, which has no fontStyle parameter — there’s no way to request italics from a template node, so this version renders upright text instead:

{
    "type": "row",
    "children": [
        {
            "type": "column",
            "margin": {"right": 10},
            "children": [
                {
                    "type": "column",
                    "border": {"stroke": "red", "strokeWidth": 5},
                    "padding": 5,
                    "children": [
                        {"type":"text","text":"YOU SAVE:","fill":"red","fontSize":20,"size":30},
                        {"type":"text","text":"1,00 €","fill":"red","gravity":"right"}
                    ]
                },
                {"type":"image","file":"example-ean.png","mode":"fit"}
            ]
        },
        {
            "type": "column",
            "children": [
                {"type":"text","text":"Special Price:","fill":"black","fontSize":30,"size":50},
                {"type":"text","text":"1,97 €","stroke":"black","fontSize":100,"gravity":"center"},
                {"type":"text","text":"Cranberry Juice 1 L","stroke":"black","fontSize":20,"gravity":"center","size":40}
            ]
        }
    ]
}