Ok, going over things I see where the javascript needs editing for each installation.
Here is the form tpl I used (it’s modified from the default as little as possible):
<a name="jf[+notes.link.id+]"></a>
<h2>[+form.edit:is=`1`:then=`Edit Note`:else=`Add a Note`+]</h2>
<div class="notes-list">
<ul>
<li>Required fields are marked with <b>*</b>.</li>
</ul>
</div>
[+form.error:isnt=`0`:then=`
<div class="notes-err">
[+form.error:select=`
&-3=You are trying to re-submit the same post. You have probably clicked the submit button more than once.
&-2=Your post has been rejected.
&-1=Your post has been saved, it will first be reviewed before it is published.
&1=You are trying to re-submit the same post. You have probably clicked the submit button more than once.
&2=The security code you entered was incorrect.
&3=You can only post once each [+notes.postdelay+] seconds.
&4=Your post has been rejected.
&5=[+form.errormsg:ifempty=`You didn't enter all the required fields`+]
`+]
</div>
`:strip+]
[+form.confirm:isnt=`0`:then=`
<div class="notes-cfm">
[+form.confirm:select=`
&1=Your post has been published.
&2=Your post has been saved, it will first be reviewed before it is published.
&3=post saved.
`+]
</div>
`:strip+]
<form method="post" action="[+form.action:esc+]#jf[+notes.link.id+]" class="notes-form">
<fieldset>
<input name="NotesForm" type="hidden" value="[+notes.id+]" />
<input name="NotesNow" type="hidden" value="[+notes.seed+]" />
<input name="parent" type="hidden" value="[+form.field.parent+]" />
[+form.moderation:is=`1`:then=`
<div class="notes-row">
<b>Created on:</b> [+form.field.createdon:date=`%a %B %d, %Y at %H:%M`+]<br />
<b>Created by:</b> [+form.field.createdby:userinfo=`username`:ifempty=`[+notes.guestname+]`+]<br />
<b>IP address:</b> [+form.field.secip+]<br />
<b>Published:</b> [+form.field.published:select=`0=No&1=Yes`+]<br />
[+form.field.publishedon:gt=`0`:then=`
<b>Published on:</b> [+form.field.publishedon:date=`%a %B %d, %Y at %H:%M`+]<br />
<b>Published by:</b> [+form.field.publishedby:userinfo=`username`:ifempty=` - `+]<br />
`+]
[+form.field.editedon:gt=`0`:then=`
<b>Edited on:</b> [+form.field.editedon:date=`%a %B %d, %Y at %H:%M`+]<br />
<b>Edited by:</b> [+form.field.editedby:userinfo=`username`:ifempty=` -`+]<br />
`+]
</div>
`:strip+]
[+form.guest:is=`1`:then=`
<label for="name[+notes.id+]">Name:<br />
<input tabindex="[+notes.seed:math=`?+1`+]" name="name" type="text" size="40" value="[+form.field.custom.name:esc+]" id="name[+notes.id+]" />
</label>
<label for="email[+notes.id+]">Email:<br />
<input tabindex="[+notes.seed:math=`?+2`+]" name="email" type="text" size="40" value="[+form.field.custom.email:esc+]" id="email[+notes.id+]"/>
</label>
`:strip+]
<label for="title[+notes.id+]">Subject:<br />
<input tabindex="[+notes.seed:math=`?+3`+]" name="title" type="text" size="40" value="[+form.field.title:esc+]" id="title[+notes.id+]"/>
</label>
<label for="content[+notes.id+]">Comment: *<br />
<textarea tabindex="[+notes.seed:math=`?+4`+]" name="content" cols="50" rows="8" id="content[+notes.id+]">[+form.field.content:esc+]</textarea>
</label><br />
<label for="wtImage[+notes.id+]">Image:<br />
<input tabindex="[+notes.seed:math=`?+6`+]" name="image" type="text" size="20" value="[+form.field.custom.image:esc+]" id="wtImage[+notes.id+]" /><input type="button" value="Select Image" onclick="BrowseServer('[+notes.id+]')" />
</label><br />
<label for="category[+notes.id+]">Category: <br />
<select name="category" id="category[+notes.id+]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</label><br />
[+notes.captcha:is=`1`:then=`
<div style="width:150px;margin-top: 5px;margin-bottom: 5px;"><a href="[+notes.link.current:esc+]"><img src="[(base_url)]manager/includes/veriword.php?rand=[+notes.seed+]" width="148" height="60" alt="If you have trouble reading the code, click on the code itself to generate a new random code." style="border: 1px solid #003399" /></a></div>
<label for="vericode[+notes.id+]">Help prevent spam - enter security code above:<br /><input type="text" name="vericode" style="width:150px;" size="20" id="vericode[+notes.id+]" /></label>
`:strip+]
<div style="float:right;width: 100px;"></div>
<input tabindex="[+notes.seed:math=`?+5`+]" name="submit" type="submit" value="[+form.edit:is=`1`:then=`Save Comment`:else=`Post Comment`+]" />
[+form.edit:is=`1`:then=`
<input tabindex="[+notes.seed:math=`?+5`+]" name="submit" type="submit" value="Cancel" onclick="history.go(-1);return false;" />
`+]
</fieldset>
</form>
The addition for the image field is
<label for="wtImage[+notes.id+]">Image:<br />
<input tabindex="[+notes.seed:math=`?+6`+]" name="image" type="text" size="20" value="[+form.field.custom.image:esc+]" id="wtImage[+notes.id+]" /><input type="button" value="Select Image" onclick="BrowseServer('[+notes.id+]')" />
</label><br />
The javascript (at the bottom of the resource content in <script>...<script> tags along with the function for ordering):
unction OpenServerBrowser(url, width, height ) {
var iLeft = (screen.width - width) / 2 ;
var iTop = (screen.height - height) / 2 ;
var sOptions = 'toolbar=no,status=no,resizable=yes,dependent=yes' ;
sOptions += ',width=' + width ;
sOptions += ',height=' + height ;
sOptions += ',left=' + iLeft ;
sOptions += ',top=' + iTop ;
var oWindow = window.open( url, 'FCKBrowseWindow', sOptions ) ;
}
function BrowseServer(notesId) {
window.notesId = notesId;
var w = screen.width * 0.7;
var h = screen.height * 0.7;
OpenServerBrowser('/notes/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/notes/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/Applications/MAMP/htdocs/notes/assets/', w, h);
}
function SetUrl(url, width, height, alt){
document.getElementById('wtImage'+window.notesId).value = url;
}
The two parts that need attention are first the paths to the mcpuk browser; on my MAMP installation in a subdirectory:
OpenServerBrowser('/notes/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/notes/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/Applications/MAMP/htdocs/notes/assets/', w, h);
Then the function for loading the selected image’s path into the form field:
function SetUrl(url, width, height, alt){
document.getElementById('wtImage'+window.notesId).value = url;
}
If you’ve uploaded an image, you still have to click on the image in the browser to have its path loaded into the form field.