Image Resize

Daney11 · February 28, 2008

Hey guys,

Im using BBCode

$Text = preg_replace("/\[im g\](.+?)\[\/im g\]/", '<img src="$1">', $Text);

And when i use [im g]imageurl[/im g] it works fine.. however if the image width is say over 510px and my table is only 510px the table streches..... I need to know how to make it so the image resizes down to say 500px width..

Thanks

The Little Guy · February 28, 2008

Give something like this a try:

<?php
$imageDirectory = '../dir/to/my/image';  // no trailing forward slash
$imageName = 'myimage.jpg';  // can be a gif or png as well
$thumbWidth = 500;  // max thumb width
$quality= 100; // For jpg images

$details = getimagesize("$imageDirectory/$imageName") or die('Please only use images.');
if($dtails[0] < $thumbWidth){$thumbWidth = $dtails[0];}
$type = preg_replace('@^.+(?<=/)(.+)$@', '$1', $details['mime']);
eval('$srcImg = imagecreatefrom'.$type.'("$imageDirectory/$imageName");');
$thumbHeight = $details[1] * ($thumbWidth / $details[0]);
$thumbImg = imagecreatetruecolor($thumbWidth, $thumbHeight);
imagecopyresampled($thumbImg, $srcImg, 0, 0, 0, 0, $thumbWidth, $thumbHeight, 
$details[0], $details[1]);
eval('image'.$type.'($thumbImg'.(($type=='jpeg')?', NULL, $quality':'').');');
?>

Daney11 · February 28, 2008

Thankyou for you reply.

The image is linked from other websites for example

[im g]http://www.site.com/image.jpg[/im g]

So i need to know how to resize the image inside the table when using the [im g] tags in bbcode.

The Little Guy · February 28, 2008

when they use the BBCode img tag, then try something like this:

<?php
$size = getimagesize($imgURL);
if($size[0] > 500){
     $w=500;
     $h = $size[1] * ($w/ $size[0]);
}else{$w=$size[0];$h=$size[1];}
echo '<img src="'.$imgURL.'" width="'.$w.'" hight="'.$h.'" />';

Daney11 · February 28, 2008

Thankyou again for your reply.

		$size = getimagesize($i);
            if($size[0] > 500){
            $w=500;
            $h = $size[1] * ($w/ $size[0]);
            }else{$w=$size[0];$h=$size[1];}
            $Text = preg_replace("/\[img\](.+?)\[\/img\]/", '<img src="$1" width="'.$w.'" hight="'.$h.'">', $Text);

is not working. The images are the same

That is posted in my BBCode

The Little Guy · February 28, 2008

what does $Text equal before $size = getimagesize(); ?

Daney11 · February 28, 2008

Im posing the BBCode into "Comments"

The BBCode is a function and i wrap it around the variable for comment body

BBCode($comment_body);

My BBCode funtion is

