1. images show correctly in preview (the admin)
2. images show correctly in frontend (the shop)
3. images are not generating HTTPS warnings (this happens when the URLs include http:// in the path).

You can get some general help and information on URL configuration from moxiecode here.

But this post explains how to configure tinyMCE and imagemanager:

tinyMCE configuration:

This is in the javascript in the file where you have added the tinyMCE editor, typically categories.php for products descriptions.

Add the following URL configuration:

relative_urls : true,
convert_urls : false,

Imagemanager configuration:
Open the imagemanager configuration file (e.g. tiny_mce/plugins/imagemanager/config.php) and set the following configurations:

Under Preview options:

$mcImageManagerConfig['preview.wwwroot'] = “”;
$mcImageManagerConfig['preview.urlprefix'] = “”;

Under General filesystem options:

$mcImageManagerConfig['filesystem.path'] = ”;
$mcImageManagerConfig['filesystem.rootpath'] = ‘../../../../../../images/’;

A note about the filesystem.rootpath:

This will work if you have placed the imagemanager in:
admin/tinymce/jscripts/tiny_mce/plugins/imagemanager/

and your images in:
images/

If your paths are different you will need to change the filesystem.rootpath accordingly.

On a seperatenote – they have released a version of the tinyMCE that hooks on to jQuery for part of the core code. If you already use jQuery then go get the jQuery verison of tinyMCE!! Actually, just get it anyway…

This post explains how to set the same height to multiple DIV elements using jQuery. This solution is inspired by the great little trick for justifying elements using jQuery by Janko here.

Let’s get to the point:
You have a number of DIV elements within a DIV container:

<div id=”container”>
<div id=”mydiv”>111<br />222<br />333</div>
<div id=”mydiv”>111<br />222</div>
<div id=”mydiv”>111<br />222<br />333<br />444<br />555<br /></div>
</div>

Float these DIV elements to get then into a row:

<style>
DIV.mydiv{
float:left;
margin:10px;
background:#eeeeee;
}
</style>

Now, assuming you have already included jquery on your page use this script to set all DIV elements within the container to the height of the tallest one:

<script>
$(document).ready(function() {
var max = 0;
$(‘#container > div’).each(function(){
if ($(this).height() > max)
max = $(this).height();
});
$(‘#container > div’).height(max);
});
</script>

Your 3 DIV elements within the container DIV now all have the the height of the tallest one!

Nice and easy

A quick tip: You can quickly and easily add jQuery to your pages by calling it in your header from Google CDN (content delivery network) like this:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>