Tips, Tricks and ideas I learned while using the FCG plugin.

[tkarmadragon]

Hello, my name is Chris and I wanted to thank Jason Schuller and iePlexus for this awesome plugin. I think it's the best plugin out there for front-page slideshows, and I pretty much tried them all. I wanted to share my experience with using this plugin, and all the neat things I learned along the way. I'm hoping that somebody else finds this collection of information useful, and doesn't have to spend as much time searching for answers as I did.

I'm not a code monkey or savvy web developer by any means. The reasons why I love this plugin is because it's easy to use, and it's extremely customizable, if you know where to look. My website is http://www.tfmultimedia.com if you want to see my customizations in action. (Some links might not work, it's still a WIP!)

When I first installed this plugin into Wordpress 3.0.1, it didn't work! However, it turns out (at least for me) that only displaying posts by category didn't work. If you choose to display posts by ID, everything works fine!

When setting the text box height in the options menu, the plugin applies this setting by generating some not-so-friendly css style embedding, which breaks W3C validation. This can be annoying and potentially hurt your search ranking. There's a better way to apply this setting, and many other settings, by editing the plugin's .css and .ccc.php files directly. It sounds spooky, but really isn't all that difficult.

While the plugin advertises that you can embed HTML in the slideshow text by using the "featuredtext" attribute, it doesn't tell you exactly what HTML is allowed. My findings:

• <div>, <p> and other container tags don't work. <br /> works!
• <span> tags and many of their attributes work, but changing text size doesn't work.
• While changing text size doesn't work, you can change it in the config files!
• List tags <ul>, <li> sorta work, but you're better off using <br /> and "&bull;" for bullets.
• <a> links work, but they don't change color or add underlines. You can use <span style="color: #012345; text-decoration: underline"> inside your <a> links as an alternative.
• While <u> underline tags work, they break W3C validation. Use the above method instead.
• You should only use HTML to change things that are impractical to change in the plugin's .css and .css.php files, like the layout of the text.

When you go to your Wordpress plugins folder, you have to option to 'edit' the files for your FCG plugin. The three files we want to look at, is the featured-content-gallery/css/jd.gallery.css, the featured-content-gallery/css/jd.gallery.css.php, and the featured-content-gallery/scripts/jd.gallery.js.php files. What's the difference between the three?

• featured-content-gallery/css/jd.gallery.css.php - is for modifying the content inside each element. If you wanted to change text size, you would use this file.
• featured-content-gallery/css/jd.gallery.css - is for modifying the elements themselves. If you want to change the size and position of the text box, use this file.
• featured-content-gallery/scripts/jd.gallery.js.php - is for turning elements on/off completely. You can also change other general settings, like disable default links (embedLinks: false).

Some helpful navigation of whats-what:

.jdGallery .slideInfoZone - The text box itself. You can change it's position inside the photo using "top:, left:, bottom:, or right" elements.
.jdGallery .loadingElement - The loading bar you sometimes see briefly when loading photos.
.jdGallery .slideInfoZone h2 - The "title" of the post that's being displayed. Change it anyway you want, or simply hide it completely.
.jdGallery .slideInfoZone p - The text that's displayed from the post. Very powerful when used with "featuredtext" option. You can even change the font size.
.jdGallery div.carouselContainer - That pulldown carousel of thumbnails. Whenever you change the size and position of .slideInfoZone, you will probably want to change this too, so that they don't overlap eachother.
.jdGallery a.carouselBtn, .jdGallery a.carouselBtn:hover, .jdGallery a.carouselBtn:active - The little button that pulls down the carousel.
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel, etc - All this stuff is related to the carousel. Play around with it to find out what is what.
.jdGallery, a.gallerySelectorBtn, .jdGallery .gallerySelector, etc. - I think these are for the arrow buttons that changes the slides.

One last tip: If you want to change the height of your text box, I'd recommend against doing it from the options menu, because FCG might apply it in a way that breaks W3C validation. Instead, navigate to featured-content-gallery/css/jd.gallery.css and add this under .jdGallery .slideInfoZone:

height: 70px; (or whatever size you want).

I hope this information has been helpful. Please let me know if you think any of this information is incorrect or should be changed. And thanks again to the creators of this plugin!

[UKphotographer]

Useful stuff.. I'll come back to this when I need to add text. Thanks.

[hawk]

Hi! thank you for this tips and tricks....

I was wondering if perhaps you have any idea of how to make the button of featured content more visible...

by default when the carousel its closed the opacity its low... and when you open it the opacity increase, i need this button tu be always with the opacity increased.... any ideas??

thank you! i hope you can help me with this...

[tuckjoseph]

Adding a height value to the css file no longer seems to define the size of the slideinfozone?

Is there still the invalid xhtml issue?

Thanks,
Joe

[admin]

slide info zone height controlled in fcg option settings now