PWimage plugin insert image in frontend form

[gebeer]

Hello all,

I have a frontend form with a CKEditor textarea and an image upload field.

The image upload is working fine.

But when I want to insert an image through the PWimage plugin, I get an error inside the modal window

Catchable fatal error: Argument 1 passed to ProcessPageEditImageSelect::getImages() must be an instance of Page, null given, called in /var/www/gocinet/wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module on line 179 and defined in /var/www/gocinet/wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module on line 129

This is happening on a page that has already been saved after adding the image.

A forum search for that error revealed only this post and it's related post. Nut they don't seem to offer a solution to my problem.

Line 179 in ProcessPageEditImageSelect.module says

$images = $this->getImages($this->page);

I'm not a coder, but I guess this means that $this->page returns a nullpage and thus the error.

I read quite a few posts about frontend image handling but didn't find anything related to my problem here.

Is it not possible to use the PWimage plugin on frontend forms? Or could this be related to permission settings for my frontend user?

EDIT: I changed the title of this post from "CKEditor..." to "PWimage plugin...", because the problem is not CKEditor specific, it seems.

[gebeer]

I changed the way I organize images.

Now my form doesn't contain an image field anymore. I moved image handling to it's own form because I need to have images organized per user and not per page.

I modified adrian's module that I found in this post to change the rootParent for wire/modules/process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module.

My ChangeImageSelectParent.module code now reads

class ChangeImageSelectParent extends WireData implements Module {

    public static function getModuleInfo() {
        return array(
            'title' => 'Change Image Select Parent',
            'version' => 1,
            'singular' => true,
            'autoload' => true
            );
    }

    public function init() {
        $this->addHookAfter('ProcessPageEditImageSelect::execute', $this, 'changeParent');
    }

    public function changeParent(HookEvent $event) {
        $user = $this->wire("user");
        if ($user->role == "frontend") {
            $rootPageID = wire("pages")->get("template=media, created_users_id={$user->id}")->id;
            $event->replace = true;
            $event->return = str_replace("rootPageID: 0", "rootPageID: ".$rootPageID, $event->return);
        }
    }

}

But I can't see if this has any effect because I still get the error from my first post:

Catchable fatal error: Argument 1 passed to ProcessPageEditImageSelect::getImages() must be an instance of Page, null given, called in /var/www/gocinet/wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module on line 179 and defined in /var/www/gocinet/wire/modules/Process/ProcessPageEditImageSelect/ProcessPageEditImageSelect.module on line 129

when I hit the insert image button in CKeditor.

So again my question: can we use PWimage plugin in frontend forms?

[gebeer]

OK talking to myself again - but at least I'm in good company

I'm looking through the code that builds the PWimage plugin and gets the pages to choose images from.

Namely

wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage/plugin.js

and

wire/modules/Process/ProcessPageImageSelect/ProcessPageImageSelect.module

In the former file the page_id is retrieved through

var page_id = $("#Inputfield_id").val(); 
		var edit_page_id = page_id;

Since my form is living on the frontend, I don't have $("#Inputfield_id").val() because $("#Inputfield_id") is not there.

Looking at the source code of the backend form, I can find this element:

<input id="Inputfield_id" name="id" value="11551" type="hidden" />

Where value 11551 is the id of the page I'm on.

For my frontend form I'm rendering the form with code from Soma's gist.

And that doesn't render the hidden input field with the value for the page I'm on. Hence the error.

Now I will go and add that input myself to the frontend form and report back here what the outcome will be

EDIT: sometimes a good glass of port wine can make you see things that you hadn't seen before

[adrian]

Sorry to be late on this, but I have made this work on the front-end and from memory, it sounds like you are on the right track with the Inputfield_id issue. Sorry, not enough time to look at things properly right now, but I think you are close

[gebeer]

Bingo

My assumption from my previous post was right. The PWimage plugin needs a hidden text input field with the value set to the page id of the page that you want to grab images from.

I added a hidden input field to my form with

$imgPageID = $pages->get("template=media, created_users_id=$uID")->id;
$field = $modules->get("InputfieldText");
$field->label = " ";
$field->attr("id+name","Inputfield_id");
$field->attr("value",$imgPageID);
$field->attr("type","hidden");
$adform->append($field);

Now I can choose images from the user's images page

And there is no custom module with hook to ProcessPageEditImageSelect required.

EDIT: This only works for PW 2.5. For 2.6.x some adjustments are needed. You'll find more info here

[gebeer]

After an upgrade from 2.5.2 to 2.6.3 my setup stopped working 

I cannot choose and insert images anymore in my frontend form CKEditor field with the pwimage plugin. If I click on the insert image button in the editor toolbar, nothing happens and it throws a js error:

TypeError: config.modals is undefined modal.js (line 66, col 5)

 

  var modal = config.modals[name];    

It seems the way the pwimage plugin works changed significantly.

I guess I need to load some additional scripts in the frontend to make this work again but I can't seem to find what is missing.

Any help would be much appreciated. 

EDIT

To make frontend forms work, I added this to the head:

	<?php if ($user->isLoggedin()) { ?>
	<script>
	<?php
	$jsConfig = $config->js();
	$jsConfig['urls'] = array(
	    'root' => $config->urls->root,
	    'admin' => $config->urls->admin,
	    'modules' => $config->urls->modules,
	    'core' => $config->urls->core,
	    'files' => $config->urls->files,
	    'templates' => $config->urls->templates,
	    'adminTemplates' => $config->urls->adminTemplates
	);
	?>
	var config = <?php echo json_encode($jsConfig); ?>;
	</script>
	<?php } ?>

This outputs a JS config variable in json format. When I compare the output of config from the admin page edit source to my frontend page edit source, I find that following part is missing in the config json on the frontend:

    "modals": {
        "large": "15,15,30,30,draggable=false,resizable=true,hide=250,show=100",
        "medium": "50,49,100,100",
        "small": "100,100,200,200",
        "full": "0,0,0,0"
    },
    "JqueryWireTabs": {
        "rememberTabs": 0
    },

Now what do I need to add when building the json via PHP so that this gets included also on the frontend?

EDIT2:

I think I found it. In wire/config.php around line 848 there is

$config->modals = array(
	'large' => "15,15,30,30,draggable=false,resizable=true,hide=250,show=100", 
	'medium' => "50,49,100,100", 
	'small' => "100,100,200,200",
	'full' => "0,0,0,0",
);

I added this to my code so it now reads:

	<?php if ($user->isLoggedin()) { ?>
	<script>
	<?php
	$config = $this->wire('config');
	$jsConfig = $config->js();
	$jsConfig['modals'] = $config->modals;
	$jsConfig['urls'] = array(
	    'root' => $config->urls->root,
	    'admin' => $config->urls->admin,
	    'modules' => $config->urls->modules,
	    'core' => $config->urls->core,
	    'files' => $config->urls->files,
	    'templates' => $config->urls->templates,
	    'adminTemplates' => $config->urls->adminTemplates
	);
	?>
	var config = <?php echo json_encode($jsConfig); ?>;
	</script>
	<?php } ?>

And, voila, the modal for selecting images is now working again on my frontend form