Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Max Width of Image

    Hello Everyone! I have built an array for a social sharing site to take [img] 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!

    PHP Code:
    function parse_bbcodes($content)
      {
        
    // The array of regex patterns to look for
        
    $format_search =  array(
          
    '#\[b\](.*?)\[/b\]#is'// Bold ([b]text[/b]
          
    '#\[i\](.*?)\[/i\]#is'// Italics ([i]text[/i]
          
    '#\[u\](.*?)\[/u\]#is'// Underline ([u]text[/u])
          
    '#\[s\](.*?)\[/s\]#is'// Strikethrough ([s]text[/s])
          
    '#\[code\](.*?)\[/code\]#is'// Monospaced code [code]text[/code])
          
    '#\[color=\#?([A-F0-9]{3}|[A-F0-9]{6})\](.*?)\[/color\]#is'// Font color ([color=#00F]text[/color])
          
    '#\[url=((?:ftp|https?)://.*?)\](.*?)\[/url\]#i'// Hyperlink with descriptive text ([url=http://url]text[/url])
          
    '#\[url\]((?:ftp|https?)://.*?)\[/url\]#i'// Hyperlink ([url]http://url[/url])
          
    '#\[size=([1-9]|1[0-9]|20)\](.*?)\[/size\]#is'// Font size 1-20px [size=20]text[/size])
          
    '#\[quote\](.*?)\[/quote\]#is'// Quote ([quote]text[/quote])
          
    '#\[embed\]((?:ftp|https?)://.*?)\[/embed\]#i'// Hyperlink ([url]http://url[/url])
          
    '#\[img\](https?://.*?\.(?:jpg|jpeg|gif|png|bmp))\[/img\]#i'// Image ([img]http://url_to_image[/img])
          
    '#\[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>'
        
    ); 

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    You could use GD library...

    PHP Code:
    list($widthx) = getimagesize($image) ; 
     
    $xwidth $widthx;

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


  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Well, what does your code do? Does the top array get the image, and the bottom array resize the image?

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    So if you take what I said:
    PHP Code:
    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.

  • #7
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,647
    Thanks
    2
    Thanked 406 Times in 398 Posts
    Quote Originally Posted by ccarrin2 View Post
    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, 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:
    PHP Code:
    '<img src="$1" class="embedded_img" alt="" />'
    So you can easily change it later in just your css:
    Code:
    .embedded_img {
        max-width: 300px;
        border: 0;
    }

  • #8
    Senior Coder
    Join Date
    Feb 2011
    Location
    Your Monitor
    Posts
    4,474
    Thanks
    63
    Thanked 537 Times in 524 Posts
    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.

    PHP Code:
    <?
    /*
    * 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->image0000$width$height$this->getWidth(), $this->getHeight());
          
    $this->image $new_image;
       }
    }
    ?>
    I can't really think of anything to write here now...

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Inigoesdr View Post
    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, 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:
    PHP Code:
    '<img src="$1" class="embedded_img" alt="" />'
    So you can easily change it later in just your css:
    Code:
    .embedded_img {
        max-width: 300px;
        border: 0;
    }
    No luck with this, pictures are not resizing.

  • #10
    Senior Coder
    Join Date
    Feb 2011
    Location
    Your Monitor
    Posts
    4,474
    Thanks
    63
    Thanked 537 Times in 524 Posts
    So use the class I have given you to generate new images then.
    I can't really think of anything to write here now...

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tangoforce View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •