Add Javascript validation to Photo Directory submissions

[JeffPaul]

I’m getting an “Your photo must have a width and height of at least 2000 pixels each.” error post-submission on a photo that has 4032x2268 dimensions. So this would ideally be something we catch before someone submits (e.g. after browsing & selecting a photo locally) in case they have a higher res option and so they don’t lose the alt text/description provided for the photo as that’s stripped out when the page refreshes to show the error message.

[coffee2code]

There are already client-side JS checks for file dimensions (among various other things), though admittedly that part is a bit hacky.

However, given what you've said, the image has proper dimensions? Your minimum dimension is apparently 2268, which is greater than the 2000 minimum. So the JS wouldn't see the image as having incorrect dimensions. Which suggests a server-side issue (wrong dimensions being detected, wrong error being shown, hiccup with the processing, etc).

I'll reach out and request a copy of the image to debug this.

[JeffPaul]

A bit more context on this issue is ​noted in a Slack thread, but I'm copying here the sample image that causes this problem for further triage.

[JayDeep Nimavat]

I am having the same issue with this file.

[coffee2code]

In 14386:

Photo Directory, Uploads: Ensure override of 'big_image_size_threshold' takes precedence.

The parent theme of the new theme sets a threshold of 3200, which caused a scaled image to be used and potentially also return an insufficient dimensions error.

Props nilovelez, benniledl, jeffpaul, coffee2code.
Fixes #7854, #7888, #7904.