CODEWITHSUNDEEP
phpwordpressimage-resizing
Jeg Bagus
Jeg Bagus

Reputation: 5075

Resize image and Fill background on Wordpress

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 500x500 container without cropping.

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?

Upvotes: 2

Views: 5397

Answers (6)

Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

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%" />

Upvotes: 1

Isaac Suttell
Isaac Suttell

Reputation: 469

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.

Upvotes: 1

Arsh Sharma
Arsh Sharma

Reputation: 103

You can also try a simple timthumb library to resize images in any size.

Please check the timthumb library code here :

http://timthumb.googlecode.com/svn/trunk/timthumb.php

Upvotes: 0

Jeg Bagus
Jeg Bagus

Reputation: 5075

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.

Upvotes: 7

Kamba-Bilola Ted
Kamba-Bilola Ted

Reputation: 197

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;

Upvotes: 0

Miha Rekar
Miha Rekar

Reputation: 1546

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.

Upvotes: -1

Related Questions