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=
"Main">
5 <f:if condition=
"{image.properties.width}">
7 <div class=
"modal-header">
8 <button type=
"button" class=
"close" data-dismiss=
"modal" aria-label=
"Close"><span aria-hidden=
"true">×
</span>
10 <h4 class=
"modal-title">
11 {f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}
14 <div class=
"cropper modal-panel">
15 <div class=
"modal-panel-body">
16 <div id=
"t3js-crop-image-container" class=
"cropper-image-container">
17 <f:image image=
"{image}" id=
"t3js-crop-image" class=
"cropper-image-container-image" additionalAttributes=
"{data-original-width: image.properties.width, data-original-height: image.properties.height}" />
20 <div class=
"modal-panel-sidebar modal-panel-sidebar-right">
21 <div class=
"modal-body">
22 <div class=
"panel-group" id=
"accordion-cropper-variants" role=
"tablist" aria-multiselectable=
"true">
23 <f:for each=
"{cropVariants}" as=
"cropVariant" iteration=
"cropVariantIterator">
24 <div class=
"panel panel-default">
25 <div class=
"panel-heading" role=
"tab" id=
"cropper-accordion-heading-{cropVariantIterator.cycle}">
26 <h4 class=
"panel-title">
27 <a role=
"button" data-toggle=
"collapse" data-parent=
"#accordion-cropper-variants"
28 href=
"#cropper-collapse-{cropVariantIterator.cycle}"
29 aria-expanded=
"{f:if(condition:cropVariantIterator.isFirst, then:'true', else:'false')}"
30 aria-controls=
"cropper-collapse-{cropVariantIterator.cycle}"
31 class=
"t3js-crop-variant-trigger {f:if(condition:cropVariantIterator.isFirst, then:'is-active', else:'collapsed')}"
32 data-crop-variant-id=
"{cropVariant.id}"
34 <span><i class=
"fa fa-chevron-{f:if(condition:cropVariantIterator.isFirst, then:'up', else:'down')}"
35 aria-hidden=
"true"></i> {cropVariant.title -
> f:translate(id: cropVariant.title)}
</span>
37 class=
"cropper-preview-thumbnail {f:if(condition:'{image.properties.width}>{image.properties.height}', then:'wide', else: 'tall')}">
38 <img class=
"cropper-preview-thumbnail-image"
39 src=
"{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}">
40 <div class=
"cropper-preview-thumbnail-crop-area t3js-cropper-preview-thumbnail-crop-area">
41 <img src=
"{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}"
42 class=
"cropper-preview-thumbnail-crop-image t3js-cropper-preview-thumbnail-crop-image">
43 <div class=
"cropper-preview-thumbnail-focus-area t3js-cropper-preview-thumbnail-focus-area"></div>
49 <div id=
"cropper-collapse-{cropVariantIterator.cycle}"
50 class=
"panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'in')}"
52 aria-labelledby=
"cropper-accordion-heading-{cropVariantIterator.cycle}">
53 <div class=
"panel-body">
55 <div class=
"form-group">
56 <f:if condition=
"{cropVariant.allowedAspectRatios}">
57 <label for=
"ratio-{cropVariantIterator.cycle}">
58 <f:translate id=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
60 <div id=
"ratio-{cropVariantIterator.cycle}" class=
"ratio-buttons t3js-ratio-buttons"
61 data-toggle=
"buttons">
62 <f:for each=
"{cropVariant.allowedAspectRatios}" as=
"ratio" iteration=
"ratioIterator">
63 <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')}">
65 class=
"sr-only" id=
"aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
66 name=
"aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value=
"{cropVariant.id}"
68 <span>{ratio.title -
> f:translate(id: ratio.title)}
</span> <i class=
"fa fa-check"></i></label>
72 <label><f:translate key=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.selection" /></label>
73 <div class=
"table-fit-block">
74 <table class=
"table table-no-borders table-transparent">
76 <td class=
"t3js-cropper-info-crop"></td>
80 <button class=
"btn btn-secondary" data-method=
"reset" data-crop-variant=
"{cropVariant -> f:format.json()}"
81 title=
"{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}">
82 <i class=
"fa fa-refresh"></i>
83 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}
95 <div class=
"modal-footer">
96 <button class=
"btn btn-default pull-left" data-method=
"preview" title=
"Preview"><i
97 class=
"fa fa-eye"></i>
100 <button class=
"btn btn-default" data-method=
"dismiss"
101 title=
"{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}">
102 <i class=
"fa fa-remove"></i>
103 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}
105 <button class=
"btn btn-primary" data-method=
"save"
106 title=
"{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}">
107 <i class=
"fa fa-check"></i>
108 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}
113 <div class=
"alert alert-danger">
114 <h4 class=
"alert-title">
115 <f:translate key=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found"/>
117 <p class=
"alert-message">
118 <f:translate key=
"LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found-message"/>