Click to Enlarge

When an image is larger than the size specified by the item-height and item-width variables, the visitor can click on the image to view it full size. The problem is that unless the customer moves the mouse over the image, the customer will not know that the image can be clicked. Wouldn't it be more obvious if you could add the text "Click to Enlarge" right below the product image (see Figure 7.2)? To do this, you need to modify the imexpand template. The original, untouched template looks like this:

Yourstoreid-iImexpand (im orig hlimit wlimit align) WITH= variable exp       value CALL :yourstoreid-imexpands                RENDER image orig               hlimit               wlimit    IF test NOT EQUALS value1 exp                       value2 :no       then WITH-LINK IMAGE-REF orig               IMAGE source im                  align align                  alt WHEN EQUALS value1 exp                                 value2 :yes                        "Click to enlarge"       else IMAGE source im                   align align 

Figure 7.2. Click to Enlarge.

The bold line puts the image on the page using the IMAGE operator. That's the line you need to modify so that instead of simply displaying the image, you display the image and a text line that says, "Click to Enlarge." This can be achieved by replacing the source argument of the IMAGE operator with the image FUSE, together with the text line. The modified template looks like this:

Yourstoreid-imexpand (im orig hlimit wlimit align) WITH= variable exp       value CALL :yourstoreid-imexpands                RENDER image orig               hlimit               wlimit  IF test NOT EQUALS value1 exp                     value2 :no     then WITH-LINK IMAGE-REF orig           IMAGE source FUSE axis :vertical                           im                           RENDER text "Click to Enlarge"                 align align                 alt WHEN EQUALS value1 exp                                    value2 :yes                        "Click to enlarge"      else IMAGE source im                  align align 

To format the "Click to Enlarge" line to suit your needs, edit the RENDER operator and modify the text-color, text-font, font-size, and text-align arguments.