[Resolved] Featured Image Size Validation in Form

[Author]

Posts

[J S]

I'm using a CRED form to collect custom post types with custom fields using the Classfieds demo site as the template. In the form there is an image upload field and I'd like to validate the image size to ensure the form collects an image large enough that it will work in my design.

I came across this post on how to validate the image size. https://toolset.com/forums/topic/form-with-image-resolution-check/

Questions, relating to this:

1. Is there anyway to validate the image when the image is selected rather than waiting to validate it until the form is submitted?

2. Do the dimensions specified in the link above affect whether the image can be portrait or landscape? I don't want any restriction on the orientation of the image, but do want to be sure the images are at least a minimum size so they don't appear pixelated. Can you please elaborate on this?

[Christian Cox]

1. Is there anyway to validate the image when the image is selected rather than waiting to validate it until the form is submitted?
Yes, there is another API cred_form_ajax_upload_validate for this purpose. You can use this ticket as a reference for validating image sizes when they are uploaded, rather than waiting for the form to be submitted: https://toolset.com/forums/topic/having-problem-with-restricting-file-types-on-file-upload-cred-field/

2. Do the dimensions specified in the link above affect whether the image can be portrait or landscape?
Yes, the custom code provided there is orientation-specific. It's also checking for a specific size, not a minimum size. So if someone tried to submit a picture that is 200px wide and 300px tall, it would fail the validation. Similarly if someone tried to submit a picture that is 299px wide and 199px tall, it would fail. For a minimum size without orientation dependence, you could modify it to this:

function validate_featured_image_size( $field_data, $form_data ){
 
    $form_id = array( 183 ); // add IDs of CRED forms
 
    $target_min_width = 300; // Edit
    $target_min_height = 200; // Edit
 
    if ( in_array( $form_data['id'], $form_id ) ) {
 
        // Split field data into field values and errors
        list( $fields,$errors ) = $field_data;
 
        $check = getimagesize( $fields['_featured_image']['value'] );
 
        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_min_width || $height < $target_min_height ) {
                $errors['_featured_image'] = "Image wrong size";
            }
        }
 
        $field_data = array($fields,$errors);
    }
 
    return $field_data;
}
add_action( 'cred_form_validate', 'validate_featured_image_size', 10, 2 );

Change the form ID and the minimum height and minimum width values.

[J S]

Ok, thank you. Does the modified code you provide in #2 above pertain to the validation "when uploaded" or when "form is submitted"?

If modification is for "when submitted" how can the minimum dimensions code be modified to apply "when uploaded"?

[Christian Cox]

The previous code is for form submission. Here is the updated code for AJAX submission of a custom field image:

add_action('cred_form_ajax_upload_validate', 'toolset_min_img_size_restriction',10,2);
function toolset_min_img_size_restriction($error_fields, $form_data) {
  $forms = array( 123 );

  // Field data are field values and errors
  list($fields,$errors)=$error_fields;
  if (in_array($form_data['id'], $forms ) && isset($_FILES['wpcf-single-img']['tmp_name']) ) {
    $target_min_width = 300;
    $target_min_height = 200;
    $check = getimagesize( $_FILES['wpcf-single-img']['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_min_width || $height < $target_min_height ) {
            $errors['single-img'] = __("Image too small", "your-theme-domain");
        }
    }
  }
  $field_data = array($fields,$errors);
  //return result
  return $field_data;
}

Replace "single-img" with the slug of your custom field in all 3 places. Notice that the first two use the "wpcf-" prefix but the third does not. You should maintain this format. Replace 123 with the numeric ID of this Form, or a comma-separated list of Form IDs. Replace 300 and 200 with the desired minimum dimensions. You can modify the error message "Image too small" as well as the theme domain context for translations.