Image Crop/Resize Function/Code Sinppet/Plugin to adjust/crop images during upload

Question

We have a Directory website http://prntscr.com/e76vrf running at LISTABLE Theme.

1. Currently, when a User Signs Up and Upload the "Profile Photo", "Cover Photos" there is no provision to adjust the Photo and the wider photos cut off after saving them. So we want to add an image resizer/cropper which can let users to resize or crop the image. I tried to find a plugin this but I was not able to settle on any. Do you know of a code snippet/function or may be a plugin which can do this? Let me know how to integrate the code if it's a code solution.

2. Also, How I can dynamically fetch and show the total numbers of listings on the home page http://prntscr.com/e76u5i

Please advise with the most efficient solution. Thanks in advance!

Answer 1

-= 1 =-

This is untested and might not work with your theme if it's using a custom function to upload the actual images, but I would add the size you want using add_image_size( 'profile_photo', $width, $height, array( 'center', 'middle' ) ); to your functions.php file.

Then you can retrieve the image using wp_get_attachment_image_src() passing as the size argument, your custom size name profile_photo created with add_image_size().

As a side note, the wp_handle_upload_prefilter filter only works in the admin area. So keep that in mind.

Also, I'm thinking that your theme might already be using add_image_size for profile images, it might already be declared in your functions.php file. Check it out as you might be able to adjust the size there already.

-= 2 =-

For your second question, again this is dependant on your setup but I would suggest you check out the found_posts property of the WP_Query object.

So you can build a query that looks for all your listings and echoes the found_postsproperty for that query object, similar to

$args = array (
  'post_type' => 'listings', // assuming your listing have their own post type
  'post_per_page' => -1,

);


$my_query = new WP_Query( $args );

// Then print where you want
echo $my_query->found_posts;

of course you can modify your query to filter your posts by other arguments suiting your needs. Check out the WP_Query for all available arguments and properties.

Answer 2

What you need is the wp_handle_upload_prefilter for performing actions on images right after they're uploaded but before they are actually saved.

You could perform various actions on the file such as image resizing.

Use
if ( false !== strpos ( $file['type'], 'image' ) )
to determine if the uploaded file is an image.
$file['tmp_name'] will point to the actual file before it's saved, i.e. The file's temporary name, this is the file you need to perform actions on.

Answer 3

I am not sure if I understand the question correct.

Here is a solution on how to resize the image on upload, so users wont be able to upload images larger than 1920x1920. This way you can instruct your users to always upload the largest image, and the website will do the rest for you to save disk space.

// Hook the function to the upload handler
// https://developer.wordpress.org/reference/hooks/wp_handle_upload/
add_filter('wp_handle_upload', 'resize_image_after_upload');

function resize_image_after_upload($image_data){
  // Set to null to disable that width/height resizing
  $max_width  = 1920;
  $max_height = 1920;

  // Check if there is a valid file
  if(empty($image_data['file']) || empty($image_data['type'])) {
    return $image_data;
  }

  // NOTE: We are not resizing any gifs, to avoid resizing animated gifs
  //      (which I think is the most common gif nowadays)
  $valid_types = array('image/png','image/jpeg','image/jpg', 'image/webp');
  if(!in_array($image_data['type'], $valid_types)) {
    return $image_data;
  }

  // Get image image_editor
  // https://developer.wordpress.org/reference/classes/wp_image_editor/
  $image_editor = wp_get_image_editor($image_data['file']);
  if(is_wp_error($image_editor)) {
    return $image_data;
  }

  // Check if the image editor supports the image type
  if(!$image_editor->supports_mime_type($image_data['type'])) {
    return $image_data;
  }

  // Perform resizing
  $sizes = $image_editor->get_size();
  if((isset($sizes['width']) && $sizes['width'] > $max_width)
    || (isset($sizes['height']) && $sizes['height'] > $max_height)) {
    // Resize, but do not crop
    $image_editor->resize($max_width, $max_height, false);

    // We will use the default recommended image quality
    // Change, if you want to set a custom quality
    //$image_editor->set_quality(90);

    $image_editor->save($image_data['file']);
  }

  return $image_data;
}

Hope this helps! If I ever update this snippet, you can also find it on my blog. There is also a plugin for this, but I personally like a small snippet more.