asked on

Setting the max-width and max-height for images using PHP

I have developed a forum. User are able to insert HTML tags directly. So user can paste a code like:

<img src="http://www.website.com/big_image.jpg" />

sometimes it has the width and height attribute

<img src="http://www.website.com/big_image.jpg" width="1000" />

But I want to limit the max image size automatically, so it will not stretch out the fixed forum length if the image is larger, is that possible?

What I want to do is:

1. if the "width" is already set but it's greater than the max permitted like 500px, then change it to 500px

2. If it does not have the width, then just add the width

3. It should not slow down the speed by loading the remote image file remotely using php functions to find out the width

Thank you.

hielo

>>if the "width" is already set but it's greater than the max permitted like 500px, then change it to 500px
Even when the html code does NOT specify the img width and height explicitly EX:
<img src="test.gif">

the browse will detec/computt the img size automatically and set its size. So, technically speaking, this statement:
"If it does not have the width, then just add the width"
will always be false because the browser will assign a value to it if you did not supply one.

The script below adjusts the size dynamically on the browser, so point #3 is met with no problem.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>	
<script type="text/javascript"><!--
 
window.onload = limitImages;
function setLimit(imgElem,prop,lim)
{
	for(var i=0,limit=document.images.length; i < limit; ++i)
	{
		if(imgElem==document.images[i])
		{
			if( lim < document.images[i][prop] )
			{
				imgElem[prop]=lim;
			}
			break;
		}
	}
}
function limitImages()
{
	var widthLimit=50;
	var heightLimit=50;
	var imgs = document.getElementsByTagName("img");
 
	for( var i=0, limit=imgs.length; i < limit; ++i)
	{
		if( -1 < imgs[i].parentNode.className.indexOf("container") )
		{
			setLimit(imgs[i],"width",50);
			setLimit(imgs[i],"height",50);
		}
	}
}
//--></script>
	
 
</head>
<body>
<!-- correct usage: the parent of img has a "container" class -->
<div class="container"><img src="http://www.cssnz.org/flower.jpg" alt=""></div>
<div class="container"><img src="http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg" alt=""></div>
 
<!-- incorrect usage: the parent of the img tags is a div without a "container" class  -->
<p  class="container">
	<div>
		<img src="http://www.cssnz.org/flower.jpg" alt="">
		<img src="http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg" alt="">
	</div>
</p>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Rok-Kralj

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial