<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1114119085333160&amp;ev=PageView&amp;noscript=1">

We recently came across an issue with Magento’s Wysiwyg Editor, that can cause significant performance issues on sites where there is a lot of activity in the CMS editor, specifically when inserting images using the Wysiwyg editor.

We have seen this issue with versions of both Community (1.9) and Enterprise (1.13)  versions of Magento. If you do choose to make these changes to your Magento installation, ensure you test them thoroughly on a development environment, as we can not guarantee the fix is applicable for all versions.

 

Magento’s Wysiwyg editor is a great tool for giving clients control over their CMS pages, allowing them to easily create and edit pages in a visual way.

However, there is a underlying bug in the way Magento handles the thumbnails that are displayed, when you are choosing an image to insert on a page. With a client relying heavily on this feature of Magento, and a directory of images in the 1000’s, we found the performance of this to be unacceptable, so we needed to find a fix.

The problem comes from Magento’s ability to cache the thumbnails that it generates, which are displayed when you are browsing for an image to insert into a CMS page. In theory, once a thumbnail has been generated the once, the image should be cached for future use. However, the code for this does not actually function correctly and instead Magento is re-generating each thumbnail every time they are displayed in the image browser.

To fix the issue, we needed to override Magento’s core, to change the code that is used to get the thumbnails URL. Magento best practice is to create a new module in the ‘local’ code directory to override this, rather than editing the Magento code directly.

The fix is actually in 2 parts of the CMS system. Firstly the code that is used to get the ‘Base URL’ which is then used in the URL for the thumbnails.

The original code, located at under app/code/core/Mage/Cms/Helper/Wysiwg/Images.php looks like this:

public function getBaseUrl()
{
   return Mage::getBaseUrl('media') . '/';
}
The problem here, is that the images are actually stored in a directory of ‘wysiwg’. The fixed code looks like this
public function getBaseUrl()
{
   return Mage::getBaseUrl('media') . Mage_Cms_Model_Wysiwyg_Config::IMAGE_DIRECTORY . '/';
}

Secondly, the code contained in the file app/code/core/Mage/Cms/Helper/Wysiwyg/Images/Storage.php

The function that is used to check if the thumbnail image exists and then return the URL to it does not check in the correct directory, which is actually ‘/media/wysiwyg/.thumbs/wysiwyg/’

The original code looks like this:

public function getThumbnailUrl($filePath, $checkFile = false)
{
   $mediaRootDir = $this->getHelper()->getStorageRoot();
   if (strpos($filePath, $mediaRootDir) === 0) {
       $thumbSuffix = self::THUMBS_DIRECTORY_NAME . DS . substr($filePath, strlen($mediaRootDir));
       if (! $checkFile || is_readable($mediaRootDir . $thumbSuffix)) {
           $randomIndex = '?rand=' . time();
           return str_replace('\\', '/', $this->getHelper()->getBaseUrl() . $thumbSuffix) . $randomIndex;
       }
   }
   return false;
}

With the fixed code looking like this:

public function getThumbnailUrl($filePath, $checkFile = false)
{
   $mediaRootDir = Mage::getConfig()->getOptions()->getMediaDir() . DS;
   if (strpos($filePath, $mediaRootDir) === 0) {
       $thumbSuffix = self::THUMBS_DIRECTORY_NAME . DS . substr($filePath, strlen($mediaRootDir));
       if (!$checkFile || is_readable($this->getHelper()->getStorageRoot() . $thumbSuffix)) {
           $randomIndex = '?rand=' . time();
           return str_replace('\\', '/', $this->getHelper()->getBaseUrl() . $thumbSuffix) . $randomIndex;
       }
   }
   return false;
}

With this fix in place you should notice a considerable difference in the speed of using the Wysiwyg image browser, particularly with sites that have a large number of images uploaded.

You can check that the functionality is now working correctly by inspecting the URL of an image in the image browser. If all is working correctly, you should see like the following:

https://yourwebsite.address/media/wysiwyg/.thumbs/wysiwyg/image_name.jpg...number> - 

As opposed to a URL like the following:

https://yourwebsite.address/index.php/admin/cms_wysiwyg_images/thumbnail...string>/key/<random string>/ 

We have seen this issue with recent versions of both Community (1.9) and Enterprise (1.13)  versions of Magento. If you do choose to make these changes to your Magento installation, ensure you test them thoroughly on a development environment, as we can not guarantee the fix is applicable for all versions.

An example of how to build a Magento module to include this fix can be found on our Github page https://github.com/ctidigital/magento-wysiwyg-fix


 

We're always looking for ambitious Magento developers. Apply directly online and we'll happily consider you for a position.

Apply Online

 

About the author

Rick Steckles
Rick Steckles
Rick has been with CTI since 2004, initially as a developer and subsequently as technical director. He has built up experience in a broad range of areas by working on a wide variety of projects. He is responsible for CTI's development infrastructure - continuous integration, code repository management, development and live hosting environments. Rick's primary focus is on delivering quality solutions which solve real problems in a simple, effective manner.

Get the latest content directly to your inbox

SUBSCRIBE

Recent posts