Featured Content Gallery (FCG) Only Displays Blank Box

Featured Content Gallery (FCG) is one of the greatest WordPress plugin to promote featured content’s image on a very elegant slide show. The problem and solution I describe in this post will likely apply to any version as the root cause is something to do with the weakness of javascript in general. But when I write this, the FCG version 3.2.0 has just been released.

The Symptoms

Here is the description of the problem:

  • FCG was working without problem previously
  • No additional plugin was added or remove around the time I realize this problem, but a bunch of “automatic upgrade” have been performed, including upgrade to FCG version 3.2.0
  • FCG only display blank box with gray border, but the rest of the blog was rendered correctly. Safari, Firefox and IE all display the same blank box.
  • Deactivate, delete, redownload, re-activate did not help
  • Disabling ALL plugins (except FCG) also did not help
  • No other error on server (no entry on error log, no funny behavior)
  • Downgrade to previous version (I did it up to 3.1.0) did not help
  • Internet Explorer complain about “getElement(…) is null” on jd.gallery.js.php

FCG’s core is mootools library which is quite notorious to have incompatibility to other library such as jQuery. So I also did the extra mile to make sure all the plugins that I have did not carry this incompatibility. But so far nothing give me any progress until I decide to go into the extreme, debugging the javascript one line at a time.

How FCG Work In a Flash

The way FCG work is like this. For every WordPress post, you can set “Custom Field” as illustrated below:

articleimg ‘http://yourwebsite.com/images/abc.jpg’
thumbnailimg ‘http://yourwebsite.com/images/abc_thumbnail.jpg’
featuredtext ‘check out the real value of abc product. <a href=”http://yourwebsite.com/abc.htm”>read more</a>’
alttext ‘abc image’

Then on the page that you want to display the slide show, FCG will ‘translate’ the custom fields above to below codes:

<div class=”imageElement”>;
<h2>Post Heading</h2>
check out the real value of abc product. <a href=”http://yourwebsite.com/abc.htm”>read more</a>
<img class=”full” src=”http://yourwebsite.com/images/abc.jpg” alt=”abc image” />
<img class=”thumbnail” src=”http://yourwebsite.com/images/abc_thumbnail.jpg” alt=”abc image” /></div>

So, if you have 5 Featured Contents, you will have 5 <div> block like above. Then the javascript will populate all element inside <div> above to display the slideshow accordingly.

The Root Cause

The root cause of my terrible problem is.. the silly mistake of swapping the ‘alttext’ and ‘featuredtext’. Yes, this simple mistake.

Since the ‘featuredtext’ contains a hyperlink, the <img> code become invalid and it looks like:

<img class=”full” src=”http://yourwebsite.com/images/abc.jpg” alt=”check out the real value of abc product. <a href=”http://yourwebsite.com/abc.htm”>read more</a>” />

So, when the javascript is trying to locate element of ‘img’ that belong to the ‘full’ class, it just simply returning ‘null’ that causing the loop to be broken and the script stop in the middle.

This is the typical weakness of javascript during run-time. If some error has occured, the subsequent code will be abandoned or even worse still run but incorrectly.

The Solution

Of course, for my case, I just simply swap the ‘alttext’ and ‘featuredtext’ and everything back to normal.

But the mistake I made is very general mistake that can be made by everybody, so to prevent future problem, I think it will be much better if FCG properly check the validity of the text or at least escape anything between quotes of each element (alt=””, src=””, etc) as fool proof mechanism.

Well, total time wasted due to this mistake: 4 hours. Hope this post help minimize your troubleshooting time should you have the same problem.

For demo and further detail about FCG, just go to this website: http://www.featuredcontentgallery.com/

Be Sociable, Share!



Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Newsletter Subscription

Get website update right into your mail box! And rest asure we respect your privacy and will never abuse your trust with your email address.
SIGN UP now! It's Free..