Skip to content

Add an image watermark (without Editor)

Use this snippet to automatically overlay an image on the bottom-right of every uploaded image if you don’t have the Image Hopper Editor add-on enabled. If you do have the Editor, see Add an image watermark automatically for an alternative approach.

Automatically add an image watermark to the bottom-right of every image:

// Add an image watermark to the bottom-right corner.
gform.addFilter('image_hopper_filepond_config', function (config, FilePond, $form, currentPage, formId, fieldId, entryId, files, inputField) {
  FilePond.setOptions({
    fileMetadataObject: {
      // The `markup` property defines our watermark.
      markup: [
        [
          'image',
          {
            right: '10px',
            bottom: '10px',
            width: '150px',
            height: '150px',
            src: 'https://example.com/wp-content/uploads/2020/12/watermark.png',
            fit: 'contain'
          }
        ],
      ]
    }
  });
  config.imageTransformOutputQualityMode = 'always';
  return config;
});

Note: Replace the src URL with the full path to your watermark image in the media library. Use a transparent PNG for transparency.