<style type="text/css">
<!--
body  {
   font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.bold {
   font-weight: bold;
}

.italics {
   font-style: italic;
}

.underline {
   text-decoration: underline;
}

.strikethrough {
   text-decoration: line-through;
}

.overline {
   text-decoration: overline;
}

.sized {
   text-size:
}

.quotecodeheader {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
}

.codebody {
   background-color: #CCCC;
    font-family: Courier new, courier, mono;
    font-size: 12px;
    color: #006600;
    border: 1px solid #BFBFBF;
}

.quotebody {
   background-color: #CCCCCC;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
   border: 1px solid #000000;
}

.listbullet {
   list-style-type: disc;
   list-style-position: inside;
}

.listdecimal {
   list-style-type: decimal;
   list-style-position: inside;
}

.listlowerroman {
   list-style-type: lower-roman;
   list-style-position: inside;
}

.listupperroman {
   list-style-type: upper-roman;
   list-style-position: inside;
}

.listloweralpha {
   list-style-type: lower-alpha;
   list-style-position: inside;
}

.listupperalpha {
   list-style-type: upper-alpha;
   list-style-position: inside;
}
-->
</style>

<?php
   //Local copy

include_once('settings.php');
// This Includes The Settings Of The Website
include_once('functions.php');
// This Includes The Functions Of The Website
include_once('team.php');
// This Includes The Team Information Of The Website
include_once('bbcode.php');
// This Includes The Team Information Of The Website

   function BBCode($Text)
       {
         // Replace any html brackets with HTML Entities to prevent executing HTML or script
            // Don't use strip_tags here because it breaks [url] search by replacing & with amp
            $Text = str_replace("<", "<", $Text);
            $Text = str_replace(">", ">", $Text);

            // Convert new line chars to html <br /> tags
            $Text = nl2br($Text);

            // Set up the parameters for a URL search string
            $URLSearchString = " a-zA-Z0-9\:\/\-\?\&\.\=\_\~\#\'";
            // Set up the parameters for a MAIL search string
            $MAILSearchString = $URLSearchString . " a-zA-Z0-9\.@";

            // Perform URL Search
            $Text = preg_replace("/\[url\]([$URLSearchString]*)\[\/url\]/", '<a href="$1" target="_blank">$1</a>', $Text);
            $Text = preg_replace("(\[url\=([$URLSearchString]*)\](.+?)\[/url\])", '<a href="$1" target="_blank">$2</a>', $Text);
            //$Text = preg_replace("(\[url\=([$URLSearchString]*)\]([$URLSearchString]*)\[/url\])", '<a href="$1" target="_blank">$2</a>', $Text);

            // Perform MAIL Search
            $Text = preg_replace("(\[mail\]([$MAILSearchString]*)\[/mail\])", '<a href="mailto:$1">$1</a>', $Text);
            $Text = preg_replace("/\[mail\=([$MAILSearchString]*)\](.+?)\[\/mail\]/", '<a href="mailto:$1">$2</a>', $Text);
         
            // Check for bold text
            $Text = preg_replace("(\[b\](.+?)\[\/b])is",'<span class="bold">$1</span>',$Text);

            // Check for Italics text
            $Text = preg_replace("(\[i\](.+?)\[\/i\])is",'<span class="italics">$1</span>',$Text);

            // Check for Underline text
            $Text = preg_replace("(\[u\](.+?)\[\/u\])is",'<span class="underline">$1</span>',$Text);

            // Check for strike-through text
            $Text = preg_replace("(\[s\](.+?)\[\/s\])is",'<span class="strikethrough">$1</span>',$Text);

            // Check for over-line text
            $Text = preg_replace("(\[o\](.+?)\[\/o\])is",'<span class="overline">$1</span>',$Text);

            // Check for colored text
            $Text = preg_replace("(\[color=(.+?)\](.+?)\[\/color\])is","<span style=\"color: $1\">$2</span>",$Text);

            // Check for sized text
            $Text = preg_replace("(\[size=(.+?)\](.+?)\[\/size\])is","<span style=\"font-size: $1px\">$2</span>",$Text);

            // Check for list text
            $Text = preg_replace("/\[list\](.+?)\[\/list\]/is", '<ul class="listbullet">$1</ul>' ,$Text);
            $Text = preg_replace("/\[list=1\](.+?)\[\/list\]/is", '<ul class="listdecimal">$1</ul>' ,$Text);
            $Text = preg_replace("/\[list=i\](.+?)\[\/list\]/s", '<ul class="listlowerroman">$1</ul>' ,$Text);
            $Text = preg_replace("/\[list=I\](.+?)\[\/list\]/s", '<ul class="listupperroman">$1</ul>' ,$Text);
            $Text = preg_replace("/\[list=a\](.+?)\[\/list\]/s", '<ul class="listloweralpha">$1</ul>' ,$Text);
            $Text = preg_replace("/\[list=A\](.+?)\[\/list\]/s", '<ul class="listupperalpha">$1</ul>' ,$Text);
            $Text = str_replace("[*]", "<li>", $Text);

            // Check for font change text
            $Text = preg_replace("(\[font=(.+?)\](.+?)\[\/font\])","<span style=\"font-family: $1;\">$2</span>",$Text);

            // Declare the format for [code] layout
            $CodeLayout = '<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="quotecodeheader"> Code:</td>
                                </tr>
                                <tr>
                                    <td class="codebody">$1</td>
                                </tr>
                           </table>';
            // Check for [code] text
            $Text = preg_replace("/\[code\](.+?)\[\/code\]/is","$CodeLayout", $Text);

            // Declare the format for [quote] layout
            $QuoteLayout = '<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="quotebody" height="30">
								<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr><td><b><i>Quote...</i></b><br />
								<i>$1</i>
								</td></tr></table>
								</td>
                                </tr>
                           </table>';
					   
		// Declare the format for [quote] layout
            $QuoteLayoutName = '<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="quotebody" height="30">
								<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr><td>
								<b><i>$1 said...</i></b><br /><i>$2</i>
								</td></tr></table>
								</td>
                                </tr>
                           </table>';
					   
	     // Check for [quote] text
            $Text = preg_replace("/\[quote\](.+?)\[\/quote\]/is","$QuoteLayout", $Text);
		$Text = preg_replace("/\[quote\=([a-z0-9]*)\](.+?)\[\/quote\]/", "$QuoteLayoutName", $Text);
					   
		// Declare the format for Left layout
            $LeftLayout = '<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="left">$1</td>
                                </tr>
                           </table>';
             // Check for Left text
            $Text = preg_replace("/\[left\](.+?)\[\/left\]/is","$LeftLayout", $Text);

		// Declare the format for Left layout
            $CenterLayout = '<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="center">$1</td>
                                </tr>
                           </table>';
             // Check for Left text
            $Text = preg_replace("/\[center\](.+?)\[\/center\]/is","$CenterLayout", $Text);

					   
		// Declare the format for Right layout
            $RightLayout = '<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="right">$1</td>
                                </tr>
                           </table>';
             // Check for Right text
            $Text = preg_replace("/\[right\](.+?)\[\/right\]/is","$RightLayout", $Text);
         
            // Images
            // [img=pathtoimage]
            $Text = preg_replace("/\[img\](.+?)\[\/img\]/", '<img src="$1">', $Text);
         
            // [img=widthxheight]image source[/img]
            $Text = preg_replace("/\[img\=([0-9]*)x([0-9]*)\](.+?)\[\/img\]/", '<img src="$3" height="$2" width="$1">', $Text);
            

		return $Text;
      }
?>

and my comment body table is

<table width="500" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td><?php echo BBCode(language_filter($comment_body)); ?></td>
</tr>
</table>

Hope this helps.

Thankyou

[/code][/code]

obsidian · February 28, 2008

Here is how I have solved a similar problem: I created a PHP script which accepts arguments through the URL and crops/resizes the images on the fly. The catch is that I cache the requested image so that when the next person views it, I can just serve up the cached image instead of actually taking the resources to resize every time. The way this applies to your situation is that you would translate all your BBCoded images into HTML img tags that reference the image manipulator script and pass in the location of the file in question. So:

BBCode:

[img=http://www.mydomain.com/images/img01.jpg]

becomes something like this HTML:

<img src="/images/img.php/resize(640,480)/http://www.mydomain.com/images/img01.jpg" />

Then, your img.php script pulls the argument resize(640,480) and parses it as a resize command and then grabs the image from the URL provided as the last argument and modifies it with the arguments given. Finally, the image is cached and served up to the end user. Seems like a lot, I know, but to manipulate images from off your server, this may be your only way to do it reliably.

The Little Guy · February 28, 2008

<?php
if(preg_match("/\[img\](.+?)\[\/img\]/", $Text,$matches)){
     $imgURL = $matches[0];
     $size = getimagesize($imgURL);
     if($size[0] > 500){
          $w=500;
          $h = $size[1] * ($w/ $size[0]);
     }else{$w=$size[0];$h=$size[1];}
     echo '<img src="'.$imgURL.'" width="'.$w.'" hight="'.$h.'" />';
}
?>

Daney11 · February 28, 2008

Thanks to both of your replys.

The little guy, where do i put that peice of coding? ^^

Thanks again.

The Little Guy · February 28, 2008

You could turn it into a function, and pass the BBC to it as a string, OR just replace your old image code(s) with that.

Daney11 · February 28, 2008

Ok, thanks a lot

obsidian · February 28, 2008

Ok, thanks a lot

Keep in mind that the little guy's solution is only calculating the size and rendering it smaller via HTML img attributes, so the full size of your image is still loading. If that is what you're after, go for it (although, you'll want $matches[1] instead of $matches[0] on line 3 of his code above). If you are actually wanting to resize the image so as to avoid any undue pixelation or distortion, you may want to consider going as far as my method mentioned above.

Good luck!

Daney11 · February 28, 2008

Ok thanks obsidian.

But what would i put in the img.php script?

Thanks

obsidian · February 28, 2008

The image script would be a full manipulator to accept and apply the changes you request via your URL to the selected image. It would always return an image resource (usually via imagejpeg, imagepng or imagegif). You load the requested image into the resource, and then manipulate it as you want it done and then simply display it to the browser. I choose to cache the requests so the image processing isn't done over and over again.

uniflare · February 28, 2008

Obsidian, great idea, can i just suggest limiting the file to specific variations of images so as some random person could not do lots of freaky stuff with your images and overload the server? or am i just being paranoid?

obsidian · February 28, 2008

Obsidian, great idea, can i just suggest limiting the file to specific variations of images so as some random person could not do lots of freaky stuff with your images and overload the server? or am i just being paranoid?

No, you're absolutely right. Within the processing script, you should have a predefined list of functions that can (and will) be performed by the script if the arguments are right. Another idea is to base64encode() all your arguments so that at a glance, they're a little more difficult to manipulate.

Sign In

Image Resize

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information