Dynamic image resize based on detected user screen resolution

[Revlis]

Hi all,

So my task was to build basically photo-based department org-charts for a SharePoint 2007 environment. Not sure why I was asked to do this as the last time I web designed was when Netscape 4.0 and IE4 were still duking it out, but whatever.

I inserted my images (125x125) into tables and everything looks great. on my screen.

Boss's screen, a slightly smaller monitor with a lower resolution, not so much.

I'd like to be able to dynamically resize the image display sizes based on detected screen resolutions, or failing that, have at least 2 image libraries using 75x75 and 125x125 and then load one image size or the other based again on detected screen resolutions.

I've found a couple of articles on how to resize based on detected browser zoom settings, but that's not quite what I'm looking for.

Any help will be greatly appreciated!

thanks!

[Taywin]

You could use screen.width & screen.height to check for resolution. However, this doesn't mean the size of window of the browser, but the whole screen size.

[MartinRinehart]

And your question?

Without knowing where you are stumped, do try to ignore all the advice about using image software, not browsers, to size your images.

Most browsers today can effectively resize photos even by rather small amounts. I just created an animation where a detail of the Sistine chapel swells (animation, enlarges one pixel at a time in height and width) and it works well except in MSIE, which doesn't have the speed needed for animation.

Go with 125x125 images if that's what you've got, and don't be afraid to show them at 120x120, or 80x80 and don't worry. Chances are the browser will do a decent job resizing.

Grab the screen size (way harder than it should be to get cross-browser screen size) and then calculate size for each picture, rescaling:

size = f( screen width or height times % space per picture );
img_ref.style.width = img_ref.style.height = size + 'px';

Good luck!

[Revlis]

Sorry, to be more specific I don't know how to go about performing on-the-fly image re-sizing based on a screen.width. Unfortunately, the boss's browser seemed to be re-sizing the images the wrong way: his slightly smaller screen rendered the images about 50% larger than on my screen, which pushed the org-chart images way, way off-screen horizontally.

Ideally, I'd like to hit each image with a resize based on a percentage taken from the ideal view resolution (screen.width = 1680).

So if my boss's screen.width = 1280, then the percentage is 1280/1680 or 0.76. So that would turn the native 125x125 image into a rendering of 95x95.

If this sort of on-the-fly resize is not possible, then simply have a 2nd library of 95x95 images that would be loaded in place of 125x125 any time the detected screen.width < 1680.

I've been screwing around with the later for the last few hours but still can't even get that to work. But ideally the former would be the desired goal. Either way, my java is waaaaay rusty and none of it is working. I think my main problem now is referencing a java-script-defined variable as the img src path.

ie

<img src="..\test\placehodler.jpg" alt="Test" name="img_var">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) 
 {
 var img_sm = new Image();
  img_sm.src = "..\test\image_sm.jpg";
 
 var img_t = new Image();
  img_t.src = "..\test\image_t.jpg";
 }

function small_screen()
 {
 if (screen.width >= "1680") 
  { 
  document["img_var"].src = img_sm.src
  }
 }

function large_screen()
 {
 if (screen.width < "1680") 
  { 
  document["img_var"].src = img_t.src
  }
 }

//-->
</script>

A. The above code does not work. I'm sure it's something stupid, but the reference to the images are not working.

B. I have literally 100s of images to do this for, I'd rather not have to insert blocks of codes like this for every user file.

[Taywin]

OK, the source of problem may or may not be what you are thinking. Each browser has different set up for zooming. If your boss browser is set to view certain font size and zoom, the display will become bigger compared to the other that has set up the display to be smaller. Have you checked the browser configuration?

Hmm... That's not the way you call the image element from your document. Can I see your HTML portion of the image display too?

[jmichae3]

<!DOCTYPE html>
<html>
<head>
<title>imagearray</title>
</head>
<body>
<span id="imgArrayContainer"></span>
<!-- spell placeholder right-->
<SCRIPT LANGUAGE="JavaScript">
<!--
//this is a thumbnail array of images
var sm=new Array(), t=new Array(), i;
//by the way, you can generate these with PHP and MYSQL.  this is for 20*20=400 images.
//you can even do paging by changing the starting number of the images...
//small images

