0

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!

3 Answers 3

0

-= 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.

2
  • Thanks @bynicolas... I will give it a try. You are always helpful and decent :) PS. I have started reading your blogs on bynicolas.com (waiting for new post). Also, I like the UI and UX of you your website bynicolas.com. I believe you have coded a custom theme for it... Is that right?
    – Sheryl
    Feb 13, 2017 at 2:55
  • @Sheryl Thanks for the kind words and for following my blog... I have a ton of articles waiting to be published (I just need to find time to finalize formatting!) Anyhow, you are correct, it's a custom theme based on the genesis framework. I'm glad you like it :) take care
    – bynicolas
    Feb 15, 2017 at 0:02
0

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.

6
  • thanks @kabiir ! However in which file should I write this code?
    – Sheryl
    Feb 11, 2017 at 11:36
  • This isn't something you can write in any file. It explains how you could achieve image resize during the upload process. If you want a complete solution you might want to check out WordPress plugin repository or CodeCanyon for premium plugins such as this one User Pro Feb 11, 2017 at 12:02
  • On StackExchange sites, you should ask one question per post and if you need Custom Customizations to your site you should hire someone rather than editing WordPress files yourself. This question is specific to a theme LISTABLE you should contact the developer for appropriate advice. The developer will be more familiar with your current settings and can give you most efficient advice. Feb 11, 2017 at 12:09
  • Thanks for your help on this!
    – Sheryl
    Jan 16, 2020 at 10:55
  • 1
    That's fine... Sometimes we humans act in a manner which we aren't!
    – Sheryl
    Mar 3, 2020 at 10:13
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.