Resize image and Fill background on WordPress

2 Views

i have image with various size. and i also have various container to place those image.

example : i have 680 x 1024 image that will placed on 500×500 container without cropping.

Read More

so i thought that i will need to build image with container size, than put resized image on top of it.

result that i expected is something like this
http://farm9.staticflickr.com/8033/8016052351_bf726f5e43_z.jpg

or this

http://farm9.staticflickr.com/8459/8016053956_8616f8b1f8_z.jpg

how the best way to achieve this on PHP or wordpress?

Post Views: 2

Related posts

Leave a Reply

6 comments

  1. I wrote a plugin, currently at WordPress plugin repository:

    JResizr

    This plugin have ability to override default worpdress behavior and disable croping image but try to resize image to fit rectangle container size and fill space with background color. You also able to choose background color to use.

  2. There are several ways to accomplish this. One alternative to javascript/php, if the images are roughly the right size, is just use CSS, specifically background-size: contain

    contain

    This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

    You can experiment with it at http://jsfiddle.net/RxTLS/

    Keep in mind this is mostly supported, although IE8 and below do not. I believe there are some polyfills our there though if you’re worried about IE users.

    This solution is only ideal if the images you are uploading are close to the size they will be displayed however. Trying to do this with images that are over 3000 pixels wide/tall is not advised for several different reasons.

    In that case, you’d want to shrink them in PHP first. If you’re uploading the images through WordPress then you can use add_image_size in your functions.php and the images will be automatically resized when you upload them. Alternatively, you can do it manually in PHP as well and there are plenty of tutorials on how to do that out there. I’d just google PHP image resize.

  3. In your html where you have <img> tag, add a width attribute, and set it to 100% that should auto resize your image to its containers size

    <img src="imageNamw.jpg" alt="imageAlt" width="100%" />

  4. You could write a simple Js file that would accomplish that.

    I have done such thing before; So basically you compare the height and the width of the image in its container. then if the height is longer than the width you set the height to 500px and set the width to auto;

    else if the width is longer than the height you set the width to 500px and the height to auto;

    else you set the width and the height to 500px;

    set the container vertical align to middle and text-align to center in css and that should do the trick;

  6. In WordPress it would be simply by using their image_resize function

    image_resize( $file, $max_w, $max_h, $crop, $suffix, $dest_path, $jpeg_quality );

    where you would set the file, width of the container, height of the container and false (as you want to resize, not crop). The others are optional and you should fill them if you have special needs for the new file destination or name or quality. If you entered everything correctly, the function should return path to your newly resized image.

    Note that with WordPress you can actually do this automatically when uploading pics so then later you just retrive the already resized picture – take a look at add_image_size function.