Guys

I have a weird one here. I have modified and extended the silverstripe-mobile module (using this fork https://github.com/fonsekaean/silverstripe-mobile) and am using a new version of jquerymobile.

It all works fine save for one thing. The pages are ajax loaded and thus the base href is the calculated as the first page (say http://mydomain.com/home) This makes many subsequent images fail given that they start "assets" and not "/assets"

That's when the wierdness starts. In the following example:

<p><img class="left" src="assets/images/abouttheshow/_resampled/resizedimage350233-Fish1a.jpg" alt="show" width="350" height="233" />A show for the whole family.</p>
<p class="clearboth">&nbsp;</p>
<p><img class="right" src="/assets/images/abouttheshow/_resampled/resizedimage400266-Kids8a.jpg" alt="Kids" width="300" /></p>

If I change the first image to "/assets" and save, it changes back and yet that does not happen to the image with the right class. Huh? This is clearly being manipulated by SS prior to saving but where? I can't find it.

Furthermore how can I force the system or TinyMCE to use root relative urls. TinyMCE is surprisingly vague on this as their idea of relative and absolute urls is a bit different. I want root relative urls.

Julian

I can verify that I have the same troubles as tazzy.

Seems the base href default functionality in SilverStripe is rather limiting in this case. I'm not sure how to get around the issue, without major overhauls to the way the WYSIWYG outputs file paths.

Any ideas anyone?

Yes I've experienced this too. What fun.

There is one workaround, you can extend Page's onWriteBefore method to prefix the URL but I don't like this as it won't work if silverstripe isn't installed in the root directory on your server (so, for instance for local testing, it's no good to me). Found it in this post: http://www.electrictoolbox.com/silverstripe-prefix-img-src-assets-leading-slash/

I have a workaround but it's not pretty. Basically absolute urls. This works but it's fuggly UX. I really don't like the whole 'image dialog' anyway, it's really bad design - ideally I'd like a point and click solution.

Looking for a better way... let you know if I find one.

Right, got a better solution. Worked for me, try this:

in your mysite / _config.php add a configuration variable to say where your assets folder is relative to '/' (your web root) -as this is 'installation-specific configuration'.

//My assets dir is off a subdirectory which is SS's root.
global $assetsPrependHack;
$assetsPrependHack = "/ss/assets/"; 

Then in mysite / code / Page.php I added something similar to that blog post I mentioned before:

//AC: Hack to rewrite the start of asset 
// urls so that they work on the ajaxy mobile version of the site.
global $assetsPrependHack;
if( isset($assetsPrependHack) ) {
  $this->Content = str_replace(
    ' src="assets/', ' src="'.$assetsPrependHack,
    $this->Content);			
}

Or a jQuery solution...

;(function($){
    $(document).bind("pageinit", function(){
        $('.typography img').each(function(){
            $(this).attr('src','/'+$(this).attr('src'));
        });
    });
})(jQuery);