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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio" /></label>
  25                                                         <div class="ratio-buttons 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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/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/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}"><i class="fa fa-refresh"></i> {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/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/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}"><i class="fa fa-remove"></i> {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}</button>
  82                                         <button class="btn btn-default" data-method="save" title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}"><i class="fa fa-check"></i> {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/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/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found" /></h4>
  99                         <p class="alert-message"><f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found-message" /></p>
 100                 </div>
 101         </f:else>
 102 </f:if>