<?php
$img_upload_box_id = uniqid('img_upload_box_');
if (!empty($width) && !empty($height)) {
    $this->load->library('ciext/ciext')->load_jquery();
    $this->js_css->add_css('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css');
    $this->js_css->add_js('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js');
    $this->js_css->parse_js('rtgrid/edit/image_upload/js/crop.js');
    $scale = $width / 200;
    $this->js_css->add_css_string('#' . $img_upload_box_id . ' .img_box .photo, #' . $img_upload_box_id . ' .img_box{width: 200px; height: ' . $height / $scale . 'px}');
}
?>
<div class="image_upload" id="<?= $img_upload_box_id ?>">
    <?= $img_box ?>
    <?php if (!empty($width) && !empty($height)) : ?>
        <small><?= sprintf($this->lang->line('Image auto resizing (width/height): %spx/%spx'), $width, $height) ?></small>
        <input type="hidden" class="cropped_data" name="<?= $name . '_crop' ?>" data-width="<?= $width ?>"
               data-height="<?= $height ?>"
               value="">
    <?php endif; ?>
</div>