Hello,
I'm working on a forum application in PHP. In signature field I have
"<img src='randomimage.png'><br>bla blah"
If an image is bigger than the field it stretches my tables and looks bad. Is there any way to re size the image if its too big?
Sorry for my poor English and thank you for reading
Edit: The thing is that it's not only the image. It's the image and the text "the big text".
Respectfully, Tom
You would probably first want to take the images dimensions. Then you can maintain an aspect ratio, while setting a new size via the simple HTML height and width attributes for the img tag.
You may also want to consider hosting signatures locally. When a user uploads an image, you can do all of the resizing then via GD Library.
You can re-size images with the gdlibrary (See: PHP/GD - Cropping and Resizing Images), but that may be complicated if you're not already pretty familiar with PHP.
A plugin exists that can dynamically resize images (stretching the image itself). Check out maxSide: http://css-tricks.com/maxside-jquery-plugin-and-how-to/
A quick-solution for keeping the signature imaged tamed is to restrict their overflow with css:
<img src="randomimage.png" />
Becomes
<div class="sigBox"><img src="randomimage.png" /></div>
With the following CSS:
div.sigBox { overflow:hidden; width:50px; height:50px; }
This will hide large images, rather than allowing them to distort your content.
<img src="/img/foo.png" height="100" width="100" />
Height and Width are in pixels. This is if you want to resize the image in HTML (which downloads the full image then "squishes" it around to the specified sizes).
If you want to programmatically alter the physical image file, check out the PHP GD functions: http://us.php.net/manual/en/ref.image.php
For a forum I administered, we placed the signature block in a div with overflow: hidden set in the CSS. That way, a user who put in a massive 600x300 signature image and a paragraph of text gained no benefit from doing so - only the 400x90 area specified showed up. Seemed to work well.
As JoshL and John T pointed out, you can use php's built in image handling support to dynamically alter images. In your situation, you could simply make a php script that will load the image, resize it to appropriate dimensions, serve it and save a cached copy of the resized image to avoid processing overhead on subsequent requests.
You would end up using something like this in your HTML code
<img src="img.php?file=foobar.jpg">
Using Javascript:
function changeSize(imageOrTextId, tableId)
{
if (document.getElementById(imageOrTextId).width > document.getElementById(tableId).width)
{
document.getElementById(imageOrTextId).width = document.getElementById(tableId).width;
}
}
Example HTML:
<body onload="changeSize('image1', 'table1')">
<table id="table1" width="400" height="400">
<img src="randomimage.png" id="image1" />
</table>
</body>
EDIT: It looks like John T also posted this way of doing it... Sorry I didn't notice it before posting.