Integrating with WP UserFrontend Forms

Hi @ozipete

Thanks for the good words ??

Can you please send me a public URL of the page that you want to integrate Pixo? Most probably something is not right with the file input selector…

• This reply was modified 2 years, 9 months ago by Ickata.

Thanks for a quick response, I can make a test page for you & account, as the ‘create post’ page with the said form is behind a member wall.

User = Demo
Password = 123?Demo$

URL with the form
https://www.noticeboards.io/demo/

Once you have dealt with this I will take down Demo Acc

Much Appreciated.

Hi @ozipete ,

Even if I log in – I see this:

Members Only can create a post. Please Log in / Register to view this page.

Appreciate your concern and time, Apologies for that. I have tried on three diff browsers and logged in ok and can view that page, so I cant reproduce your scenario. I did notice a small glitch Im troubleshooting that just requires a refresh of page or click on other page and user is logged in… Hope that works for you, otherwise I will have to find another way for you to view..

Managed to get in (problem was very aggressive browser cache).

I saw what the problem is – corrupt settings in wp-admin. Unfortunately I do not know how that happened – no matter how I tried, I couldn’t reproduce it.

Since I do not have access to wp-admin – can you please do the following:

1. Go to wp-admin
2. Go to Pixo Settings
3. Go to Frontend tab
4. Open browser devtools
5. Execute the following code in the Console (copy-paste and press Enter): pixo_config.value = JSON.stringify(Pixo.DEFAULT_CONFIG);
6. Click any of the Update blue buttons

This should fix the data and most probably Pixo will work in your front-end (or at least we’ll be able to see what the next problem (if any) is ?? )

Let me know what happened.

Appreciate the quick response.

Ok did as instructed and when I clicked “Enter” in Console came back with
{"output":{"format":"auto","quality":1,"optimize":false}}

I then clicked the update button on the Pixo Settings page
re-tested and I still have the same issue sorry to say.
Hope I completed your task correctly?
However, it might give you a clue of how to proceed, Appreciated.

This is a new local social platform I’m creating with approx 30 beta testers, so if it’s easier I can give you some access to the admin areas required if necessary, just let me know how to get details to you to access.

Hey @ozipete ,

Sorry for the delay.

Can you please tell me how do you try to init Pixo in your front-end? I can see in the source code that Pixo is instructed to attach to “file”, however there isn’t such HTML element with this ID.

Can you please go to your Pixo Settings –> Frontend in wp-admin, check “Init Pixo Editor globally for each File Input element” and make sure that the “Global CSS Selector” is input[type=file] and see if this works for you?

I appreciate your time, no need for apology.

Ok, I do apologise as you must have looked at it when I was testing a few things myself in that global css selector. I have tried that input[type=file] before and tried again to no avail, but will leave alone now if you wish to see the html.

When I was doing some testing I looked again at the demo you have on your demo page. I noticed you have the upload button, which uploads image, then next to it has button “Edit with Pixo” next to it which triggers Pixo to open with the image. Could I implement something like that, as that is almost what happens within the form to create a post.

Else, I may have to have “Edit Picture” page first, then a member can download it and re-upload to create a post. This is the only workaround I have to try.
Appreciated.

To add to above comment, the workaround works, however obviously not the best option.
Demo Page Here

I had a look. I regret to say, but Pixo cannot integrate (easily) with this WP plugin. This plugin does not handle file selection regularly. What it does is – it directly uploads the selected file on select to WP Media, and sets the returned media ID to the form, in a hidden form field. Pixo relies on the file input field to get the image from, but this form plugin removes it upon selection and upload.

Using a native file input element, like you did in demo1, will do. It can be styled in a way so it looks as closer as possible to the [Upload] button of the form plugin that you are using. But it requires some coding.

Thanks so much for your time, you’re a champ!

I sort of figured that is what it was doing during my testing, else it would work no problems I get it.

Was hoping there would be a simple way about it.

I will work with Demo 1, style and configure some “hand held” steps for the user to edit image and download to post all on the same page…and maybe even have a blank image ready for members who just want a text post…

Pixo is perfect for my local social, and glad there is a front end plugin now…keep up the good work!

Thank you for the good words! In case you need further help- I’m available.

To complete this discussion with my outcome… that I’m more than pleased with.

In the WpFrontEndUser form creator it allows for custom html, so I added this to actual page that displays form [pixoeditor download="true"] then I added into the html custom field in form creator `<strong style=”font-weight:800;”> EDIT Photo Before Upload? </strong> >>
<input id=”file” accept=”image/*” type=”file” />`

That produces a line above the original upload button, with EDIT Photo Before Upload? “Choose File” button, they click that, attach photo and Pixo pops up for user to edit.

When they “Save” it saves automatically on a mobile device to phone gallery, and prompts to download on other devices. Then all they have to do is click “Upload” button in form in front of them and find that edited photo on device and upload, so far it works like a dream, it flows well and kinda works better cause they have the choice to edit or not.

I changed the password to demo account but if you would like to see my final solution, just hollow. Again thanks appreciated greatly for the support.

• This reply was modified 2 years, 9 months ago by ozipete.

@ozipete Sorry for leeching, but I am having the same issue. Tried stealing your solution with the html and [pixoeditor download=”true”] , but all I get is an input field, no button for upload/edit. I am no coder, so if you have a spare minute to let me know how you managed it that would be greatly appreciated!

• This reply was modified 2 years, 8 months ago by avaritia91. Reason: clarification

I’ll try, but not sure of everything in your setup. and I made only some slight changes after my last comment. Hope this helps now. It’s been working like a dream.

In the Pixo Admin Settings, Global Editor I have ….

Init Pixo Editor globally for each File Input element = Checkmarked
input[type=file] in Global CSS
Users can download edited image = Checkmarked

On the page the WPUF Form is on to create post, I have this …

[pixoeditor download="true"]
Have You Tried the Editor=<input style="display:none" type="file" accept="image/*" id="my-file">
<button type="button" class="wpuf-button wpuf-insert-image" onclick="document.getElementById('my-file').click()">Edit Photo</button>

I wanted to have “Edit Photo” instead of the default, hence the addition of button

Cheers from Australia.