Hi there. I recently came upon this tutorial at tympanus.net, aka Codrops, called Fullscreen Background Image Slideshow With Css3 and tried to implement it within a WordPress theme i’m working on right now. This showed to be much trickier than i first thought and after quite some tweaking, i managed to get it up and working. With some limitations yes, but let me explain.

First things first, all credits of the css code goes to the author of the original article, Mary Lou. I’m just using her code within WordPress. I also don’t have a demo yet, but will have a site up and running soon. The final result is actually the same as the demo at tympanus.

Limitations

As you may have noticed in the original article by Mary Lou, the script has been written for exactly 6 images. No more, no less. Otherwise you’ll get weird things happening visually. But as we’re working with WordPress, i’d be cool to be able to change this value. So here’s what i did.

First, i used the Types plugin to created some custom fields for my home page (yeah, the slider is located on the home page. But can be anywhere really). I created 6 fields. One for the quantity of images to be displayed and the others 5, for the images.

admin1

And here’s the result when you’re at the home page:

admin2

The number shows how many image fields to display here, thanks to the conditional display option, and is used as well in the WordPress code. More on that later. I purposely limited the quantity of image to 5 as it would be heavy to load. Here you can see 3 image fields displayed. A number 4 would show 4 image fields and so on. You got the idea.

Css division

Yes, css has to be divided because you’ll need a different file for each quantity of images. Basically 5 here. But i only made 4 as i require a minimum of two images in the slider (another Types option). So a different file for 2, 3, 4 and 5 images.

I left this global code in my main stylesheet (i work with Sass):

I then created 4 files that correspond to the quantity of pictures. Here goes the css for 2 pictures:

And here’s the code for 4 images:

It’s a bit long yes but i really wanted to show the difference between both. You’ll notice that i use variables to simplify as well as other sass tools. I won’t go too deep here but just for the record, i’ve tried to even simplify those files more when it comes to the @keyframes imageAnimation { }  part as it’s pretty similar one to another. I’ve tested with the expression @each  like this:

But unfortunately, the @#{$engine}  creates a bug when compiling. If anyone has a solution, i’d like to see that.

Back to our topic.

The key part here are the percentages. Mary used those numbers for 6 pictures: 0%, 8%, 17%, 25% and 100%. I then calculated them proportionally for 2, 3, 4 and 5 pictures. Here it goes:

2: 0% – 24% – 51% – 66% – 70% – 100%
3: 0% – 16% – 34% – 44% – 50% – 100%
4: 0% – 12% – 25.5% – 33% – 37.5% – 100%
5: 0% – 9.6% – 20.4% – 26.4% – 30% – 100%

I also got rid of the translateY option in the animation for the @keyframes without prefix because while testing on IE11, i saw that it was pretty laggy and decided to simplify the animation with just a fade. I’ll have to keep an eye on it if the other browsers start using it without prefix too.

Background-image

Where is the background-image you’ll say. And you’re right, i deleted it from the css. Otherwise it can’t be dynamic! I implemented it as an inline style in my php code. Detailed with the explication of the php part soon. I know that inline style is bad but i couldn’t figure out another way and didn’t want to use javascript for this. The whole point after all is to use css and no javascript.

Now that we got our css ready, we need to register it for later use. So i put this in functions.php:

PHP

I created a template for my home page and within a classic loop and Mary’s original structure, retrieve the quantity of pictures selected by the user:

as well as the first 2 pictures as they’re mandatory, remember?

I then use a switch to load the adequate css file and retrieve the extra images if necessary:

And now that we got them inside an array, it’s display time:

Don’t forget to close the ul and the loop:

And boom there you go, loading just the adequate css file with wp_enqueue_style().

You may notice that some php tags are missing in the code. This is due to the plugin i use in my site to display code. Not the best ever.

Final thoughts

It certainly has limitations and could even be better written or in a different way but that’s what i could think of at the time. Let me know if you’ve tried as well or would like extra infos.

  • Flávia Amaral

    Hello, I am trying to implement this code, but I can not. Where can I find the full source code?

    • Hey Flavia, the full code only exists in my project in the end. I could put it on github but i’m totally out of time those days. I read it back and realised that it could really be better written as of today.

      Have you tried to look for plugins that would do a similar job?

      • Flávia Amaral

        I searched and found nothing to do similar. My client wants the same effect of images on his site. I would be eternally grateful if you could help me.

Past Work

Soloteste

Design & development
Visit live site

Pousada Corsário

Design & development
Details Visit live site

Sydney Colombani

Design & development
Visit live site

Brecha

Development
Visit live site

Julia Queima

Design & development
Visit live site

Costa Brasilis

Design & Developement
Details

A3Interiores

Wp Development
Visit live site

ValorCafé e-commerce

Design
Details Visit live site

Oficina de Arquitetos

Development
Visit live site

Cani.tv

Development
Visit live site

Zee Champanheria

App design
Details

Rioow

Design & development
Details

ASBEA/RJ

Design & development
Details Visit live site

ValorCafé

Design & development
Details Visit live site

Livraria da Travessa

Design & development
Details Visit live site

Furafila

App design
Details

NETbureau

Design & development
Details Visit live site

About

So, i'm a developer from France currently living in Rio de Janeiro. I do code for the front-end side of the web with things like javascript, html, css, preprocessors, tasks runners, version control, frameworks, tdd, CI, Wordpress and others.

I do speak english, portuguese and french, read tons of books, love to play on a wake, bmx and snowboard and would like to travel to the Karakoram range, Tierra del Fuego and Mongolia.

I do appreciate you stopping by and admit i did abuse of the auxiliary verb do in this about.