Prefix img src assets with a leading slash in SilverStripe

When inserting an image into the TinyMCE HTML editor in SilverStripe it doesn't prefix the src attribute of the img tag with a leading slash leaving it like e.g. src="assets/images/myimage.jpg". This is acceptable because it writes out a <base> tag into the document <head> so these relative urls are made into absolute URLs using the href in the base tag. However, as I have found, some bots ignore the base tag and are unable to grab the images correctly. This post shows how to modify your base page class in SilverStripe to prefix assets with a leading slash.

The problem

The <head> section of the HTML document has a <base> tag in a SilverStripe page. The following example comes from my New Zealand Running Calendar website:

If a bot ignores the <base> tag, and constructs a URL for the image based on the fact it's relative and the current document is at/news/mizuno-moneyback-offer-at-wiggle/
then the bot will try to access the image at/news/mizuno-moneyback-offer-at-wiggle/assets/images/wiggle-20110615-mizuno.jpg

And yes, this happened to me today when I posted that page on Facebook and the FB bot which grabs images off a page wasn't able to construct the image's URL correctly. I also know it's not a consideration I've made myself before when I've written about grabbing images off remote pages.

The solution for SilverStripe

No, we shouldn't have to workaround bad bots, but if you want e.g. Facebook to be able to grab images correctly then it's best to make sure the src attribute is prefixed with a /. The rest of the URL is the full path so there's no reason why it shouldn't include a leading slash.

Personally, I prefer the src attribute to start with a leading slash anyway, as it can solve other issues that may crop up in the future.

To replace any src="assets/" to src="/assets/" in SilverStripe, add this to your Page class: