0d440f2021670d712418b8ec8ece7830a65c94c5
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / Templates / Wizards / ImageManipulationWizard.html
1
2 <f:if condition="{image.properties.width}">
3 <f:then>
4 <div class="modal-panel">
5
6 <div class="modal-panel-sidebar modal-panel-sidebar-right">
7 <div class="modal-header">
8 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
9 <h4 class="modal-title"><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.image-manipulation" /></h4>
10 </div>
11 <div class="modal-body">
12 <form class="form">
13 <div class="form-group">
14 <label><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.image-title" />:</label>
15 <p>{f:if(condition:image.properties.title, then:image.properties.title, else:image.name)}</p>
16 </div>
17 <div class="form-group">
18 <label><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.original-dimensions" />:</label>
19 <p>{image.properties.width} × {image.properties.height}</p>
20 </div>
21
22 <f:if condition="{ratios}">
23 <div class="form-group">
24 <label for="ratio"><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.aspect-ratio" /></label>
25 <div class="btn-group btn-group-justified t3js-ratio-buttons" data-toggle="buttons">
26 <f:for each="{ratios}" as="ratio" key="key" iteration="iteration">
27 <label class="btn btn-default" data-method="setAspectRatio" data-option="{key}" title="{f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.set-aspect-ratio')}"><input class="sr-only" id="aspestRatio{iteration.cycle}" name="aspestRatio" value="{key}" type="radio"> <span>{ratio}</span></label>
28 </f:for>
29 </div>
30 </div>
31 </f:if>
32
33 <f:if condition="{zoom}">
34 <div class="form-group t3js-setting-zoom">
35 <label for="zoom"><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.zoom" /></label>
36 <div class="btn-group">
37 <button class="btn btn-default" data-method="zoom" data-option="0.1" title="{f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.zoom-in')}"><i class="fa fa-search-plus"></i></button>
38 <button class="btn btn-default" data-method="zoom" data-option="-0.1" title="{f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.zoom-out')}"><i class="fa fa-search-minus"></i></button>
39 </div>
40 </div>
41 </f:if>
42
43 <div class="form-group">
44 <label><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.selection" /></label>
45 <div class="table-fit-block">
46 <table class="table table-no-borders table-transparent t3js-image-manipulation-info">
47 <tr>
48 <td>
49 <f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.crop-x"/>
50 </td>
51 <td class="t3js-image-manipulation-info-crop-x"></td>
52 </tr>
53 <tr>
54 <td>
55 <f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.crop-y"/>
56 </td>
57 <td class="t3js-image-manipulation-info-crop-y"></td>
58 </tr>
59 <tr>
60 <td>
61 <f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.crop-width"/>
62 </td>
63 <td class="t3js-image-manipulation-info-crop-width"></td>
64 </tr>
65 <tr>
66 <td>
67 <f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.crop-height"/>
68 </td>
69 <td class="t3js-image-manipulation-info-crop-height"></td>
70 </tr>
71 </table>
72 </div>
73 <div class="form-group">
74 <button class="btn btn-default" data-method="reset" title="{f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.reset')}"><i class="fa fa-refresh"></i> {f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.reset')}</button>
75 </div>
76 </div>
77
78 </form>
79 </div>
80 <div class="modal-footer">
81 <button class="btn btn-default" data-method="dismiss" title="{f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.cancel')}"><i class="fa fa-remove"></i> {f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.cancel')}</button>
82 <button class="btn btn-default" data-method="save" title="{f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.accept')}"><i class="fa fa-check"></i> {f:translate(key:'LLL:EXT:lang/locallang_wizards.xlf:imwizard.accept')}</button>
83 </div>
84 </div>
85
86 <div class="modal-panel-body">
87 <div class="t3js-cropper-image-container">
88 <img src="{f:uri.image(image:image, maxWidth:'1000', maxHeight: '700')}"
89 data-original-width="{image.properties.width}" data-original-height="{image.properties.height}" />
90 </div>
91 </div>
92
93 </div>
94
95 </f:then>
96 <f:else>
97 <div class="alert alert-danger">
98 <h4 class="alert-title"><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.no-image-found" /></h4>
99 <p class="alert-message"><f:translate key="LLL:EXT:lang/locallang_wizards.xlf:imwizard.no-image-found-message" /></p>
100 </div>
101 </f:else>
102 </f:if>