Have this code in a file (assets/js/imagebrowser.js); make sure to edit the ServerPath parameter of the OpenServerBrowser call near the bottom to have your correct full path to your assets folder.
function 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(jotId) {
window.jotId = jotId;
var w = screen.width * 0.7;
var h = screen.height * 0.7;
OpenServerBrowser('/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/path/to/public_html/assets/', w, h);
}
function SetUrl(url, width, height, alt){
document.getElementById('jotImage'+window.jotId).value = url;
}
and include it somewhere in your template or at the beginning of your document content (before the Jot call)
<script type="text/javascript" src="assets/js/imagebrowser.js"></script>
In your Jot form tpl:
<label for="jotImage[+jot.id+]">Image:<br />
<input tabindex="[+jot.seed:math=`?+6`+]" name="image" type="text" size="20" value="[+form.field.custom.image:esc+]" id="jotImage[+jot.id+]" /><input type="button" value="Select Image" onclick="BrowseServer('[+jot.id+]')" />
</label><br />
☆ A M B ☆
It requires visitors to log in if they want to upload an image. Otherwise the image browser won’t work. Any suggestions?