1 <html xmlns:
f=
"http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
2 xmlns:
core=
"http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers">
4 <f:section name=
"Element">
6 <f:if condition=
"{isAllowedFileExtension}">
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}" />
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" />
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">
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>
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>
45 <div class=
"media-body">
47 <f:translate id=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" />
49 {config.allowedExtensions -
> f:format.case(mode: 'upper')}
56 <f:section name=
"Cropper">
57 <f:if condition=
"{image.properties.width}">
59 <div class=
"modal-header">
60 <button type=
"button" class=
"close" data-dismiss=
"modal" aria-label=
"Close"><span aria-hidden=
"true">×
</span>
62 <h4 class=
"modal-title">
63 {f:render(section: 'ModalTitle', arguments: _all)}
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}"/>
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}"
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>
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>
103 <div id=
"cropper-collapse-{cropVariantIterator.cycle}"
104 class=
"panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'in')}"
106 aria-labelledby=
"cropper-accordion-heading-{cropVariantIterator.cycle}">
107 <div class=
"panel-body">
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"/>
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')}">
119 class=
"sr-only" id=
"aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
120 name=
"aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value=
"{cropVariant.id}"
122 <span>{ratio.title -
> f:translate(id: ratio.title)}
</span> <i class=
"fa fa-check"></i></label>
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">
130 <td class=
"t3js-cropper-info-crop"></td>
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')}
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>
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')}
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')}
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"/>
171 <p class=
"alert-message">
172 <f:translate key=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found-message"/>
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})