By
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 }
