[Resolved] Is there any way to limit image dimensions on a custom image field?

[Author]

Posts

[melodyM]

We have a custom image field being used in one of our custom content types. We would like to restrict this image field to only allow images with the precise dimensions of 585 x 585. Is there any way to do this?

We intend to use this field in a Post Form where end users will be supplying the content. We need them to supply an image, but the image MUST be 585 x 585. We have that mentioned in the field label, but it would be better if the field would actually validate based on these dimensions and reject the submission if an image with different dimensions is provided.

[Minesh]

Hello. Thank you for contacting the Toolset support.

To validate the Toolset form, you will require to use the Toolset form hook "cred_form_validate".
=> https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate

For example:
You can add the following code to "custom code" section offered by Toolset:
=> https://toolset.com/documentation/programmer-reference/adding-custom-code/using-toolset-to-add-custom-code/

add_action('cred_form_validate', 'validate_image_dimensions',10,2);
function validate_image_dimensions($error_fields, $form_data) {
  
$forms = array( 99999);
    
  // Field data are field values and errors
  list($fields,$errors)=$error_fields;
  if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-image']['tmp_name']) ) {
    $target_max_width = 585;
    $target_max_height = 585;

    $check = getimagesize( $_FILES['wpcf-image']['tmp_name'] );
    
    if ( $check !== false ) {
        // check the dimensions only, independent of the orientation.
        // if the height is greater than the width, switch the values for comparison.
        $width = ($check[0] >= $check[1]) ? $check[0] : $check[1];
        $height = ($check[1] < $check[0]) ? $check[1] : $check[0];
   
        if ( $width !=  $target_max_width || $height != $target_max_height ) {
            $errors['image'] = __("Your image exceeds the permissible dimensions. Please resize and try again.");
        }
    }
  }
  $field_data = array($fields,$errors);
  //return result
  return $field_data;
}

Where:
- Replace 99999 with your original form ID
- Replace image with your original custom field slug.
- You are welcome to modify the above code as per your requirements.

[melodyM]

OK, I made the changes, but one thing I notice is that you are checking if the image is larger than 585 x 585 and if it does then you return the message "Your image exceeds..."

I wanted to see if it can just have a message saying "Your image does not match the permissible dimensions..." and make sure that it is also checking if the dimensions are smaller than allowed.

We need the image to be PRECISELY 585 x 585 as the ONLY allowed dimensions, not that size or smaller.

Also, I must have done something wrong because I just tested it and it still allowed a larger image through.

The form I'm testing this on is here:
hidden link

The post form ID is (ID: 7947) so I changed this:

$forms = array( 99999);

to

$forms = array( 7947);

The image field slug is freelancer-image, so I changed both instances of 'wpcf-image' to 'wpcf-freelancer-image' and the instance of 'image' after $errors to 'freelancer-image'. Is that correct or did I miss something?

Thanks hugely for providing this! As a feature request, I'd recommend building filesize and image dimension validation checks into the image upload field for forms as something I think many would get use from.

[Waqar]

Hi,

Thanks for writing back.

Minesh is on vacation, so I'll be following up on this ticket.

I've made slight changes to the code that Minesh shared and tested it on my website and it works as expected.

add_action('cred_form_validate', 'validate_image_dimensions',10,2);
function validate_image_dimensions($error_fields, $form_data) {

	$forms = array( 7947 );
	$target_dimension_to_check = 585;
	$target_field_to_check = 'freelancer-image';

	// Field data are field values and errors
	list($fields,$errors)=$error_fields;
	if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-'.$target_field_to_check]['tmp_name']) ) {
		$check = getimagesize( $_FILES['wpcf-'.$target_field_to_check]['tmp_name'] );
		if ( $check !== false ) {
			if ( !( ($target_dimension_to_check == $check[0]) && ($target_dimension_to_check == $check[1]) ) ) {
				$errors[$target_field_to_check] = __("Your image dimensions are different from the recommended size!");
			}
		}
	}
	$field_data = array($fields,$errors);
	//return result
	return $field_data;
}

Can you please test it and let me know how it goes?

regards,
Waqar

[melodyM]

It looks like it is working to restrict the file to 585 x 585. I tried submitting the form using an image that was not those dimensions and it didn't go through. Then I tried submitting the form using an image that was the correct dimensions and it worked. So that step looks like it is good.

But there is still a problem with the error message. I changed the text to say "Your image dimensions are different from the required size!". But that message did not show when the submission failed. What it did when I submitted with an improperly sized image was the form looked like it went through the submission process, but then it went back to the top of the page and when you scroll down to that image field, it says in red "Freelancer Image This field is required." So it does block it properly, but the preferred text explanation for why it didn't go through didn't work.

[Waqar]

Thank you for sharing this update.

From the code of your form and the behavior that you've shared, it seems that the "Form Messages" field is not included in your form.
( this field is included, by default in all forms - example screenshot: hidden link )

Can you please check your form and make sure that this field is included?

Note: when using the expert mode, this field is included through the shortcode:

[cred_field field='form_messages' class='alert alert-warning']

[melodyM]

That was it. I must have moved that out when I was trying to figure out the page title issue previously. I re-added it at the top and the correct message displayed this time when I uploaded an image of the wrong size.

Thanks hugely!