Displaying large images on different monitor sizes

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
DanKohanski
Forum Newbie
Posts: 1
Joined: Sat May 30, 2009 5:33 pm

Displaying large images on different monitor sizes

Post by DanKohanski »

I am developing a website to show my photographs, and one persistent problem I had was that the detail page (which shows the image in full) would be either too small or require scroll bars, depending on the monitor being used. I did some research here and elsewhere, and eventually came up with a solution that I would like to share.

The first problem is that there is no way in PHP to read the monitor screen size, since PHP is, after all, a server-side operation. Which means using javascript. But any javascript variables will go away once the page is downloaded, and I need that information on many pages. That means session variables - but javascript doesn't know about session variables; those are server-side.

The solution was to write the PHP code in the index.php page as a two-parter: In the first run, the program sees, in PHP, that the screen session variables do not exist, so it calls a javascript routine to get the screen size. The script then passes the data backt to index.php as URL variables; in the second pass, index.php sees these URL variables and creates session variables from them.

Because the existence of the session variiables prevents the javascript from being built into the HTML the second time, we do not have an infinite loop. The code looks like this:

In the pre-processing part of index.php:

Code: Select all

if (!isset($_SESSION)) {
  session_start();
}
 
if (isset ($_GET['width'])) {
    $_SESSION['screenWidth'] = $_GET['width'];
    $_SESSION['screenHeight'] = $_GET['height'];
    if (($_GET['width'] >= 1280) && ($_GET['height'] >= 1024)) {
        $_SESSION['fullScreen'] = (boolean) TRUE;
        } else {
        $_SESSION['fullScreen'] = (boolean) FALSE;
        }
}
Then, in the HEAD section:

Code: Select all

<?php if (!isset ($_SESSION['screenWidth'])) { ?>
<script type="text/javascript">
 
width = screen.width;
height = screen.height;
 
if (width > 0 && height >0) {
    window.location.href = "index.php?width=" + width + "&height=" + height;
} else 
    exit();
 
</script>
<?php } ?>
This creates two session variables, screenWidth and screenHeight.

In order to make proper use of them, I have two subroutines (these are kept in a separate .php file that gets included in any page I need it):

Code: Select all

function svWidth ($theWidth) {
    if ($_SESSION['fullScreen']) return $theWidth;          // full size. no adjustment needed
    return round ($theWidth * ($_SESSION['screenWidth'] / 1280.0));
    }
 
function svHeight ($theHeight) {
    if ($_SESSION['fullScreen']) return $theHeight;         // full size. no adjustment needed
    return round ($theHeight * ($_SESSION['screenHeight'] / 1024.0));
    }
 
Two things to note here:
1. Any page that includes these subroutines must also include this line of code FIRST:

Code: Select all

if (!isset ($_SESSION)) session_start();
(It can't be included in the separate php because it likely to result in one of these "Cannot send session cache limiter" errors - at least, I kept getting them until I move the line out of the subroutine php page.)

2. The values 1280 and 1024 are, respectively, the width and height of the screen on which I developed the web pages.

The way I use these two subroutines is mainly in the APDiv width, height, top and left parameters. First, I set up my Layout Object (using Dreamweaver) in an absolute position, and get it where I want it and how I want it to look on my development monitor (which is, remember, 1280x1024). Then, when I'm satisfied, I edit the code so it looks something like this:

Code: Select all

#apDivTitle {
    position:absolute;
    width:<?php echo svWidth(335); ?>px;
    height:28px;
    z-index:5;
    left: <?php echo svWidth(810); ?>px;
    top: <?php echo svHeight(300); ?>px;
 
where the values in the parentheses are the values set by Dreamweaver as I moved the object around on the design screen. (I didn't change the height - 28 - because it's small enough that it won't change much on any size screen.)

Images may be similarly sized:

Code: Select all

<img src=....  width="<?php echo svWidth(544); ?>"
 
To sum up, what this method does is allow me to design a page so that it looks good on my development monitor, then include the subroutine calls so that the objects are proportionally sized and positioned for the screen that the visitor is using. (The code does not size up if the screen is bigger than my development monitor, but you can take care of that by removing the "fullScreen" check.)

I learned a lot of techniques for developing my website from this and other forums, so this is my way of saying thanks, and I hope some of you will find it useful.

Dan
Post Reply