One of the features of a site I built recently for a client was a scrolling marquee or ticker of client logos at the bottom of the screen.

The requirements were as follows:

• Logos are to continously scroll in an infinite loop.
• Logos are to be greyscale and color on hover
• The animation must be smooth across all modern browsers
• The effects must work in all modern browsers and IE8
• Must work with WPML
• Easy for the client to deal with (no multiple images to upload)

This is the story of how something that at first seemed quite straightforward would take me a lot longer than I initially planned.

First attempt: Flexslider

Flexslider, being the first responsive slider script is very popular, and so I thought it would be a good choice for this site, to make the featured project slideshow at the top of the page, and the carousel at the bottom.

Unfortunately, Flexslider doesn’t support infinite scrolling, instead it jumps back to the first slide in a rewind effect. Not what I wanted.

Second attempt: bxslider + jQuery Black and White script

I was really happy to discover bxSlider. It’s an awesome and versatile script which made it really simple to have a slideshow and the infinite scrolling ticker/marquee on the same page.

So that was one part of the puzzle solved.

Now the jQuery black and white script seemed to work pretty well. But after further testing, it seemed to slow down the ticker and caused some jumpiness in the animations. As I later discovered, most of these greyscale scripts use the canvas element which causes two issues: it’s not very performant, hence the slowdown on my carousel. And it doesn’t work with images loaded from different domains. This results in a security error.

Why does this matter? Because the site I was working on was multilingual and each language was running on different domains. The scripts were being loaded via wp_enqueue_script and I was using get_stylesheet_directory_uri to determine the path dynamically which is best practice. Unfortunately this resulted in a mix of different domains, images coming from the current domain I was on and the scripts always being loaded from the main language domain.

I did find a fix for this via the WPML support team who were very helpful. It requires to filter the function get_stylesheet_directory_uri and replace the main language domain with the current domain

At the same time I had posted a question on Stackoverflow asking about the security issue, but as most of the time, the only answers were snarky comments about the quality of the question. As I lost hope I put a bounty on the question and expanded it more by including more information, but never got a reply.

I then posted the question on wpquestions.com, and got a few answers about implementing CSS3 filters. Which I had already tried. Then someone helped me out by pointing out that some images were missing the www part of the URL which was causing the security error. They also found an error in the script I copied. So that seemed to be the end.

Third attempt: CSS3 filters

I mentioned the slow performance of the jQuery solutions, so even though the problem seemed to be fixed, neither I nor the client were happy with the result, so I kept looking for a solution. At the same time I was trying out jQuery solutions, I also thought about using CSS3 filters. There are a few good tutorials on achieving cross browser greyscale filters on the internet so I tried them out. Unfortunately, IE10 does not support them, and in Firefox, the images weren’t even being displayed in the carousel anymore. Plus, the animations weren’t so smooth anymore. I guess CSS filters are taxing on the rendering and CPU.

Fourth attempt: the ImageFX plugin by Otto

At some point I remembered this post from ottopress, explaining how to make a greyscale thumbnail automatically and decieded to give it a go. I installed the plugin and created the different thumbnail sizes, but no dice. It didn’t work. Otto confirmed that the plugin was using deprecated functions, since 3.5, the image editor has had an overhaul and now uses a different set of classes and functions to manipulate images. I then started looking at the WP_Image_Editor class in the core files, and thought I could just use the new functions to replicate what Otto did in his tutorial. I figured out that I needed to provide the image as a ‘resource’ to the imagefilter function. But the WP_Image_Editor doesn’t have a get_image function that returns the image as a resource and the image property is protected, meaning it’s only accessible by child classes.

Fifth attempt: WPThumb and CSS

Before attempting to extend the class myself, I had another intuition. I remembered the WPThumb class / plugin and that it leveraged WordPress functions to manipualte thumbnails on the fly. A bit like Timthumb, but more secure.

So I asked the developer on Github if it could do greyscale and indeed I had not only a positive answer, but Joe provided me with the actual code needed to achieve the solution.

This is the final code for the front page template

And the WPThumb greyscale filter

and a wee bit of CSS

 

#carousel li {
height: 64px;
}

#carousel li a:hover .fade-image-layer1-col{
margin-top: -41%;
}

 

Conclusion

I’m quite happy with the result, as all the image processing is done server side, the carousel animation remains fluid.

The client can upload images normally without any extra manipulations.

The only thing missing would be a fade in animation of the color image, but CSS transitions cause the carousel to be jumpy when an image is hovered.

Also, for some reason, in Firefox the scrolling is not as smooth as it should be.