Create crops in multiple sizes
Demo of Illustrated

Note: as this is a demo, you can't really upload files. However, you can browse for images on your system and test the Uploader widget.


Illustrated can save images in several resolutions, helping with responsive layouts.

For instance, if you set the cropSize of an image attribute to 640, and sizeSteps to 4, the image will be saved with greatest lengths of 640, 320, 160, amd 80 pixels, each with the same filename, but in their own subdirectory.

Click on the thumbnail of 'Fire fight' to see the details.

Note that Uploader has no special settings.

Data in the database

Click on the thumbnail to see the img file(s) on the server.

nameimgaspect
Fire fightgc2eja.jpg

Configuration of the model

<?php

class <model> extends \yii\db\ActiveRecord
{
    ...
    public function behaviors()    {
        return [
            [
                'class' => 'sjaakp\illustrated\Illustrated',
                'attributes' => [
                    'img' => [
                        'cropSize' => 640,
                        'sizeSteps' => 4
                    ]
                ]
            ],
            ...        // other behaviors
        ];
    }
    ...
}

Settings of the Uploader widget

<?php
use sjaakp\illustrated\Uploader;
?>

<?php $form = ActiveForm::begin([
    'options' => ['enctype' => 'multipart/form-data']    // important, needed for file upload
]); ?>
    ...        // other form fields
<?= $form->field($model, 'img')->widget(Uploader::className(), [
        'deleteOptions' => false
    ]) ?>
    ...
<?php ActiveForm::end(); ?>