News

Build a responsive and dynamic photo blog with PHP

Be inspired by Luke Beard's blog and find out how to add the image in a slider simultaneously as a background image.

lukebeard

If it were necessary to choose a single word to characterise the person behind the inspiration for this workshop, ‘dynamic’ would do nicely. Being dynamic works best when effort has gone into creating something you can be proud of and acts as a platform for your creativity and something to set you apart from everyone else.

In this workshop you’ll learn how to create the basics of your own customised photo blog. By using a little PHP and some interesting browser filters, once your page is built you won’t need to edit it again. Just upload your images to a folder and voilà! Your photos will be added to your blog automatically, along with matching backgrounds. How  dynamic is that?

TECHNIQUE

Load the images
This tutorial will jump around the code a little to explain the techniques in the most logical way. Remember your file name will need a .php extension and be located on a server running PHP. The PHP script will be used once to load the backgrounds (because filters are to be applied to the background images only) and again to load the main photographs.

Background first
Check the tutorial files on the disc for the first part of the script that examines the files within your photos folder and loads their names into an array. The second part of the script builds an unordered list with each of the background images loaded into their own list item. Use images that are 900px wide by 600px tall – you can experiment with tailoring the script to suit different-sized images later.

001 echo ‘<ul>’;
 002        foreach($images as $image) {
 003            echo ‘<li         style=”background-image: url(‘;
 004          echo             $uploads[‘baseurl’].’/photos/’.$image;
 005            echo ‘) “></li>’;
 006        }
 007   
 008        echo ‘</ul>’;

Now the main images
The script is run again in another <div> located on top of the background <div> and you’ll see that the code in this step looks very similar to Step 2. However, in Step 2, the image path and name were assembled into a background image style for the list item. In this step an img src attribute is being assembled with each of the image paths and names.

001 echo ‘<ul>’;
 002        foreach($images as $image) {
 003            echo ‘<li><img src=”’;
 004            echo             $uploads[‘baseurl’].’/photos/’.$image;
 005            echo ‘” alt=”” /></li>’;
 006        }
 007
 008        echo ‘</ul>’;

Styling the content
If the PHP is correctly loading the background and foreground images, the rest of the work is styling. Look for vendor prefixes in the tutorial files that have been removed from these steps for clarity. The ‘fixed’ setting in line 04 gives the parallax scrolling look, take it out for the background to scroll with the foreground.

001 ul { list-style-type:none; text-    align:center; padding:0; margin: 0 auto; }
 002 27         li { padding: 150px;
 003         min-height: 600px;
 004         background: no-repeat center center fixed;
 005         background-size: cover;
 006 34    }

Position absolutely
The key to making this technique work is to ensure the foreground sits exactly on top of the background so the <div> that uses #images id will be set with position: absolute; and then centred.

001 #images {
 002         position: absolute;
 003         top: 0px;
 004         left: 50%;
 005        margin-left: -600px;
 006         }
×