[Resolved] Imaging cropping prior to submitting Form

[Author]

Posts

[FelipeP5703]

Tell us what you are trying to do?
I have been looking all over the internet for a solution to this issue. Here it is... when you have a site where you have users uploading images, you might want to set some kind of dimensions for the images that are being uploaded. For example, you want the feature imaged to be a square, so you can CSS it to be rounded and nice.

Unfortunately not all users are capable of cropping images themselves, therefore, we have to make it easier for them. By having a way for them to crop the image right after they select the image they want to upload. A great example is Facebook profile picture, when you upload an image, it lets you drag and crop the image where you want it.

I know Toolset Forms does not have such feature and I already have requested this feature. But I was wondering if there is a way to do it meanwhile.

I searched the internet and found out that there are html5 image editing scripts, JQuery imaging editing, etc. I'm not sure if it's even possible to combine Toolset's Form with a JQuery image editing software.

I found this one that could do the job: hidden link

It's JQuery but I'm not sure if it will do the job. So I followed the instructions by:
1) Putting the files in my theme's folder
2) Including the JQUERY code below in the Form (Formulario de Anuncio, id= )

jQuery(function($) {
        $('#target').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 1
        });
});

3) Added the id="target" to cred field

[cred_field field="foto-perfil" force_type="field" class="form-control" output="bootstrap" id="target"]

Now for implementation using php, here is where I got stuck. Here is the link: hidden link

I'm not sure where to add this function or what to call it:

<?php

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

// Comment out the header() call
// header('Content-type: image/jpeg');
imagejpeg($dst_r, $output_filename, $jpeg_quality);

?>

Is the SRC correct? Shouldn't it be something else with Toolset?

It also mentions that I need gd extension. Not sure what or how to implement it.

I know I'm asking a lot and it is probably out of the scope of support but if you could help me out, or at least guide me to the right direction, I appreciate it!

[Luo Yang]

Hello,

You are right, according to our support policy we don't provide custom codes support:
https://toolset.com/toolset-support-policy/
You might consider to check it with our Toolset Contractors:
https://toolset.com/contractors/

I assume we are talking about Toolset Forms plugin, in your case, it is possible to use WordPress built-in media manager to crop the images manually when user upload files, see our document:
https://toolset.com/documentation/user-guides/using-the-native-wordpress-media-manager-in-front-end-forms/

With WordPress built-in media manager user can click link "Edit Image", and crop the image manually, see screenshot: crop.JPG

And in front-end, you can also crop the featured image automatically, see our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image
crop (opt):
'false' | 'true'
Enable or disable the cropping of an image with custom size. False value is the default one.

For your reference.

[FelipeP5703]

Contractors that I have contacted did not respond.

Don't want to use WordPress built-in media manager because I don't want Authors (my users) to see all the images in there. They will also not crop if they are not forced to crop.

I'm not using featured image, I'm using a custom field image. Automatically cropping will crop the center of the image and not the face where it needs to be cropped. My customers tend to send pictures that are let's say 300 width and 15000000000 height (I'm exaggerating here but look at the attached image).

With that said, maybe you can guide me. Can I call a Jquery or Ajax function within that custom field "upload button" in Toolset Form?

Here this tutorial talks about it: hidden link

I just need to know if this would work, then I'll try to implement it. If you can guide, that's even better.

[Luo Yang]

Q1) Can I call a Jquery or Ajax function within that custom field "upload button" in Toolset Form?

Yes, it should be possible with custom codes.

Q2) I just need to know if this would work.

I am not sure if that would work, since it is not a built-in feature of Toolset Forms plugin, as I mentioned above, we don't provide custom codes, you can try it at your own risk.

In my opinion, you can consider this:
1) Use WordPress built-in media manager to upload/crop the images as I mentioned above:
https://toolset.com/forums/topic/imaging-cropping-prior-to-submitting-form/#post-1348571

2) Use filter hook cred_form_ajax_upload_validate to validate the uploaded image size:
https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_ajax_upload_validate
If your users do not crop the image in a special dimension, then show them an error message, force them to crop the image.

For the problem:
I don't want Authors (my users) to see all the images in there
you can try the solution in another thread here:
hidden link

[FelipeP5703]

I'm going to try your suggestion. But I have another concern. How do I limit Users to a X number of images? For example, I want to limit a total of 6 images for the multi-custom field image.

[FelipeP5703]

I've added the code below to the Custom Code snippet in Toolset settings and it's giving an undefined index notice on the homepage.

function my_files_only( $wp_query )
{
 
        if ( ! $_POST["action"] == "attachment" )
        {
                return;
        }
 
        if ( current_user_can( 'administrator' ) )
        {
                return;
        }
 
        global $current_user;
        $wp_query->set( 'author', $current_user->id );
 
}
 
add_filter('parse_query', 'my_files_only' );

I'm not a programmer, so I have no idea what I'm doing. :*( ***I have deactivated the code so it doesn't show in the home page.***

[FelipeP5703]

So apparently you don't even need that my_files_only code since Access has a setting for that. I tested it and I only see the images that user uploaded... so one thing down, two to go...

Now I still don't know how to limit the number of images per field. The code I had to limit was this below, but since the change of being able to add multiple images at once, the code does not work.

jQuery(function($) {
    $(".limit-to-6 .js-wpt-repadd").click(function(event) {
        $length = this.parentNode.childNodes.length;
        if ($length >= 6) {
            $(this).hide();
        }
    });
});

Then I added to the div like this:

<div class="form-group col-sm-6 limit-to-6">
			[cred_field field='fotos-para-anuncio' force_type='field' class='form-control' output='bootstrap']
		</div>

1) Use WordPress built-in media manager to upload/crop the images as I mentioned above: With WordPress built-in media manager user can click link "Edit Image", and crop the image manually, see screenshot: crop.JPG

I don't see an option to edit the photo, look at the screenshot. I have set properly in Access to allow Authors to edit their images. Look at the screenshot.

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/how-to-limit-the-number-of-images-per-field/

[Luo Yang]

Q1) I don't see an option to edit the photo

I can see the problem in my localhost, and trying to debug this issue, will update here if there is any found.

Q2) Now I still don't know how to limit the number of images per field.

This is a new problem, please check the new thread here:
https://toolset.com/forums/topic/how-to-limit-the-number-of-images-per-field/

[Luo Yang]

For the Q1) Please try this:
Dashboard-> Toolset-> Access control-> Custom Roles
- Enable advanced mode
- Find and Change permissions of the specific user role "Authors (my users)", in tab "Other capabilities", enable option "edit_files", and test again.

More help:
https://toolset.com/documentation/user-guides/managing-wordpress-admin-capabilities-access/#editing-capabilities-for-your-custom-roles

[FelipeP5703]

I did what you asked and nothing changed. Look at the screenshots

[Minesh]

Luo is not available currently. This is minesh here and I'll take care of this ticket. Hope this is OK.

Can you please share the problem URL and access details. Where exactly you would like to edit the uploaded image - using media uploader on frontend?

I have set the next reply to private which means only you and I have access to it.

[FelipeP5703]

I'm not going to use Media Library for uploading files. Also hired a programmer to do the cropping. My issue is resolved now. Thank you!

[meirk]

Felipe - did you hired a programmer?
Do you have a solution?
I need the same ability....