Displaying images as links on cakePHP views and layouts

Using Images as Links with the $html->image and $html->link helpers:

Introduction: I have seen a fair number of posts on the cakePHP google group and also on a few blogs regarding how to make links in views that are images using the cakePHP helpers. There are ways to fudge this and hard code paths to images and links but when you start swapping between /pages and /controllers this all gets very messy and is not using what cakePHP provides so I thought I would write a quick tutorial on this. Actually it's more like a few notes with an example - this is a real easy task, and quite obvious once you consider what we are doing.

Need Help? If you need help or get stuck with this tutorial, or just have feedback or notice something I could be doing better then please by all means let me know, you can find my loitering over at the UnOfficial CakePHP forum, so make a thread there.

Assumptions: I'm assuming your using cakePHP 1.2 here if your not, go get it :) If you can't upgrade then just read this example code below then check the 1.1 manual for 'image' and 'link' and you should be able to work it.

Step 1: Displaying an Image on a View or Layout

O.K as you may or may not know, to display and image on a layout or view in correct the correct cake manor just ...

<?php echo $html->image('home.gif');?>

Obviously above, change 'home.gif' to your image.

Step 2: Making a HREF Link on a View or Layout

Another one you may already know...

<?php echo $html->link("Home", array('action' => 'features'), array('escape' => false));?>

And again, change 'Home' to your link text and 'features' to your action in your controller. The above example will link the text 'Home' to the 'features' action of the currently active controller. If you have this on a view in the /pages cake directory it will link to /pages/features. This is no good if you wan't to link to another controller, however this is easy too ...

<?php echo $html->link("Products", array('controller'=>'products', 'action' => 'features'));?>

Above we are also specifying the controller name. The above example will link the text 'Products' to the controller 'products' and the action 'features'. ie /products/features.

Step 3: Coming image and link for a linked image

O.K the bit of code you came to this page for ...

<?php echo $html->link($html->image("products.gif"), array('controller'=>'products', 'action' => 'features'), array('escape' => false));?>

As you can see, from a PHP point of view it is as simple as including a function within another function. So here, the image 'products.gif' links to the 'products' controller and the 'features' action of that controller. You may also noticed we have added escape = false. If you do not specify this as fasle, or you specify it as true then the raw html for the image will be out printed to the view as the link instead of the actual image.