mummert/eventmanager-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust FilePond sizing and upload resize rules

Browse Source
This commit is contained in:
Jürgen Mummert
2026-03-01 10:56:38 +01:00
parent 3942569fb3
commit 15a93466b6
2 changed files with 76 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/templates/frontend/event_edit.html.twig
+38
View File
@@ -10,11 +10,19 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
<style>
.module-event-edit .filepond--root {
width: 400px;
height: 600px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
{{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -212,6 +220,12 @@
if (typeof window.FilePondPluginImagePreview !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
}
if (typeof window.FilePondPluginImageResize !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImageResize);
}
if (typeof window.FilePondPluginImageTransform !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
}
const filePondOptions = {
instantUpload: false,
@@ -220,6 +234,30 @@
allowReplace: true,
credits: false,
acceptedFileTypes: ['image/*'],
allowImageResize: true,
imageResizeUpscale: false,
allowImageTransform: true,
onaddfile: function (error, fileItem) {
if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
return;
}
const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
if (fileType === 'image/svg+xml') {
fileItem.setMetadata('resize', null);
return;
}
fileItem.setMetadata('resize', {
mode: 'contain',
upscale: false,
size: {
width: 2000,
height: 2000
}
});
},
labelIdle: 'Bild hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
};