[FEATURE] Add new imageManipulation supporting multiple crop variants
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / Templates / ImageManipulation / ImageCropping.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
4 <f:section name="Element">
5 <div class="media">
6 <f:if condition="{isAllowedFileExtension}">
7 <f:then>
8 <div class="media-left">
9 <f:for each="{config.cropVariants}" as="cropVariant">
10 <div class="t3js-image-manipulation-preview media-object" data-preview-width="150" data-preview-height="200" data-crop-variant-id="{cropVariant.id}">
11 <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}" />
12 </div>
13 </f:for>
14 </div>
15 <div class="media-body">
16 <input type="hidden" id="{formEngine.field.id}" name="{formEngine.field.name}" value="{formEngine.field.value}" data-formengine-validation-rules="{formEngine.validation}" />
17 <button class="btn btn-default t3js-image-manipulation-trigger"
18 data-url="{wizardUri}"
19 data-preview-url="{previewUrl}"
20 data-severity="notice"
21 data-modal-title="{f:render(section: 'ModalTitle', arguments: _all)}"
22 data-image-uid="{image.uid}"
23 data-crop-variants="{config.cropVariants -> f:format.json()}"
24 data-file-field="{config.file_field}"
25 data-field="{formEngine.field.id}">
26 <span class="t3-icon fa fa-crop"></span><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor" />
27 </button>
28 <f:if condition="{crop}" >
29 <div class="table-fit-block table-spacer-wrap">
30 <table class="table table-no-borders t3js-image-manipulation-info">
31 <tr>
32 <td><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-width" /></td>
33 <td class="t3js-image-manipulation-info-crop-width">{crop.width}px</td>
34 </tr>
35 <tr>
36 <td><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-height" /></td>
37 <td class="t3js-image-manipulation-info-crop-height">{crop.height}px</td>
38 </tr>
39 </table>
40 </div>
41 </f:if>
42 </div>
43 </f:then>
44 <f:else>
45 <div class="media-body">
46 <p><em>
47 <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" />
48 <br/>
49 {config.allowedExtensions -> f:format.case(mode: 'upper')}
50 </em></p>
51 </div>
52 </f:else>
53 </f:if>
54 </div>
55 </f:section>
56 <f:section name="Cropper">
57 <f:if condition="{image.properties.width}">
58 <f:then>
59 <div class="modal-header">
60 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
61 </button>
62 <h4 class="modal-title">
63 {f:render(section: 'ModalTitle', arguments: _all)}
64 </h4>
65 </div>
66 <div class="cropper modal-panel">
67 <div class="modal-panel-body">
68 <div class="cropper-image-container">
69 <img id="t3js-crop-image" class="cropper-image-container-image"
70 src="{f:uri.image(image:image, maxWidth:'1000', maxHeight: '700')}"
71 data-original-width="{image.properties.width}" data-original-height="{image.properties.height}"/>
72 </div>
73 </div>
74 <div class="modal-panel-sidebar modal-panel-sidebar-right">
75 <div class="modal-body">
76 <div class="panel-group" id="accordion-cropper-variants" role="tablist" aria-multiselectable="true">
77 <f:for each="{cropVariants}" as="cropVariant" iteration="cropVariantIterator">
78 <div class="panel panel-default">
79 <div class="panel-heading" role="tab" id="cropper-accordion-heading-{cropVariantIterator.cycle}">
80 <h4 class="panel-title">
81 <a role="button" data-toggle="collapse" data-parent="#accordion-cropper-variants"
82 href="#cropper-collapse-{cropVariantIterator.cycle}"
83 aria-expanded="{f:if(condition:cropVariantIterator.isFirst, then:'true', else:'false')}"
84 aria-controls="cropper-collapse-{cropVariantIterator.cycle}"
85 class="t3js-crop-variant-trigger {f:if(condition:cropVariantIterator.isFirst, then:'is-active', else:'collapsed')}"
86 data-crop-variant-id="{cropVariant.id}"
87 data-crop-variant>
88 <span><i class="fa fa-chevron-{f:if(condition:cropVariantIterator.isFirst, then:'up', else:'down')}"
89 aria-hidden="true"></i> {cropVariant.title -> f:translate(id: cropVariant.title)}</span>
90 <div
91 class="cropper-preview-thumbnail {f:if(condition:'{image.properties.width}>{image.properties.height}', then:'wide', else: 'tall')}">
92 <img class="cropper-preview-thumbnail-image"
93 src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}">
94 <div class="cropper-preview-thumbnail-crop-area t3js-cropper-preview-thumbnail-crop-area">
95 <img src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}"
96 class="cropper-preview-thumbnail-crop-image t3js-cropper-preview-thumbnail-crop-image">
97 <div class="cropper-preview-thumbnail-focus-area t3js-cropper-preview-thumbnail-focus-area"></div>
98 </div>
99 </div>
100 </a>
101 </h4>
102 </div>
103 <div id="cropper-collapse-{cropVariantIterator.cycle}"
104 class="panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'in')}"
105 role="tabpanel"
106 aria-labelledby="cropper-accordion-heading-{cropVariantIterator.cycle}">
107 <div class="panel-body">
108 <form class="form">
109 <div class="form-group">
110 <f:if condition="{cropVariant.allowedAspectRatios}">
111 <label for="ratio-{cropVariantIterator.cycle}">
112 <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
113 </label>
114 <div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons"
115 data-toggle="buttons">
116 <f:for each="{cropVariant.allowedAspectRatios}" as="ratio" iteration="ratioIterator">
117 <label class="btn btn-secondary" data-method="setAspectRatio" data-option="{ratio.id}" title="{f:translate(id:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}">
118 <input
119 class="sr-only" id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
120 name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value="{cropVariant.id}"
121 type="radio">
122 <span>{ratio.title -> f:translate(id: ratio.title)}</span> <i class="fa fa-check"></i></label>
123 </f:for>
124 </div>
125 </f:if>
126 <label><f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.selection" /></label>
127 <div class="table-fit-block">
128 <table class="table table-no-borders table-transparent">
129 <tr>
130 <td class="t3js-cropper-info-crop"></td>
131 </tr>
132 </table>
133 </div>
134 <button class="btn btn-secondary" data-method="reset" data-crop-variant="{cropVariant -> f:format.json()}"
135 title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}">
136 <i class="fa fa-refresh"></i>
137 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}
138 </button>
139 </div>
140 </form>
141 </div>
142 </div>
143 </div>
144 </f:for>
145 </div>
146 </div>
147 </div>
148 </div>
149 <div class="modal-footer">
150 <button class="btn btn-default pull-left" data-method="preview" title="Preview"><i
151 class="fa fa-eye"></i>
152 Preview
153 </button>
154 <button class="btn btn-default" data-method="dismiss"
155 title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}">
156 <i class="fa fa-remove"></i>
157 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}
158 </button>
159 <button class="btn btn-primary" data-method="save"
160 title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}">
161 <i class="fa fa-check"></i>
162 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}
163 </button>
164 </div>
165 </f:then>
166 <f:else>
167 <div class="alert alert-danger">
168 <h4 class="alert-title">
169 <f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found"/>
170 </h4>
171 <p class="alert-message">
172 <f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found-message"/>
173 </p>
174 </div>
175 </f:else>
176 </f:if>
177 </f:section>
178 <f:section name="ModalTitle">
179 {f:translate(id: 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.image-manipulation')}
180 : {f:if(condition:image.properties.title, then:image.properties.title, else:image.name)}
181 ({image.properties.width} × {image.properties.height})
182 </f:section>
183 </html>