protected function render()
{
$prop = $this->props;
$prop->name = $prop->name ?: $prop->id;
$this->context->enableFileUpload();
$this->beginContent();
echo html([h("input#{$prop->id}Field", ['type' => 'hidden', 'name' => $prop->name, 'value' => $prop->value]), h('.wrapper', ['style' => enum(';', isset($prop->width) ? "width:{$prop->width}px" : '', isset($prop->height) ? "height:{$prop->height}px" : '')], [h('img.Image', ['src' => $prop->value ? $this->contentRepo->getImageUrl($prop->value, ['w' => $prop->width, 'h' => $prop->height, 'fit' => 'crop']) : self::EMPTY_IMAGE]), h('span'), h("input", ['type' => 'file', 'name' => "{$prop->name}_" . self::FILE_FIELD_SUFFIX, 'onchange' => "selenia.ext.imageField.onChange('{$prop->id}')", 'disabled' => $prop->disabled]), when(!$prop->noClear, h('button.clearBtn.fa.fa-times', ['type' => 'button', 'onclick' => "selenia.ext.imageField.clear('{$prop->id}')", 'disabled' => $prop->disabled, 'style' => when(!$prop->value, 'display:none')]))])]);
}
protected function render()
{
$prop = $this->props;
$align = $prop->align;
switch ($align) {
case 'left':
$this->attr('style', 'float:left');
break;
case 'right':
$this->attr('style', 'float:right');
break;
case 'center':
$this->attr('style', 'margin: 0 auto;display:block');
break;
}
if (exists($prop->alt)) {
$this->attr('alt', $prop->alt);
}
if (exists($prop->onClick)) {
$this->attr('onclick', $prop->onClick);
}
if (exists($prop->href)) {
$this->attr('onclick', "location='{$prop->href}'");
}
if (exists($prop->value)) {
$url = $this->contentRepo->getImageUrl($prop->value, ['w' => when(isset($prop->width), $prop->width), 'h' => when(isset($prop->height), $prop->height), 'q' => when(isset($prop->quality), $prop->quality), 'fit' => when(isset($prop->fit), $prop->fit), 'fm' => when(isset($prop->format), $prop->format), 'nc' => when(!$prop->cache, '1'), 'bg' => when(isset($prop->background), $prop->background)]);
if ($this->containerTag == 'img') {
$this->addAttrs(['src' => $url, 'width' => $prop->width, 'height' => $prop->height]);
} else {
$this->attr('style', enum(';', "background-image:url({$url})", "background-repeat:no-repeat", when(exists($prop->size) && $prop->size != 'auto', "background-size:{$prop->size}"), when($prop->position, "background-position:{$prop->position}"), when($prop->width, "width:{$prop->width}px"), when($prop->height, "height:{$prop->height}px")));
}
}
}
