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                 <div class="media">
   7                         <f:if condition="{isAllowedFileExtension}">
   8                                 <f:then>
   9                                         <div class="media-left">
  10                                                 <f:for each="{config.cropVariants}" as="cropVariant">
  11                                                         <div class="t3js-image-manipulation-preview media-object" data-preview-width="150" data-preview-height="200" data-crop-variant-id="{cropVariant.id}">
  12                                                                 <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}" />
  13                                                         </div>
  14                                                 </f:for>
  15                                         </div>
  16                                         <f:if condition="{config.readOnly}">
  17                                                 <f:else>
  18                                                         <div class="media-body">
  19                                                                 <input type="hidden" id="{formEngine.field.id}" name="{formEngine.field.name}" value="{formEngine.field.value}" data-formengine-validation-rules="{formEngine.validation}" />
  20                                                                 <button class="btn btn-default t3js-image-manipulation-trigger"
  21                                                                                                 data-url="{wizardUri}"
  22                                                                                                 data-preview-url="{previewUrl}"
  23                                                                                                 data-severity="notice"
  24                                                                                                 data-modal-title="{f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}"
  25                                                                                                 data-image-uid="{image.uid}"
  26                                                                                                 data-crop-variants="{config.cropVariants -> f:format.json()}"
  27                                                                                                 data-file-field="{config.file_field}"
  28                                                                                                 data-field="{formEngine.field.id}">
  29                                                                         <span class="t3-icon fa fa-crop"></span><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor" />
  30                                                                 </button>
  31                                                                 <f:if condition="{crop}" >
  32                                                                         <div class="table-fit-block table-spacer-wrap">
  33                                                                                 <table class="table table-no-borders t3js-image-manipulation-info">
  34                                                                                         <tr>
  35                                                                                                 <td><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-width" /></td>
  36                                                                                                 <td class="t3js-image-manipulation-info-crop-width">{crop.width}px</td>
  37                                                                                         </tr>
  38                                                                                         <tr>
  39                                                                                                 <td><f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop-height" /></td>
  40                                                                                                 <td class="t3js-image-manipulation-info-crop-height">{crop.height}px</td>
  41                                                                                         </tr>
  42                                                                                 </table>
  43                                                                         </div>
  44                                                                 </f:if>
  45                                                         </div>
  46                                                 </f:else>
  47                                         </f:if>
  48                                 </f:then>
  49                                 <f:else>
  50                                         <div class="media-body">
  51                                         <p><em>
  52                                                 <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" />
  53                                                 <br/>
  54                                                 {config.allowedExtensions -> f:format.case(mode: 'upper')}
  55                                         </em></p>
  56                                         </div>
  57                                 </f:else>
  58                         </f:if>
  59                 </div>
  60         </f:section>
  61 </html>