ew_base/Resources/Private/Templates/Form/ImageManipulationElement.html
2024-12-14 14:03:20 +01:00

50 lines
2.2 KiB
HTML

<html
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<div class="formengine-field-item t3js-formengine-field-item">
{fieldInformation -> f:format.raw()}
<div class="form-control-wrap">
<div class="form-wizards-wrap">
<div class="form-wizards-element">
<typo3-formengine-element-pick-color recordFieldId="{formEngine.field.id}">
<div class="form-control-wrap" style="max-width: {width}px">
<input type="text" value="" id="{formEngine.field.id}" class="form-control t3js-clearable"
data-formengine-validation-rules="[]"
data-formengine-input-params="{f:format.json(value: {
field: formEngine.field.name,
evalList: 'trim'
})}"
data-formengine-input-name="{formEngine.field.name}"/>
<input type="hidden" name="{formEngine.field.name}" value="{formEngine.field.value -> f:format.htmlspecialchars()}" />
</div>
<div class="picker">
<div class="preview"></div>
<img src="{f:uri.image(image: image, maxWidth: width, cropVariant: config.cropVariants.0.id)}" alt=""
class="picker-thumbnail thumbnail"
style="max-width: {width}px; {f:if(condition: formEngine.field.value, then: 'background: {formEngine.field.value -> f:format.htmlspecialchars()}')}"/>
<canvas id="{formEngine.field.id}-cs" class="pick-color-canvas"></canvas>
</div>
</typo3-formengine-element-pick-color>
</div>
<div class="form-wizards-items-aside form-wizards-items-aside--field-control">
<div class="btn-group">
{fieldControl -> f:format.raw()}
</div>
</div>
<div class="form-wizards-items-bottom">
{fieldWizard -> f:format.raw()}
</div>
</div>
</div>
</div>
</html>