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>