Possible to validate image dimensions while uploading?

[aem-explorer]

Is it possible to validate if an image being uploaded to the page conforms to specific dimensions of height or width?

[BrianKasingli]

To address the issue of invalid image dimensions, you can implement a workflow that automates the detection and handling of such images. Here's a proposed solution:

1. Invalid Image Detection: First, we will set up a workflow that monitors newly uploaded images for their dimensions; in a particular folder path. When an image with invalid dimensions is detected, the next workflow will be triggered.

2. Automated Deletion: The workflow will then automatically delete the image to prevent it from being stored in the system. This step ensures that only images meeting our required dimensions are retained.

3. Author Notification: Simultaneously, the workflow will generate a notification that is sent to the author responsible for the image upload. This notification will clearly inform the author that the dimensions of the uploaded image were invalid and that the image has been removed as a result.

I hope this helps.

[markus_bulla_adobe]

Hi @aem-explorer!

For your use case, there are several things that need to be considered.

First of all, it's not possible to run a validation before the asset is completely uploaded to AEM. So you can't simply "reject" the file to be uploaded or notify the user when he selects the asset on his local computer or during the upload process. You'll have to wait until the asset upload is finished.

Once the upload is finished, you can run a validation workflow as outlined by @BrianKasingli. You could also simply hook-in to the OOTB DAM Asset Update workflow.

However, you'll need to define the desired behavior first. What should happen if a users uploads in image that has invalid dimensions?

• Automatically deleting the asset might irritate content authors and lead to non-optimal user experience for them. Imagine you just spend a significant amount of time uploading a large asset (maybe via a slow internet connection) and finding that the time was wasted because the files is deleted as soon as the upload is finished.
• Tagging the asset as "Invalid dimensions" with an according flag being displayed in AEM might be a better option. You could also notify the user in his inbox that the asset does have invalid dimension. You could also think about preventing asset publication based on the flag or invalid dimensions.

That being said, it's worth to consider what "invalid dimensions" means in terms of a business use case. In general, AEM is capable to handle even very large assets (both, in terms of resolution and file size) and it's possible to resize/downsize them for different use cases such as web delivery. Other output channels (e. g. print or further digital asset processing) might require higher/full resolution assets. Dynamic Media can resize assets assets on-the-fly based on various criteria without manual action by a content editor. AEM itself can also resize assets, being it as renditions or even resizing the uploaded original.If you are worried about assets that might be too small and not meet certain quality standards, please be aware that there might be cases where small assets are actually needed (such as decorative images, symbols, tags, previews or similar). Limiting your content authors always takes away some flexibility of the system.

Hope that helps!

[kautuk_sahni]

@aem-explorer Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[aem-explorer]

I was looking at validation when the author is dragging an image onto a component that does not conform to the height-width suitable for that component? The same image might be good for some other components so I do not want to put blockers for uploading to DAM but rather a validation error when uploading to a component.

[markus_bulla_adobe · Accepted solution]

Thanks for the clarification, @aem-explorer!

There are different approaches to this requirement.

You could most probably build a custom validation based on Granite UIs foundation validation as outlined here.

On the other hand, you could leverage renditions or smart cropping to ensure that all your assets do have proper variations to fit all available components, view ports, etc.

Hope that helps!