1 <html xmlns:
f=
"http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
2 xmlns:
core=
"http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers">
3 <f:layout name=
"ImageManipulation" />
5 <f:section name=
"Main">
7 <f:if condition=
"{isAllowedFileExtension}">
9 <div class=
"media-left">
10 <f:for each=
"{config.cropVariants}" as=
"cropVariant">
11 <div class=
"t3js-image-manipulation-preview media-object" data-preview-width=
"150" data-preview-height=
"200" data-crop-variant-id=
"{cropVariant.id}">
12 <f:image image=
"{image}" crop=
"{formEngine.field.value}" cropVariant=
"{cropVariant.id}" maxWidth=
"150" maxHeight=
"200" class=
"thumbnail thumbnail-status" additionalAttributes=
"{data-crop-variant: '{cropVariant -> f:format.json()}', data-crop-variant-id: cropVariant.id}" />
16 <f:if condition=
"{config.readOnly}">
18 <div class=
"media-body">
19 <input type=
"hidden" id=
"{formEngine.field.id}" name=
"{formEngine.field.name}" value=
"{formEngine.field.value}" data-formengine-validation-rules=
"{formEngine.validation}" />
20 <button class=
"btn btn-default t3js-image-manipulation-trigger"
21 data-url=
"{wizardUri}"
22 data-preview-url=
"{previewUrl}"
23 data-severity=
"notice"
24 data-modal-title=
"{f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}"
25 data-image-uid=
"{image.uid}"
26 data-crop-variants=
"{config.cropVariants -> f:format.json()}"
27 data-file-field=
"{config.file_field}"
28 data-field=
"{formEngine.field.id}">
29 <span class=
"t3-icon fa fa-crop"></span><f:translate id=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor" />
31 <f:if condition=
"{crop}" >
32 <div class=
"table-fit-block table-spacer-wrap">
33 <table class=
"table table-no-borders t3js-image-manipulation-info">
35 <td><f:translate id=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-width" /></td>
36 <td class=
"t3js-image-manipulation-info-crop-width">{crop.width}px
</td>
39 <td><f:translate id=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-height" /></td>
40 <td class=
"t3js-image-manipulation-info-crop-height">{crop.height}px
</td>
50 <div class=
"media-body">
52 <f:translate id=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" />
54 {config.allowedExtensions -
> f:format.case(mode: 'upper')}