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:
<base href="http://www.runningcalendar.co.nz/"><!--[if lte IE 6]></base><![endif]-->
An image inserted into the document using the TinyMCE HTML editor in the SilverStripe CMS does not include a leading slash so it’ll look something like this:
<img src="assets/images/wiggle-20110615-mizuno.jpg" alt="" width="500" height="151" title=""/>
This image is at
https://electrictoolbox.com/wp-content/uploads/wiggle-20110615-mizuno.jpg
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-wigglehttps://electrictoolbox.com/wp-content/uploads/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:
protected function onBeforeWrite() {
parent::onBeforeWrite();
$this->Content = str_replace(' src="assets/', ' src="/assets/', $this->Content);
}
If your page class was otherwise empty, it would now look like this:
class Page extends SiteTree {
protected function onBeforeWrite() {
parent::onBeforeWrite();
$this->Content = str_replace(' src="assets/', ' src="/assets/', $this->Content);
}
}
Now whenever you save a page in the CMS it will do the replacement. For any existing pages that need converting, simply save them after adding the above and they’ll be fixed.