I am trying to: hidden link
WordPress "medium" size is maximum 300px by 300px, not exactly 300x300. Neither of these images is larger than 300px wide or 300px tall, so there is no cropping applied. Your site's CSS is shrinking these images down to fit in a specific width, but the images are not rectangular. That's why they are disproportionately scaled.
So what can I do to make sure that any uploaded image for the custom image field is squared up once uploaded? My clients will be uploading these so they might upload any size and most of them do not know how to crop or resize the images.
So what can I do to make sure that any uploaded image for the custom image field is squared up once uploaded?
It's complicated, especially when you'r talking about pictures of people and a grid with responsive dimensions. You could use the Forms API to validate the uploaded photo dimensions and require at least 300x300, then crop it to 300x300 using the Types shortcode. Otherwise, the images might not fill up the available space or they might be skewed. Even with image validation, when you crop using the Types field shortcode, you might crop out someone's face. For example, if the face is in the bottom right corner of a large image and you crop from the top left, the face might be cropped out. That's why Facebook and other sites let you move the image around and scale it.
Here's information about our validation API: https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_ajax_upload_validate
Here's more information about what you can do with resizing, cropping, and keeping things proportional with the Types field shortcode:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
Wouldn't be nice if Toolset had the same feature as Facebook? To be able to move the image around and scale it? Any plans on this feature coming out soon?
No plans I'm aware of, but I encourage you to submit your idea using our feature request form: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
That will let our management know you're interested in this feature.
I've added some codes to the code you have provided before. I got it from this page - hidden link
I added the validation for the dimension and extension, but it doesn't seem to work. What am I doing wrong?
//Limit upload file size for SINGLE image custom field
add_filter('cred_form_ajax_upload_validate','img_size_validation',10,2);
function img_size_validation($error_fields, $form_data)
{
error_log(' validation script is invoked ');
$forms = array( 29, 49, 1355 );
$size = 1024000;
$field_slug = 'foto-perfil';
$error_msg = 'Tamanho Max é de 1MB, por favor use uma foto com um tamanho menor que 1MB.';
// Get Image Dimension
$fileinfo = @getimagesize($_FILES['wpcf-' . $field_slug]["tmp_name"]);
$width = $fileinfo[0];
$height = $fileinfo[1];
$allowed_image_extension = array(
"png",
"jpg",
"jpeg"
);
// Get image file extension
$file_extension = pathinfo($_FILES['wpcf-' . $field_slug]["name"], PATHINFO_EXTENSION);
if (! in_array($file_extension, $allowed_image_extension)) {
$response = array(
"type" => "error",
"message" => "Upload valid images. Only PNG and JPEG are allowed."
);
echo $result;
}
// Validate image file dimension
if ($width > "300" || $height > "300") {
$response = array(
"type" => "error",
"message" => "Image dimension should be within 300X300"
);
}
//field data are field values and errors
list($fields,$errors)=$error_fields;
//error log
//validate if specific form
if (in_array( $form_data['id'], $forms ) && isset($fields['wpcf-' . $field_slug]['field_data']['size']))
{
error_log(' this is one of the forms where the image size validation should be applied ');
//check if this field instance img is bigger than $size (bytes)
//$instance_size = array_pop($fields['wpcf-' . $field_slug]['field_data']['size']);
// for single images
$instance_size = $fields['wpcf-' . $field_slug]['field_data']['size'];
error_log(' instance size: ' . $instance_size );
if ( $instance_size > $size )
{
//display error message for this field instance
$errors['wpcf-' . $field_slug] = $error_msg;
}
}
//return result
return array($fields,$errors);
}
Here is an example showing one way to validate image dimensions. The field slug in this example is "single-img":
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 ); // Edit - comma-separated list of Form IDs
// 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; // Edit, number of pixels
$target_min_height = 200; // Edit, number of pixels
$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;
}
Your code work perfectly! Is there anyway to add a verification to make sure only JPG, JPEG, or PNG are allowed? Do you have that code please?
I have some similar validation you can use as a guide:
add_action('cred_form_ajax_upload_validate', 'toolset_file_type_restriction',10,2);
function toolset_file_type_restriction($error_fields, $form_data) {
// all the valid file types
$file_types = array('application/pdf','image/jpeg','image/png','image/tiff','image/gif');
$forms = array( 123, 456 );
// Field data are field values and errors
list($fields,$errors)=$error_fields;
if (in_array($form_data['id'], $forms ) && (isset($_FILES['wpcf-file-field']['type']))) {
//Retrieve file type
$file_type_uploaded=$_FILES['wpcf-file-field']['type'];
//Validate files uploaded, make sure it is the correct file type
if (!in_array($file_type_uploaded, $file_types) ) {
//Validation failed,
// set error message per field
//Remove wpcf - prefix here!
$errors['file-field']='Sorry the file you have uploaded is not of the correct type. Accepted file types: pdf, jpg, gif, png, tiff';
}
}
//return result
return array($fields,$errors);
}
Worked like a charm! My issue is resolved now. Thank you!
Sorry, as I was testing with the multiple images, it did not work. For single image, it works fine. I have toolset_file_type_restriction as the function name for the single and I added an "M" for multiple and changed the field slug to the multiple image one.
The error shows even if I try uploading a jpg, jpeg, or a png. Not sure what's wrong.
Here is the code for multiple images:
//Acceptable files JPG, JPEG, PNG only MULTIPLE IMAGES
add_action('cred_form_ajax_upload_validate', 'toolset_file_type_restriction_M',10,2);
function toolset_file_type_restriction_M($error_fields, $form_data) {
// all the valid file types
$file_types = array('image/jpeg','image/png','image/jpg');
$forms = array( 29, 49, 1355 );
// Field data are field values and errors
list($fields,$errors)=$error_fields;
if (in_array($form_data['id'], $forms ) && (isset($_FILES['wpcf-fotos-para-anuncio']['type']))) {
//Retrieve file type
$file_type_uploaded=$_FILES['wpcf-fotos-para-anuncio']['type'];
//Validate files uploaded, make sure it is the correct file type
if (!in_array($file_type_uploaded, $file_types) ) {
//Validation failed,
// set error message per field
//Remove wpcf - prefix here!
$errors['fotos-para-anuncio']='O arquivo que você tentou enviar não é válido. Arquivos aceitos são: jpg, jpeg, e png';
}
}
//return result
return array($fields,$errors);
}
You should replace line 14 in the code above with this update for repeating fields:
$file_type_uploaded=$_FILES['wpcf-fotos-para-anuncio']['type'][0];
ok, I replaced the code. The first picture uploads fine, but the second gives the error.
Ah okay, I think I see the problem. Here's another update to fix that.
$file_type_uploaded = is_array($_FILES['wpcf-' . $slug]['type']) ? array_pop($_FILES['wpcf-' . $slug]['type']) : $_FILES['wpcf-' . $slug]['type'];
