14.3.5. How to change the logo's dimensions dynamically

If you have designed a logo that can be displayed equally well at many resolutions and you wish to be able to change its display dimensions dynamically, according to the display resolution of your visitor's monitor, then you have to use Javascript. This is because PHP is a server-based technology and the web server has no means of knowing the monitor resolution of a client requesting a page. It would have to query that client for the resolution it uses, get an answer, then create the page with the right logo dimensions. But HTTP is a stateless protocol, meaning that, when the server gets an answer, it has no means to relate it to some previous request - not without cookies, URL parameters, sessions and all that extra stuff. This is where Javascript comes into play, obviating the need for a query-and-answer procedure.

Substitute the image logo tag

<img src=themes/YourTheme/images/logo.gif alt=""._WELCOMETO." $sitename" border="0">

of your theme (see Section 14.3.4) with the following:

$mod_log = "images/my_logo.gif";
echo ("<script>\n");
echo ("var swidth='0';\n");
echo ("swidth=screen.width\n");
echo ("if ((swidth<=640)&&(swidth<800)){\n");
echo ("document.write('<img src=$mod_logo width=500 border=0>')");
echo ("}\n");
echo ("else\n");
echo ("if ((swidth>799)&&(swidth<1024)){\n");
echo ("document.write('<img src=$mod_logo width=700 border=0>')");
echo ("}\n");
echo ("else\n");
echo ("if (swidth>=1024){\n");
echo ("document.write('<img src=$mod_logo width=900 border=0>')");
echo ("}\n");
echo ("</script>\n");

Change the location of your logo in the $mod_log variable. The code will echo this Javascript in place of the image tag:

<script>
var swidth='0';
swidth=screen.width
if ((swidth<=640)&&(swidth<800)){
document.write('<img src=$mod_logo width=500 border=0>')");
}
else
if ((swidth>799)&&(swidth<1024)){
document.write('<img src=$mod_logo width=700 border=0>')");
}
else
if (swidth>=1024){
document.write('<img src=$mod_logo width=900 border=0>')");
}
</script>

which will be executed on the client's browser (if the client has Javascript enabled, of course). It will query its resolution (screen width) and write the HTML image tag, with the correct dimensions for the logo image, into the page's HTML code. It may not work though, if the client's security settings do not allow querying the screen's width. See Different themes for different resolutions and banner next to logo for a discussion of the details.