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 examples of img file(s) on the server.
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::class, [ 'deleteOptions' => false ]) ?> ... <?php ActiveForm::end(); ?>