Magento 1.8.1.0 WYSIWYG editor is not displaying thumbnails in image manager

Question

I am posting this for comments about the bug, and to help anyone who have the same issue. (answer posted by myself)

When using the WYSIWYG editor and inserting images the image manager is not displaying the thumbnail images.

Looking at the image URL produced by magento I can see that the url is missing the /wysiwyg/ portion

http://site.domain/media//.thumbs/ex_logo_sm.jpg?rand=1392103618

It looks purely missing, as taken note by the double // in the url

Answer 1

Tracing the code, it looks to me that there is a constant missing in the helper routine located in Mage_Cms_Helper_Wysiwyg_Images::getBaseUrl()

The routine is as such:

public function getBaseUrl()
    {
        return Mage::getBaseUrl('media') . '/';
    }

and making the change to

public function getBaseUrl()
    {
        return Mage::getBaseUrl('media') . Mage_Cms_Model_Wysiwyg_Config::IMAGE_DIRECTORY . '/';
    }

fixes the issue.

This is called from Mage_Cms_Model_Wysiwyg_Images_Storage::getThumbnailUrl()

return str_replace('\\', '/', $this->getHelper()->getBaseUrl() . $thumbSuffix) . $randomIndex;

which clearly outputs the wrong url without the constant in place.

Answer 2

We had this same issue on a client site, there were actually quite a few elements at play, and I can offer a probably explanation as to how the non-existent image issue was trigged, even though it seemingly should not be possible:

1. The issue as described above was present, whereby Magento was checking for media/wysiwyg/.thumbs/image.jpg, as opposed to the correct location of media/wysiwyg/.thumbs/wysiwyg/image.jpg, and if present displaying a link to the incorrect URL of http://example.com/media//wysiwyg/.thumbs/image.jpg fd

2. We had APPSEC-212 installed, which introduced the use of realpath() to remove a security issue, however the combination of this and the usage of a symlink on our media directory was causing Mage_Cms_Model_Wysiwyg_Images_Storage::getThumbsPath() to return a directory of media/wysiwyg/.thumbs, as opposed to media/wysiwyg/.thumbs/wysiwyg - the reason is because this method makes a conditional check which did not evaluate to true, as our media directory had been expanded via realpath() and as such did not return 0 for the strpos() check, see the check below, line 6:

   public function getThumbsPath($filePath = false)
   {
       $mediaRootDir = Mage::getConfig()->getOptions()->getMediaDir();
       $thumbnailDir = $this->getThumbnailRoot();
   
       if ($filePath && strpos($filePath, $mediaRootDir) === 0) {
           $thumbnailDir .= DS . dirname(substr($filePath, strlen($mediaRootDir)));
       }
   
       return $thumbnailDir;
   }
   

3. This is unique to us, but we were also denying access to dotfile directories, and had not previously noticed this as a problem because we had never served them until we installed APPSEC-212, so even when we fixed the problem we were getting 404's on anything in .thumbs

The problem we have experienced still exists in 1.9.1.0 (the latest version at the time of writing) - I'm going to assume no-one notices because the images still serve 'on the fly' without using the .thumbs directory, it was only with the introduction of APPSEC-212, combined with a symlinked media directory, that caused the thumb files to be generated in the incorrect location, which then caused the incorrectly checked path to return true, and for us to subsequently see 404's on our images.

Funnily enough, APPSEC-212 would have fixed the issue if it weren't for our symlinked media directory.

By the way, here are our modifications:

In app/code/core/Mage/Cms/Helper/Wysiwyg/Images.php:

@@ -89,7 +89,7 @@ public function getStorageRoot()
      */
     public function getBaseUrl()
     {
-        return Mage::getBaseUrl('media') . '/';
+        return Mage::getBaseUrl('media') . '/' . Mage_Cms_Model_Wysiwyg_Config::IMAGE_DIRECTORY . '/';
     }

     /**

In app/code/core/Mage/Cms/Model/Wysiwyg/Images/Storage.php:

@@ -336,7 +336,7 @@ 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));
+            $thumbSuffix = self::THUMBS_DIRECTORY_NAME . DS . substr($filePath, strlen(realpath(Mage::getConfig()->getOptions()->getMediaDir())));

             if (! $checkFile || is_readable($mediaRootDir . $thumbSuffix)) {
                 $randomIndex = '?rand=' . time();
@@ -405,8 +405,8 @@ public function resizeOnTheFly($filename)
      */
     public function getThumbsPath($filePath = false)
     {
-        $mediaRootDir = Mage::getConfig()->getOptions()->getMediaDir();
-        $thumbnailDir = $this->getThumbnailRoot();
+        $mediaRootDir = realpath(Mage::getConfig()->getOptions()->getMediaDir());
+        $thumbnailDir = realpath($this->getThumbnailRoot());

         if ($filePath && strpos($filePath, $mediaRootDir) === 0) {
             $thumbnailDir .= DS . dirname(substr($filePath, strlen($mediaRootDir)));

Answer 3

There are actually several errors coming together.

By default Magento seems to save the thumbs in the directory media/wysiwyg/.thumbs/wysiwyg/. But Mage_Cms_Model_Wysiwyg_Images_Storage::getThumbnailUrl() looks for the thumb in media/wysiwyg/.thumbs/.

The error only gets triggered if a thumb is in media/wysiwyg/.thumbs/. I could not find out under what conditions a thumb is saved in the wrong directory. But at least it explains why only some servers show this problem.

So in addition to what ProxiBlue said you'll have to change Mage_Cms_Model_Wysiwyg_Images_Storage::getThumbnailUrl() from

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;
}

to

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;
}

Preferably by setting up a module and not by overwriting the core file.