Adding Image Placeholders

The exact process you will follow for building your template will depend exactly on what you want the template to contain. By adding the individual pieces to the page one piece at a time and testing the result prior to proceeding to the next piece allows us to most easily tell when part of the code we are adding interferes with something else in our template.

Sometimes we will have some content for our template which will actually have a different number of repetitions on different pages and which will contain different content in each copy of the code. We can most easily handle this by creating a dummy entry to use in the template and placing a number of copies of the code into the template to both check that multiple copies work properly and to give a better idea of what the final pages will look like. With our example template that we are building we want to have a number of thumbnail images display in the page, each of which will open a larger copy of the image when clicked on and each with a caption under it to describe the image. The following HTML added to our page creates one such image and in my actual page I'll repeat it say 15 times so as to check how it will look with multiples.

<div class="photo"><a href="picture.jpg"><img id="pic" src="picturet.jpg"> caption</a></div>

We will not need multiple copies of the CSS to go with our HTML . The same few lines of CSS will be applied to as many of the elements as we have occurring in our HTML.

div.photo {margin : 15px; display: block; padding : 5px; border: 5px inset #ff6; float : left; text-align:center; background: #fff;}
div.photo a {text-decoration : none; color : #000;}
a img {display: block; border : 0;}

Setting up our repeating elements this way has one major difference from the result we'd get if we put them all in a table (which wouldn't be appropriate anyway as our images and captions are not actually tabular data). That difference is that there is no fixed number of images to be displayed on each row. As the browser becomes wider or narrower the number of elements displayed in each row adjusts to whatever number will fit within the available width. This helps to make for a more fluid design that will display more reasonably across a wider range of viewport sizes.

With this in place our template page is now starting to look a lot like it needs to look with the real content plugged into it.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate