Written by A missing feature in Drupal is the ability to preview changes made to the home page. If you have a custom page as your home and you promote several pieces of content to it there is no way for you to preview how it will look. If the content breaks the layout or doesn’t look as good as you expect it to do then you’ll have to make several changes to fine-tune your home. Wouldn’t it be great if you could get a preview of your home and when you are satisfied with the all the changes hit a publish button to see all your changes commit at once? Well you can! Read on to see how.
For starters let me first mention the requirements you need to satisfy for this technique to work. This hack works in Drupal 5 and hasn’t been tested on other versions. I also assume you have a non-standard home page and are using the Front Page Drupal module to render it.
The trick for this hack is the following: we are going to use the front page module to generate the live version of our home but we’ll use a static version for the one people see when they enter your site. How? Easy: in Drupal 5 you can theme your home page by including a file called page-front.tpl.php in your theme directory. When you are not using the front page module this file is used (when it exists) to render the home page. What we are going to do is add a block to the admin page which will allow you to preview your front page by opening a new window pointing to your front page (usually: http://yoursite/front_page) for you to view how it will look. The block also has a Preview button that will simply download the live version and overwrite the page-front.tpl.php in your theme directory. This way you can preview your work as you make modifications and when you are done, hit Publish and make the modifications permanent.
This technique has several benefits. First, it make your home page static which means every time someone enters the site there are no database queries. This is great when you have a high traffic site and want a quickly loading home page. Although this is a good thing in some cases this might not work for you if you have content which changes on an hourly basis. We’ll get to that later on. Another advantage of this technique comes when you want to make changes not to the content of your home page but to its template. Say you want to make some major shifting or re-design to your home. When the moment comes to make the changes on the live site you don’t need to take it offline. You can point your browser to your front page module and make all the necessary tweaks to get it just right. When everything looks good hit Publish and you are sure the page will display right.
The Hack
To start log as the administrator into your Drupal site and turn on the Front Page module. To do so go to the Adminster > Site building > Modules, find the Administration section and there you will see the Front Page module. Check it and hit Save configuration to save your changes.
Lets build a simple dynamic home page to test the technique. Go to Adminster > Site configuration > Advanced front page settings and enter the following code into the Front page for anonymous user section:
Make sure you select full in the Select type drop-down and you check the Allow embedded PHP code in front page for authenticated users checkbox.
Logout or open another browser to see your page as seen by an unauthenticated user. Point your browser to http://yoursite/front_page and you should see your home page with a list of the nodes that are published and promoted to the home. It should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Static home</title>
</head>
<body>
<h1>This is my static home!</h1>
<p>Click <a href="/?q=admin">Here</a> to go to the main page or <a href="/?q=user">Here</a> to log in.</p>
</body>
</html>
If you point your browser to http://yoursite/ it should see this:
Ok, now we are almost ready. We have two home pages. A static version in http://yoursite/ and a dynamic version in http://yoursite/front_page. All that you need to do is write some code to overwrite your static page with the content of your dynamic one. You can do this with PHPs copy() function. Lets make a simple page to do this. Select the Create content option from your admin menu and create a Page content type. In the title write: Publish home page, and in the Body paste the following PHP code:
<?php // your dynamic front page URL
$src = 'http://yoursite/front_page';
// the location of the page-front.tpl.php in your theme. Make sure
// the file is owned by your server process
$dst = '/var/www/html/drupal/themes/garland/page-default.tpl.php';
$stat = copy($src, $dst);
if ($stat === true) {
echo "Success!";
} else {
echo "Failed!";
}
?>
In the Input format drop-down select PHP code and in the Menu settings write Publish home page in the Title and choose the parent item where you want your new item to appear. Once you save your page a new menu item appears in your navigation.
To try everything make some modifications to the dynamic home pag. To preview the page go to http://yoursite/front_page. Once you are happy with the way it looks click on the Publish home page menu item and if you have your permissions and paths right your home page will be overwritten by your live version. Now the home page will be the same as the live version.
Hacking the hack
I mentioned earlier that if you want to maintain some parts of your home page dynamic you can still do it. Here’s how: in the front page administration you need to escape in some way the PHP code you want to remain dynamic. Say for example you have a place in your home page where you display the current date / time using PHP code. To add this to our home page go to the advanced front page settings page and add the following line to the home page:
Today is Today is <?php echo '<?php echo date("d/m/Y h:M") ?>'; ?>
Now if you look at the home page generated by the front page module you will see that it says: Today is and some blank space. But if you look at the source HTML you will notice that there is some PHP code embeded that wasn’t executed. Now when this is copied into page-front.tpl.php and you display your ‘static’ version this will be executed.
Although this trick works it can get cumbersome when you have a lot of PHP code that you want to pass though to the home. A way to make this a little cleaner is to move some code into a block so that there is little PHP code left in the home page. With the block all that you have to do insert a single PHP tag:
<?php echo '<?php $block = module_invoke('', 'block', 'view', 0); print $block['content'] ?>'; ?>
I’ve updated the front page for anonyomous users.Then i logged out.
Now i need to update that page but when i logged in, i could not return back to my configuration page and it still remains in that front page.
Where can i see that front page code? in database or .. any idea?
Please help me as i need urgently.
You need to get back to the admin page. Point your browser to http://<yoursite>/user to get a login page or http://<yoursite>/admin. If you don’t have clean URLs then the URLs are: http://<yoursite>/?q=user and http://<yoursite>/?q=admin. The front page code is installed in the database. Hope this helps!