I really liked the Avenue template in SquareSpace and decided to use this template as an example to further dig into the power of PEAR templates and abstracting the PHP logic from the HTML design. I think this design will be fun and fairly simple to replicate and modify for your own purpose. Hopefully it is also a good example to illustrate how useful the concept of abstraction is when designing a layout for a dynamic website.
The Goal - Avenue Layout from SquareSpace
First, Lets try to decide on the static and dynamic information
The Approach
Beginning the Code
avenue.tpl.htm
Finishing Up
There really wasn't much code to this tutorial, but now if you look at the finished page, it looks a lot more similar to what we were going for! :)
Working Sample Here
The Goal - Avenue Layout from SquareSpace
First, Lets try to decide on the static and dynamic information
As a general rule, I try to make as much dynamic as possible. If there is one thing that I learned about development in business is that the requirements are constantly changing and the required need date is yesterday! So, keeping that in mind, let's try to make as many aspects of this design as dynamic as possible.
- The title will be a dynamic variable.
- The right site links will be one block for the links and one variable.
- The link is a static hr written into the template
- Each of the image blocks with text caption can be one block with two variables: one for the image and one for the image caption.
The Approach
Before I start coding, I sketch out a quick layout of the design notating the blocks and variables in the design. In this image, I have the blocks shown as yellow blocks and the variables written in the PEAR notation for variables.
Beginning the Code
- Create 2 files: avenue.php and avenue.tpl.htm
- Point to the PEAR template library in the PHP page. If you do not have the PEAR template library installed on the web server, please follow the instructions in the first tutorial (it is very quick and simple.)
Example: require_once 'HTML/Template/ITX.php'; - In the php page, create a new template object and tell the php page to use the avenue template (avenue.tpl.htm)
avenue.tpl.htm
Let's translate the sketch with the yellow blocks into the template page. Each yellow box is going to be a block and the variables are already written out inside the yellow blocks.
After quickly translating the image, we get the above code, which more or less is going to do the trick. The complexity in this project is going to involve the css. Before, we begin on the CSS styling, lets set up the PHP so that we can make sure the page is displaying correctly and put in some dummy data which will be useful while formatting. You will also notice with the PEAR templates how all of the formatting will be done on that template page and not involve the PHP page, so it makes things pretty easy, especially when debugging.
avenue.php
After quickly translating the image, we get the above code, which more or less is going to do the trick. The complexity in this project is going to involve the css. Before, we begin on the CSS styling, lets set up the PHP so that we can make sure the page is displaying correctly and put in some dummy data which will be useful while formatting. You will also notice with the PEAR templates how all of the formatting will be done on that template page and not involve the PHP page, so it makes things pretty easy, especially when debugging.
Adding in the php is basically just filling in the variables with hard-coded samples of what you want to appear in that spot. In real practice, you will probably pull this information from a database a loop through the block multiple times. Therefore a PEAR variable usually also corresponds to a PHP variable that is holding a value from a database row. After you apply the PHP updates, you will notice that the design doesn't quite look identical to the Avenue design that we were aiming for. However, the vast majority of the rest of the tutorial is just styling what we have! You can notice that the layout is in fact very similar at this point.
A couple things that I want to note as well. Usually, I try to avoid putting any HTML in the PHP. In this example, there is some HTML to render the image and we have completely ignored the link. Through the remainder of this tutorial, I will make small updates to the template to remove remaining code fragments from the PHP and try to keep it just the the text that will be pulled from a database.
A couple things that I want to note as well. Usually, I try to avoid putting any HTML in the PHP. In this example, there is some HTML to render the image and we have completely ignored the link. Through the remainder of this tutorial, I will make small updates to the template to remove remaining code fragments from the PHP and try to keep it just the the text that will be pulled from a database.
Finishing Up
So, I didn't change too much with the PHP. I added some more blocks. One thing to note is that I broke up the links a little more, which added a few more variables. In the PHP, I needed to add link_url and link_class. This is so that I can show a different color (class) if the page is currently in view.
I also took out the img src portion from the php and put it into the template where it belongs. This makes it easy to pull image urls from RSS feeds, databases, user input or wherever and easily pop them into the template. Below is the finished code for the php page with those minor changes.
As for the template, there was a little more work involved trying to get it to look like the example, but I think I ended up pretty close! A couple things that I wanted to note, I used an embedded stylesheet for this example. This was to make it easier for you to copy and paste the code. Typically in a web project you will use an external stylesheet and include it in the header section of the HTML.
Some Quick How-To's
Finished code for avenue.tpl.htm
I also took out the img src portion from the php and put it into the template where it belongs. This makes it easy to pull image urls from RSS feeds, databases, user input or wherever and easily pop them into the template. Below is the finished code for the php page with those minor changes.
As for the template, there was a little more work involved trying to get it to look like the example, but I think I ended up pretty close! A couple things that I wanted to note, I used an embedded stylesheet for this example. This was to make it easier for you to copy and paste the code. Typically in a web project you will use an external stylesheet and include it in the header section of the HTML.
Some Quick How-To's
- The Opactiy on the images. The images have a class. In css, you can change style on a class on hover, by referencing the name of the class:hover
- The font for the title. Google has an API for fonts that is complete free to use on your website. It is very simple and just requires you to copy and paste a couple of lines of code. I highly suggest looking into it if you haven't used any of their fonts already. It is a very neat tool.
Finished code for avenue.tpl.htm
There really wasn't much code to this tutorial, but now if you look at the finished page, it looks a lot more similar to what we were going for! :)
Working Sample Here
Our Features Search for
ReplyDeletesquarespace website