function initImageArray(startingImageNumber, numberOfImages, numberOfColumns) {
	var s="";
	var columnCount=0;
	if (numberOfColumns < 2) {
		return false;
	}
	for (i=0; i < numberOfImages; i++) {
		sm[i]=new Image(); //optionally, you can do Image(200,150) to set a specific size
		t[i]=new Image();
		//if the pictures are numbered 1..600, you can simply do the following 2 lines
		sm[i].src="../test/image_sm" + (i + startingImageNumber) + ".jpg";
		
		t[i].src="../test/image_t" + (i + startingImageNumber) + ".jpg";
		s += "<img id='imgArray" + i + startingImageNumber + "' src='../test/placeholder.jpg' alt='Test'>"; //leave no spaces between images
		//the following is optional
		if (numberOfColumns - 1 == columnCount) {
		    s += "<br>\n";
		}
		columnCount = (columnCount + 1) % numberOfColumns;
	}
	/*
	//...otherwise, you have to do the below and do everything manually... yuck.
	//small images
	sm[0].src="../test/image_sm1.jpg"; //change \ to / for use on the web!
	sm[1].src="../test/image_sm2.jpg"; //change \ to / for use on the web!
	sm[2].src="../test/image_sm3.jpg"; //change \ to / for use on the web!
	sm[3].src="../test/pict0478.jpg"; //change \ to / for use on the web!
	...

	//tiny images
	t[0].src="../test/image_t1.jpg";
	t[1].src="../test/image_t2.jpg"; //change \ to / for use on the web!
	t[2].src="../test/image_t3.jpg"; //change \ to / for use on the web!
	t[3].src="../test/image_t4.jpg"; //change \ to / for use on the web!
	...
	*/
	//make the placeholders suddenly appear
	document.getElementById('imgArrayContainer').innerHTML = s; 
	return true;
}


//this function converts the id of an immArray from something like imgArray39 to the integer 39
//if you need it.
function extractImageNumber(id) {
	var len=String("imgArray").length;
	if (len+1 < id.length) {
		//not long enough!
		return 0;
	}
	return parseInt(id.substr(len, id.length));  //let's hope it's a number!
} 
 
 
function setImages(startingImageNumber)
{
	//common screen resolutions are: 1366x768, 1280x1024, 1024x768, 1920x1080, 1920x1200, not so common 2560x1600
	var i;
	for (i=0; i < a.length; i++) {
		if (screen.width >= "1680")
		{
			document.getElementById("imgArray" + i + startingImageNumber).src = img_sm.src; //make the small image pop into place
		}
		else
		{
			document.getElementById("imgArray" + i + startingImageNumber).src = img_t.src; //make the tiny image pop into place
		}
	}
}
 
//zero-based numbers generally work better.  
//create the image tags instantly
initImages(1, 20*20, 20);  //do this only once.  if you have 1-based image numbers, use 1
setImages(1);
window.setTimeout("setImages(1+2*20*20)", 4*60*1000);// 2 minute delay, then fire off "page down" to images
window.setTimeout("setImages(1+3*20*20)", 8*60*1000);// 2 minute delay, then fire off "page down" to images
//setImages(2*20*20);
 
//-->
</script>
</body>
</html>

[jmichae3]

<!DOCTYPE html>
<html>
<head>
<title>imagearray</title>
</head>
<body>
<span id="imgArrayContainer"></span>
<div id="os"></div>
<div id="ot"></div>
<!-- spell placeholder right -->
<script type="text/javascript">
//this is a thumbnail array of images
var sm=new Array(), t=new Array(), i;
//by the way, you can generate these with PHP and MYSQL.  this is for 20*20=400 images.
//you can even do paging by changing the starting number of the images...
//small images

var useNameOrId="id";

function InitImageArray(startingImageNumber, numberOfImages, numberOfColumns) {
	var imageArrayContainerString = "";
	var columnCount = 0;
	var imageNumber;
	if (numberOfColumns < 1) {
		return false;
	}
	for (i = 0; i < numberOfImages; i++) {
		imageNumber = i + startingImageNumber;
		sm[i]=new Image(); //optionally, you can do Image(200,150) to set a specific size
		t[i]=new Image();
		//if the pictures are numbered 1..600, you can simply do the following 2 lines
		sm[i].src="images/image_sm" + imageNumber + ".gif";
		t[i].src="images/image_t" + imageNumber + ".gif";
		if ("id" == useNameOrId) {
			imageArrayContainerString += "<img id='imgArray" + imageNumber + "' src='images/list.gif' alt='Test'>"; //leave no spaces between images
		} else {
			imageArrayContainerString += "<img name='imgArray" + imageNumber + "' src='images/list.gif' alt='Test'>"; //leave no spaces between images
		}
		//the following is optional. this groups the images into columns
		if (numberOfColumns - 1 == columnCount) {
		    imageArrayContainerString += "<br>\n";
		}
		columnCount = (columnCount + 1) % numberOfColumns;
	}
	/*
	//...otherwise, you have to do the below and do everything manually... yuck.
	//small images
	sm[0].src="../test/image_sm1.jpg"; //change \ to / for use on the web!
	sm[1].src="../test/image_sm2.jpg"; //change \ to / for use on the web!
	sm[2].src="../test/image_sm3.jpg"; //change \ to / for use on the web!
	sm[3].src="../test/pict0478.jpg"; //change \ to / for use on the web!
	...

	//tiny images
	t[0].src="../test/image_t1.jpg";
	t[1].src="../test/image_t2.jpg"; //change \ to / for use on the web!
	t[2].src="../test/image_t3.jpg"; //change \ to / for use on the web!
	t[3].src="../test/image_t4.jpg"; //change \ to / for use on the web!
	...
	*/
	//make the placeholders suddenly appear
	document.getElementById('imgArrayContainer').innerHTML = imageArrayContainerString;
	return true;
}


