TYPO3 v15 dev-main snapshot ()
This commit is contained in:
@@ -0,0 +1,104 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
|
||||
xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
|
||||
>
|
||||
|
||||
<div class="modal-panel-main">
|
||||
<div id="t3js-crop-image-container" class="cropper-image-container">
|
||||
<f:image image="{image}" maxWidth="1000" maxHeight="1000" id="t3js-crop-image" additionalAttributes="{data-original-width: image.properties.width, data-original-height: image.properties.height}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-panel-sidebar">
|
||||
<div class="panel-group mb-3 d-none" id="sync-crop-variants-container">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" value="1" id="sync-crop-variants"/>
|
||||
<label class="form-check-label" for="sync-crop-variants">
|
||||
<f:translate domain="core.wizards" key="imwizard.sync-crop-variants"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-group" id="accordion-cropper-variants" role="tablist" aria-multiselectable="false">
|
||||
<f:for each="{cropVariants}" as="cropVariant" iteration="cropVariantIterator">
|
||||
<div class="panel panel-default" data-crop-variant-container="{cropVariant.id}">
|
||||
<div class="panel-heading" role="tab">
|
||||
<div class="panel-heading-row">
|
||||
<button
|
||||
class="panel-button t3js-crop-variant-trigger {f:if(condition:cropVariantIterator.isFirst, then:'is-active', else:'collapsed')}"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#cropper-collapse-{cropVariantIterator.cycle}"
|
||||
aria-expanded="{f:if(condition:cropVariantIterator.isFirst, then:'true', else:'false')}"
|
||||
aria-controls="cropper-collapse-{cropVariantIterator.cycle}"
|
||||
data-crop-variant-id="{cropVariant.id}"
|
||||
data-crop-variant
|
||||
data-exclude-from-sync="{f:if(condition:cropVariant.excludeFromSync, then:'true', else:'false')}"
|
||||
id="cropper-accordion-heading-{cropVariantIterator.cycle}"
|
||||
>
|
||||
<span class="caret"></span>
|
||||
<div class="panel-title">{cropVariant.title -> f:translate(id: cropVariant.title)}</div>
|
||||
<div class="cropper-preview-thumbnail {f:if(condition:'{image.properties.width}>{image.properties.height}', then:'wide', else: 'tall')}">
|
||||
<img class="cropper-preview-thumbnail-image" src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}">
|
||||
<div class="cropper-preview-thumbnail-crop-area t3js-cropper-preview-thumbnail-crop-area">
|
||||
<img src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}" class="cropper-preview-thumbnail-crop-image t3js-cropper-preview-thumbnail-crop-image">
|
||||
<div class="cropper-preview-thumbnail-focus-area t3js-cropper-preview-thumbnail-focus-area"></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="cropper-collapse-{cropVariantIterator.cycle}"
|
||||
class="panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'show')}"
|
||||
role="tabpanel"
|
||||
aria-labelledby="cropper-accordion-heading-{cropVariantIterator.cycle}"
|
||||
data-bs-parent="#accordion-cropper-variants"
|
||||
>
|
||||
<div class="panel-body">
|
||||
<form class="form">
|
||||
<f:if condition="{cropVariant.allowedAspectRatios}">
|
||||
<label class="form-label" for="ratio-{cropVariantIterator.cycle}">
|
||||
<f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
|
||||
</label>
|
||||
<div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons">
|
||||
<f:for each="{cropVariant.allowedAspectRatios}" as="ratio" iteration="ratioIterator">
|
||||
<label
|
||||
class="btn btn-default"
|
||||
data-method="setAspectRatio"
|
||||
data-bs-option="{ratio.id}"
|
||||
title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}"
|
||||
>
|
||||
<input
|
||||
class="visually-hidden"
|
||||
id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
|
||||
name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
|
||||
value="{cropVariant.id}"
|
||||
type="radio"
|
||||
/>
|
||||
<span class="t3-js-ratio-title" data-ratio-id="{cropVariant.id}{ratio.id}">{ratio.title -> f:translate(id: ratio.title)}</span> <core:icon identifier="actions-check" size="small" />
|
||||
</label>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
<label><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.selection" /></label>
|
||||
<div class="mb-3 t3js-cropper-info-crop"></div>
|
||||
<button
|
||||
class="btn btn-default"
|
||||
name="reset"
|
||||
data-crop-variant="{cropVariant -> f:format.json()}"
|
||||
title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}"
|
||||
>
|
||||
<core:icon identifier="actions-refresh" size="small" />
|
||||
{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user