typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.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     <f:layout name="ImageManipulation" />
   4
   5     <f:section name="Main">
   6         <f:if condition="{isAllowedFileExtension} && {image.properties.width}">
   7             <f:then>
   8                 <f:if condition="{config.readOnly}">
   9                     <f:else>
  10                         <div class="form-control-wrap">
  11                             <input type="hidden" id="{formEngine.field.id}"
  12                                     name="{formEngine.field.name}"
  13                                     value="{formEngine.field.value}"
  14                                     data-formengine-validation-rules="{formEngine.validation}"/>
  15                             <button class="btn btn-default t3js-image-manipulation-trigger"
  16                                     data-url="{wizardUri}"
  17                                     data-payload="{wizardPayload}"
  18                                     data-preview-url="{previewUrl}"
  19                                     data-severity="notice"
  20                                     data-modal-title="{f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}"
  21                                     data-image-uid="{image.uid}"
  22                                     data-crop-variants="{config.cropVariants -> f:format.json()}"
  23                                     data-button-preview-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.preview')}"
  24                                     data-button-dismiss-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}"
  25                                     data-button-save-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}"
  26                                     data-file-field="{config.file_field}"
  27                                     data-field="{formEngine.field.id}">
  28                                 <span class="t3-icon fa fa-crop"></span>
  29                                 <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor"/>
  30                             </button>
  31                         </div>
  32                     </f:else>
  33                 </f:if>
  34                 <div class="row media-gallery__list">
  35                     <f:for each="{config.cropVariants}" as="cropVariant">
  36                         <div class="col-6 col-sm-4 col-md-3 media-gallery__item">
  37                             <p>
  38                                 <b><f:translate id="{cropVariant.title}" default="{cropVariant.title}" /></b><br/>
  39                                 <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>: <span class="t3js-image-manipulation-selected-ratio" data-crop-variant-id="{cropVariant.id}"><f:translate id="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" default="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" /></span>
  40                             </p>
  41                             <div class="t3js-image-manipulation-preview media-object"
  42                                 data-preview-height="150"
  43                                 data-crop-variant-id="{cropVariant.id}">
  44                                 <f:image image="{image}" crop="{formEngine.field.value}"
  45                                         cropVariant="{cropVariant.id}"
  46                                         maxHeight="150"
  47                                         class="thumbnail thumbnail-status"
  48                                         additionalAttributes="{data-crop-variant: '{cropVariant -> f:format.json()}', data-crop-variant-id: cropVariant.id}"/>
  49                             </div>
  50                         </div>
  51                     </f:for>
  52                 </div>
  53             </f:then>
  54             <f:else>
  55                 <div class="media-body">
  56                 <f:if condition="{image.properties.width}">
  57                     <f:then>
  58                         <p>
  59                             <em>
  60                                 <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" /><br/>
  61                                 {config.allowedExtensions -> f:format.case(mode: 'upper')}
  62                             </em>
  63                         </p>
  64                     </f:then>
  65                     <f:else>
  66                         <div class="alert alert-info">
  67                             <h4>
  68                                 <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-dimensions"/>
  69                             </h4>
  70                             <p>
  71                                 <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-dimensions-message"/>
  72                             </p>
  73                         </div>
  74                     </f:else>
  75                 </f:if>
  76                 </div>
  77             </f:else>
  78         </f:if>
  79     </f:section>
  80 </html>