...

View Full Version : Max Width of Image



ccarrin2
01-07-2012, 02:07 PM
Hello Everyone! I have built an array for a social sharing site to take tags and transpose it to an image. Very similair to how this forum and many others do it. So far it works great but I currently have a set width of 390px so that any time a user uploads an image the picture is enlarged or compressed to this width.

As you can image the compression is great but the enlarging is not so hot but I can not have user images greater then this width or it will skew their profiles. Does anyone here know the syntax for creating a max width so that I will only compress larger images but leave smaller ones alone? I've pasted the full array you will see the img tag portion as the last value. Thank you for taking a look!


function parse_bbcodes($content)
{
// The array of regex patterns to look for
$format_search = array(
'#\(.*?)\[/b\]#is', // Bold ([b]text
'#\(.*?)\[/i\]#is', // Italics ([i]text
'#\(.*?)\[/u\]#is', // Underline ([u]text)
'#\(.*?)\[/s\]#is', // Strikethrough ([s]text)
'#\
(.*?)\[/code\]#is', // Monospaced code [code]text)
'#\{3}|[A-F0-9]{6})\](.*?)\[/color\]#is', // Font color ([color=#00F]text)
'#\(.*?)\[/url\]#i', // Hyperlink with descriptive text (text (((?:ftp|https?)://.*?)\))
'#\[url\]((?:ftp|https?)://.*?)\[/url\]#i', // Hyperlink ([url]http://url)
'#\|1[0-9]|20)\](.*?)\[/size\]#is', // Font size 1-20px [size=20]text)
'#\
(.*?)\[/quote\]#is', // Quote ([quote]text)
'#\[embed\]((?:ftp|https?)://.*?)\[/embed\]#i', // Hyperlink (http://url)
'#\[img\](https?://.*?\.(?:jpg|jpeg|gif|png|bmp))\[/img\]#i', // Image ([img]http://url_to_image)
'#\[a\](.*?)\[/a\]#is'
);
// The matching array of strings to replace matches with
$format_replace = array(
'<strong>$1</strong>',
'<em>$1</em>',
'<span style="text-decoration: underline;">$1</span>',
'<span style="text-decoration: line-through;">$1</span>',
"<div class=\"mngl-code\">\$1</div>",
'<span style="color: #$1;">$2</span>',
'<a href="$1" target="_blank">click here</a>',
'<a href="$1" target="_blank">click here</a>',
'<span style="font-size: $1px;">$2</span>',
'<blockquote>$1</blockquote>',
'<a href="$1" target="_blank">Click Here To Watch This Video</a>',
'<img src="$1" width="390" alt="" />',
'<br>$1</br>'
);

melloorr
01-07-2012, 02:55 PM
You could use GD library...


list($widthx) = getimagesize($image) ;
$xwidth = $widthx;

if ($xwidth =< 390)
{
//leave size
}
else
{
//reduce size
}

ccarrin2
01-07-2012, 05:42 PM
Could you explain what that means exactly. I am a little lost on that sorry. Do I just write that code under the array? And what do I put in the comment sections? Thank you for helping me out.

melloorr
01-07-2012, 05:52 PM
Well, what does your code do? Does the top array get the image, and the bottom array resize the image?

ccarrin2
01-07-2012, 06:20 PM
The way this all works is exactly how you see it when you want to insert an image in this forum. You press the picture icon, it asks for the url, you paste it in and hit enter, and then it wraps [img] tags around the url.

The array says that if it see's [img] tags within a post transfer it to the html readable <img src> tag.

So the problem is if I do not specify a width, if a user uploads a 900px wide image it will come in as 900 px wide. However, now that I have the width specified they all come in at that width. So I was wondering if there was something like maxwidth="300" or something like that to specify a max in stead of a finite number.

melloorr
01-07-2012, 06:27 PM
So if you take what I said:

list($widthx) = getimagesize($imageurl) ;
$xwidth = $widthx;

if ($xwidth =< 390)
{
//Wrap the img tags around the url
}
else
{
//resize then wrap the img tags
}

So, if your still unsure how to do it, in the if statement, only use the arrays to wrap the url in image tags. in the else, include all of both arrays, so it resizes, then the img tags are wrapped around the url.

Inigoesdr
01-07-2012, 06:59 PM
So the problem is if I do not specify a width, if a user uploads a 900px wide image it will come in as 900 px wide. However, now that I have the width specified they all come in at that width. So I was wondering if there was something like maxwidth="300" or something like that to specify a max in stead of a finite number.

The code you posted doesn't do any resizing or anything. All it's going to do is force every image to be displayed at a width of 390. The viewer is still going to have to download the image at the full size and just render it smaller. What you are asking for specifically in this last message can be done with CSS via the max-width property (http://www.w3schools.com/cssref/pr_dim_max-width.asp), but again, it isn't actually compressing or resizing the image. It simply gets displayed in a smaller area. If you want to go that route I would suggest adding a class to your embedded images:

'<img src="$1" class="embedded_img" alt="" />',
So you can easily change it later in just your css:


.embedded_img {
max-width: 300px;
border: 0;
}

tangoforce
01-07-2012, 08:13 PM
HEre is a class called SimpleImage. It allows you to get the size of the image in height and width and also resize and save etc.



<?
/*
* File: SimpleImage.php
* Author: Simon Jarvis
* Copyright: 2006 Simon Jarvis
* Date: 08/11/06
* Link: http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details:
* http://www.gnu.org/licenses/gpl.html
*
*/

class SimpleImage {

var $image;
var $image_type;

function load($filename) {
$image_info = getimagesize($filename);
$this->image_type = $image_info[2];
if( $this->image_type == IMAGETYPE_JPEG ) {
$this->image = imagecreatefromjpeg($filename);
} elseif( $this->image_type == IMAGETYPE_GIF ) {
$this->image = imagecreatefromgif($filename);
} elseif( $this->image_type == IMAGETYPE_PNG ) {
$this->image = imagecreatefrompng($filename);
}
}
function save($filename, $image_type=IMAGETYPE_JPEG, $compression=100, $permissions=null)
{
switch ($image_type)
{
case IMAGETYPE_JPEG:
case 'image/jpeg':
imagejpeg($this->image,$filename,$compression);
break;
case IMAGETYPE_GIF:
case 'image/gif':
imagegif($this->image,$filename);
break;
case IMAGETYPE_BMP:
case 'image/bmp':
imagewbmp($this->image,$filename);
break;
}

if( $permissions != null) {
chmod($filename,$permissions);
}
}
function output($image_type=IMAGETYPE_JPEG)
{
switch ($image_type)
{
case IMAGETYPE_JPEG:
case 'image/jpeg':
imagejpeg($this->image);
break;
case IMAGETYPE_GIF:
case 'image/gif':
imagegif($this->image);
break;
case IMAGETYPE_BMP:
case 'image/bmp':
imagewbmp($this->image);
break;
}
}

function getWidth() {
return imagesx($this->image);
}
function getHeight() {
return imagesy($this->image);
}
function resizeToHeight($height) {
$ratio = $height / $this->getHeight();
$width = $this->getWidth() * $ratio;
$this->resize($width,$height);
}
function resizeToWidth($width) {
$ratio = $width / $this->getWidth();
$height = $this->getheight() * $ratio;
$this->resize($width,$height);
}
function scale($scale) {
$width = $this->getWidth() * $scale/100;
$height = $this->getheight() * $scale/100;
$this->resize($width,$height);
}
function resize($width,$height) {
$new_image = imagecreatetruecolor($width, $height);
imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
$this->image = $new_image;
}
}
?>

ccarrin2
01-08-2012, 10:31 AM
The code you posted doesn't do any resizing or anything. All it's going to do is force every image to be displayed at a width of 390. The viewer is still going to have to download the image at the full size and just render it smaller. What you are asking for specifically in this last message can be done with CSS via the max-width property (http://www.w3schools.com/cssref/pr_dim_max-width.asp), but again, it isn't actually compressing or resizing the image. It simply gets displayed in a smaller area. If you want to go that route I would suggest adding a class to your embedded images:

'<img src="$1" class="embedded_img" alt="" />',
So you can easily change it later in just your css:


.embedded_img {
max-width: 300px;
border: 0;
}

No luck with this, pictures are not resizing.

tangoforce
01-08-2012, 12:59 PM
So use the class I have given you to generate new images then.

ccarrin2
01-08-2012, 05:51 PM
So use the class I have given you to generate new images then.

I'm sorry but I don't understand how to add that to my site. I think it is over my head.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum