61d526f6a8f5cde4cb72f8f9d0b9d3759ac8daef
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / Templates / ImageManipulation / ImageManipulationElement.html
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" />
4
5 <f:section name="Main">
6 <div class="media">
7 <f:if condition="{isAllowedFileExtension}">
8 <f:then>
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}" />
13 </div>
14 </f:for>
15 </div>
16 <f:if condition="{config.readOnly}">
17 <f:else>
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" />
30 </button>
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">
34 <tr>
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>
37 </tr>
38 <tr>
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>
41 </tr>
42 </table>
43 </div>
44 </f:if>
45 </div>
46 </f:else>
47 </f:if>
48 </f:then>
49 <f:else>
50 <div class="media-body">
51 <p><em>
52 <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" />
53 <br/>
54 {config.allowedExtensions -> f:format.case(mode: 'upper')}
55 </em></p>
56 </div>
57 </f:else>
58 </f:if>
59 </div>
60 </f:section>
61 </html>