typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.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="Main">
   5                 <f:if condition="{image.properties.width}">
   6                         <f:then>
   7                                 <div class="modal-header">
   8                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
   9                                         </button>
  10                                         <h4 class="modal-title">
  11                                                 {f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}
  12                                         </h4>
  13                                 </div>
  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}" />
  18                                                 </div>
  19                                         </div>
  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}"
  33                                                                                                          data-crop-variant>
  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>
  36                                                                                                         <div
  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>
  44                                                                                                                 </div>
  45                                                                                                         </div>
  46                                                                                                 </a>
  47                                                                                         </h4>
  48                                                                                 </div>
  49                                                                                 <div id="cropper-collapse-{cropVariantIterator.cycle}"
  50                                                                                                  class="panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'in')}"
  51                                                                                                  role="tabpanel"
  52                                                                                                  aria-labelledby="cropper-accordion-heading-{cropVariantIterator.cycle}">
  53                                                                                         <div class="panel-body">
  54                                                                                                 <form class="form">
  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"/>
  59                                                                                                                         </label>
  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')}">
  64                                                                                                                                                 <input
  65                                                                                                                                                         class="sr-only" id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
  66                                                                                                                                                         name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value="{cropVariant.id}"
  67                                                                                                                                                         type="radio">
  68                                                                                                                                                 <span>{ratio.title -> f:translate(id: ratio.title)}</span> <i class="fa fa-check"></i></label>
  69                                                                                                                                 </f:for>
  70                                                                                                                         </div>
  71                                                                                                                 </f:if>
  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">
  75                                                                                                                                 <tr>
  76                                                                                                                                         <td class="t3js-cropper-info-crop"></td>
  77                                                                                                                                 </tr>
  78                                                                                                                         </table>
  79                                                                                                                 </div>
  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')}
  84                                                                                                                 </button>
  85                                                                                                         </div>
  86                                                                                                 </form>
  87                                                                                         </div>
  88                                                                                 </div>
  89                                                                         </div>
  90                                                                 </f:for>
  91                                                         </div>
  92                                                 </div>
  93                                         </div>
  94                                 </div>
  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>
  98                                                 Preview
  99                                         </button>
 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')}
 104                                         </button>
 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')}
 109                                         </button>
 110                                 </div>
 111                         </f:then>
 112                         <f:else>
 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"/>
 116                                         </h4>
 117                                         <p class="alert-message">
 118                                                 <f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-found-message"/>
 119                                         </p>
 120                                 </div>
 121                         </f:else>
 122                 </f:if>
 123         </f:section>
 124 </html>