//this function pops a set of images into place.
function SetImages(startingImageNumber) {
	//common screen resolutions are: 1366x768, 1280x1024, 1024x768, 1920x1080, 1920x1200, not so common 2560x1600
	while (!document.images);
	var i, e, imageNumber;
	for (i = 0; i < sm.length; i++) {
		imageNumber = i + startingImageNumber;
		if ("id" == useNameOrId) {
			e = document.getElementById("imgArray" + imageNumber);
		} else {
			e = document["imgArray" + imageNumber];
		}
		if (null != e) {
			if (screen.width >= 1680) {
				e.src = sm[i].src; //make the small image pop into place
			} else {
				e.src = t[i].src; //make the tiny image pop into place
			}
		}
	}
}
 

//this function converts the id of an immArray from something like imgArray39 to the integer 39
//if you need it.
function ExtractImageNumber(id) {
	var len=String("imgArray").length;
	if (len + 1 < id.length) {
		//not long enough!
		return 0;
	}
	return parseInt(id.substr(len, id.length));  //let's hope it's a number!
} 

function ImageIdString(imageNumber) {
	return "imageNumber"+imageNumber;  //let's hope it's a number!
} 
 
 
//zero-based numbers generally work better.  
//create the image tags instantly
InitImageArray(0, 2*2, 2);  //do this only once.  if you have 1-based image numbers, use 1
SetImages(0);
//window.setTimeout("setImages(2*2*2)", 1*60*1000);// 2 minute delay, then fire off "page down" to images
//window.setTimeout("setImages(3*2*2)", 2*60*1000);// 2 minute delay, then fire off "page down" to images
//setImages(2*20*20);
 
</script>
</body>
</html>

[Revlis]

thanks. working my way thru the code to modify for my data. I appreciate the help. Will post back with the results.

Taywin - as a test I was just using an <img src> tag that referenced the img_var variable. In quotes and out of quotes, it did not work. So I can't really tell if it is the html tag that wasn't working, or the java variable. Will keep plugging.

[Taywin]

Sorry, I didn't look closely that you were using an array. Anyway, if you have image loaded, it would be OK. If not, a preferred way to do is to create image objects on the fly, so they will be loaded properly.

PS: Why do you need multiple images while you can actually manipulate the image size display instead (width/height)?

[Revlis]

Haven't implemented the array yet. Trying to decide if it is more trouble to rename all the files to make them array-friendly. Anyway, I finally got my variable references working with:

<html>
<head>
<script type="text/javascript">

var img_sm = "../test/Last.First_sm.jpg";
var sWidth = screen.width;
var ratio
var pW
var pH
</script>
</head>

<body>
<script type="text/javascript">

if (sWidth < 1680) 
 {
 ratio = sWidth/1680;
 pW = Math.round(ratio * 125);
 pH = Math.round(ratio * 125);
 document.write('<img src="'+img_t+'" width="'+pW+'" height="'+pH+'">');
 
 <!-- write the variable values for testing purpose
 <!-- document.write('ratio= "'+ratio+'" sWidth = "'+sWidth+'" width="'+pW+'" height="'+pH+'">');
 }
else if (sWidth >= 1680)
 {
 document.write('<img src="'+img_sm+'" />');
 <!-- document.write(''+sWidth+'');
 }

</script>
</body>
</html>

Now that I understand how this part is working I have to decide how I'm going to apply to the larger set of images.

Thanks all, the info posted in this thread got me on the right path to finding a solution.