FRONTEND_MVC/modules/manager/views/default/formTopic.php

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\datetime\DateTimePicker;
use app\widgets\CropperjsWidget;

$form = ActiveForm::begin([
    'id' => 'topic-form',
    'options' => ['class' => 'form-horizontal', 'enctype' => 'multipart/form-data']]);
	$brightness = 60;
	if( trim($model->ext) != ''){
		$ext = json_decode(trim($model->ext));
		if( isset($ext->brightness) ){
			$brightness = $ext->brightness;
		}
	}

?>
<input type="hidden" name="NewsTopic[id]" value="<?=$model->id?>">
<input type="hidden" name="NewsTopic[ext]" id="ext" value='<?=$model->ext?>'>

<style>
#image {
	width: 100%;
	height: 56%;
	background: URL(/img/image.svg) no-repeat 50% 50%;
	background-size: contain;
	background-color: #fff;
	cursor: pointer;
	padding: 0px 100px 8px 0px;
	filter: brightness(<?=$brightness?>%);
}
.cont {
	position: relative;
	overflow: hidden;
}
.itext {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 30px;
	max-width: 608px;
	font: 36px/43px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
	color: #fff;
	margin-bottom: 50px;
}
.itext p{
	font: 700 16px/19px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
	color: #fff;
	line-height: 23px;
}
</style>
<?
if($model->id){
	$imageSrc = "/topic-images/".$model->id."_sizehd.jpg?r=".rand();
}else{
	$imageSrc = '/img/e.gif';
}
?>
<img id="image" src="<?=$imageSrc?>" onClick="$('#modal').modal('show');document.getElementById('inputImage').click();" >
<?
echo CropperjsWidget::widget(['image' => 'image', 'file' => 'NewsTopic[photo]', 'post' => 'cropping', 'aspectRatio' => '13 / 5']);
?>
<div class="form-group">
    <label for="formControlRange">Затенение</label>
    <input type="range" class="form-control-range" id="formControlRange" name="NewsTopic[brightness]" min="10" max="100" value="<?=$brightness?>" step="1" oninput="test(this)">
</div>
<?

echo $form->field($model, 'url')->textInput([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'URL'
                ])->label('URL часть адреса рездела');

echo $form->field($model, 'title')->textInput([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'Заголовок',
//					'id' => 'js-news-content'
                ])->label('Заголовок рубрики');
echo $form->field($model, 'meta_title')->textInput([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'Заголовок SEO'
                ])->label('Заголовок SEO');

echo $form->field($model, 'description')->textarea([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'description'
                ])->label('Описание раздела кратко');
echo $form->field($model, 'keywords')->textarea([
                    'maxlength' => true,
                    'class' => 'form-control js-word-count-input',
					'placeholder' => 'ключевые слова'
                ])->label('ключевые слова через запятую');
?>
<div class="form-group form-check">
<?

echo $form->field($model, 'active')->checkbox([
                    'class' => 'form-check-input',
					'label' => 'Активный'
                ]);
                //($model->show == 'Y')?true:false,
echo $form->field($model, 'show')->checkbox([
                    'class' => 'form-check-input',
					'label' => 'Показывать везде',
					'uncheck' => 'N',
					'checked' => ($model->show == 'Y')?true:false
                ]);
?></div><div class="form-group"><?
echo Html::submitButton('Send', ['class' => 'btn btn-success']);
?>
</div>
<script>
	var ext ='';
	var extx='<?=json_decode(trim($model->ext))?trim($model->ext):""?>';
	if( extx != '' ){
		var ext = JSON.parse(extx);
	}
	$('#topic-form').on('beforeValidate',
		function (event){
			console.log(JSON.stringify(ext));
			if( ext != '' ){
				$('#ext').val(JSON.stringify(ext));
			}
			return;
		}
	);
	function test(e){
		$('#image').css( "filter", "brightness("+$(e).val()+"%)" );
		if( ext == '' ){
			ext = new Object();
		}
		ext.brightness = $(e).val();
	}
</script>
<?
ActiveForm::end();