kilian but im not using the uploader, i add the images directly to folder.
I didn't read this before now. You can't really have Files Gallery automatically watermark and resize images that are added manually (without using the uploader), because Files Gallery simply loads images that are placed into the folder. It could be possible to load the images through a PHP script that resizes and adds a watermark, but that's not an option in Files Gallery. Besides, if you add images manually to folders, the original non-resized non-watermarked images would obviously remain in the folder, even if Files Gallery creates watermarked resized copies. It could perhaps delete the originals for you when the copy is created, but this entire process is not within the scope of Files Gallery.
If you want to watermark manually added images, you would probably use a command-line tool like ImageMagick, and simply run the command on a folder or the images you add to the folder.
https://www.the-art-of-web.com/system/imagemagick-watermark/
kilian all i need is watermark all the images (all sizes) , and when image is very big (for example 4k) resize to 1200px, small images keep same size
It is possible to use the built-in uploader for this. Keep in mind, if you want to place watermarks on ALL images, also those that are not resized, they will still get processed (re-compressed) because they need to be manipulated for the watermark, even if they are not resized. I tested the below successfully from _files/js/custom.js
_c.config = {
uppy: {
Compressor: {
interface: false, // disable the interface so resize/watermark applies automatically
enabled: true, // make sure it's enabled even when interface is disabled
strict: false, // disable strict, so that watermark always applies, even for images that are not resized
maxWidth: 1600, // only resize images that are beyond 1600px width
maxHeight: 1600, // only resize images that are beyond 1600px height
// quality: .8, // quality same as default. Better keep this empty (default)
drew: (context, canvas) => { // add watermark overlay
context.fillStyle = 'rgba(255, 255, 255, 0.75)';
context.font = '5rem serif';
context.textAlign = 'center';
context.fillText('My watermark be here', canvas.width / 2, canvas.height / 2);
},
error: function(err) {
window.alert(err.message);
}
}
}
}
The watermarking function can be changed depending on how you want the watermark, or you could also use an image (required more specific config).