As you can see in http://thefreefallband.com/super in the last post there's an image too big for almost every computer. Is there anyway to pu t a limit to the images in wordpress in width?
If there isn't, how can i resize it via html code without losing the proportion?
A really simple CSS fix would be:
.post img {
max-width: 100%;
height: auto;
}
You can declare the sizes of images the WP makes automatically when you upload them to the Media Library by going to 'Settings -> Media'. Note that while Thumnial Size will crop your image to the exact size you specify, Medium Size and Large Size will keep the aspect ratio of your image, while resizing it to fit your specified max height/width.
If they are not good for you, you can add you own image size in functions.php
add_image_size( $name, $width, $height, $crop );
See the codex for more informaion.
When calling an image, depending on the function your are using, you can specify either one of the defined image sizes, or a maximum height/width (WP will find the closest match if you do this).
Assuming your are using the post featured image -
if(has_post_thumbnail( $post_id )) :
the_post_thumbnail( $size, $attr );
endif;
See the codex for has_post_thumbnail() and the_post_thumbnail() for more informaion.
Related
I have a CI image upload form, and I want to make sure the images I upload will fit in a given rectangle. If they are too big - I want to downsize them. If they fit within that rectangle - I don't need resizing.
I know CI supports max-height and max-width (as a limitation on how big the uploaded images can be), and it supports resize, but I couldn't find how to resize the image to a set max-height and max-width (while maintining the ratio).
Well, it was easy enough, as expected from CI (-:
When using $this->image_lib->resize(), you set the desired width & height. If you also set maintain_ratio to true, the new image will be resized to the closest possible values of your set width & height, while preserving the original aspect ratio.
So this is the code I used, after uploading the image:
$file_data = $this->upload->data();
$max_height = 115;
$max_width = 225;
if ($file_data['image_width']>$max_width || $file_data['image_height']>$max_height)
{
$configResize = array(
'source_image' => $file_data['full_path'],
'width' => $max_width,
'height' => $max_height,
'maintain_ratio' => TRUE
);
$this->load->library('image_lib',$configResize);
$this->image_lib->resize())
}
You need to calculate the height and width you would like the resized image to be. For example:
Suppose your input image is 1200x1000 and you want your resized image to be 300x200.
Find the size ratios 1200/1000=1.2 and 300/200=1.5.
If the original ratio is larger than the targeted resized size ratio you want to match the width, else you want to math the height. In this case we want to match the height.
Find the scale factor to change the image to the target size. Scale factor is 200/1000=0.2.
Use the scale factor to find the new size 1200x1000 scaled by 0.2 (1200*0.2 and 1000*0.2) = 240x200.
Resize the image to 240x200 as it is your best fit for the 300x200 box.
Take from the website provided by Silviu G http://ellislab.com/codeigniter/user-guide/libraries/image_lib.html
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
$config['source_image'] = 'originalImage.jpg';
$config['create_thumb'] = TRUE;
$config['width'] = 240;
$config['height'] = 200;
$this->load->library('image_lib', $config);
$this->image_lib->resize();
Perhaps a better way to handle this is through CSS (in conjunction with the CI image manipulation library for resizing):
.media img{
max-width:100px;
max-height:100px;
}
Use the Image Manipulation Class form CI
I'm trying to resize a fullsize image poster into three smaller variants of the file. I first save the fullsize poster, then i use it's path to create the smaller ones. The problem is that the sizes are incorrect. I have a $conf array containing general config info for all images, and then i have a $conf array for each image with specific changes (eg. size). I clear the lib before every new init.
// Config for all images
$conf['source_image'] = $file_path;
$conf['quality'] = 80;
$conf['maintain_ratio'] = true;
$conf['master_dim'] = 'auto';
// Small
$conf['new_image'] = 'img/movie_images/posters_small/' . $file_name;
$conf['height'] = 75;
//$conf['width'] = 55;
$this->image_lib->initialize($conf);
$this->image_lib->resize();
$this->image_lib->clear();
//unset($conf['width']);
// Medium
$conf['new_image'] = 'img/movie_images/posters_medium/' . $file_name;
$conf['height'] = 200;
$this->image_lib->initialize($conf);
$this->image_lib->resize();
$this->image_lib->clear();
// Big
$conf['new_image'] = 'img/movie_images/posters_big/' . $file_name;
$conf['height'] = 300;
$this->image_lib->initialize($conf);
$this->image_lib->resize();
$this->image_lib->clear();
See any errors in the code? I tried outputting errors as someone advised in another question here, but that didn't show anything either. I don't understand how it works really. If i set "master_dim" to auto, the first (the small) image get's the right height, but the default width (which is really really wide). If i set master_dim to "width", the small image stays the same (really wide, but correct height). If i set master_dim to "height" they all get the correct height, but the small one still is super wide.
Any ideas?
As you can see in the code i tried playing around with the width of the small image to get it's correct size, but didn't get it to work.
After setting master_dim to height, and also setting the width of the small image manually, it works as i want it to.
You can download the image library from http://thephpcode.com/blog/codeigniter/gradient-image-library-for-codeigniter to convert the image to fit in to a correct width and size.
I need help finding where and how to change the size and crop of a featured image within a post. I've looked in functions.php and init.php, but with no success. I'm using a child theme of the inLine theme.
The current height is set for 130px.
I've tried changing the css, but that only stretches the image.
Do this in functions.php:
add_image_size( 'name-of-your-image-size', 600, 300, true );
Or if you'd rather use a plugin-
http://wordpress.org/extend/plugins/additional-image-sizes-zui/
And then in your post, retrieve it like so in your single.php or loop:
<?php the_post_thumbnail('name-of-your-image-size'); ?>
In your functions.php, paste one of these and adjust pixel width and height to your liking:
set_post_thumbnail_size( 100, 100 ); // 100 pixels wide by 100 pixels tall, box resize mode
OR:
set_post_thumbnail_size( 100, 100, true ); // 100 pixels wide by 100 pixels tall, hard crop mode
My Website
On the above link you can see that the middle news post has an image that is just too big.
The info for the news is taken out of a database so I'm not sure how to change the width of the image on only certain images. Ideally I'd like to have any image that is over 300px wide to be kept at 300px. This is what I have so far:
echo '<img src="media/'.$row['media1'].'" class="floatLeftClear" id="border">';
I tired adding width="300" to the above statement but that made ALL of the images become 300px which I don't want. I only want images bigger than 300px to be reduced to 300.
Can someone point me in the right direction please!
If you don't want to physically resize the images on the server, which would be the ideal solution, you can set the max-width property via CSS.
img {
max-width:300px;
}
Note that the property is not supported in IE6 and below.
The code helps to resizing the image. its resize the height and width depends upon the max width
function fixImgs(whichId, maxW) {
var pix=document.getElementById(whichId).getElementsByTagName('img');
for (i=0; i<pix.length; i++) {
w=pix[i].width;
h=pix[i].height;
if (w > maxW) {
f=1-((w - maxW) / w);
pix[i].width=w * f;
pix[i].height=h * f;
}
}
}
fixImgs('photos', 108); // ('element ID', maximum width)
But one thing the image size(KB) is not reduce. I hope its help to you .
Why not to add a special routine for news images layout, define max-size within it and call it for the related images?
I'm using Codeigniter's image manipulation library to re-size an uploaded image to three sizes, small, normal and large.
The re-sizing is working great. However, if I'm resizing a vertical image, the library is rotating the image so it's horizontal.
These are the config settings I have in place:
$this->resize_config['image_library'] = 'gd2';
$this->resize_config['source_image'] = $this->file_data['full_path'];
$this->resize_config['maintain_ratio'] = TRUE;
// These change based on the type (small, normal, large)
$this->resize_config['new_image'] = './uploads/large/'.$this->new_file_name.'.jpg';
$this->resize_config['width'] = 432;
$this->resize_config['height'] = 288;
I'm not setting the master_dim property because the default it set to auto, which is what I want.
My assumption is that the library would take a vertical image, see that the height is greater than the width and translate the height/width config appropriately so the image remains vertical.
What is happening (apparently) is that the library is rotating the image when it is vertical and sizing it per the configuration.
This is the code in place I have to do the actual re-sizing:
log_message('debug', 'attempting '.$size.' photo resize');
$this->CI->load->library('image_lib');
$this->CI->image_lib->initialize($this->resize_config);
if ($this->CI->image_lib->resize())
{
$return_value = TRUE;
log_message('debug', $size.' photo resize successful');
}
else
{
$this->errors[] = $this->CI->image_lib->display_errors();
log_message('debug', $size.' photo resize failed');
}
$this->CI->image_lib->clear();
return $return_value;
EDIT
I think the problem may be from the upload library. When I get the image_height and image_width back from the upload, the width seems to be larger even though I uploaded a vertical image.
This is a portion of the code I'm using to upload the photo:
$this->upload_config['allowed_types'] = 'jpg|jpeg';
$this->upload_config['max_size'] = '2000';
$this->upload_config['max_width'] = '0';
$this->upload_config['max_height'] = '0';
$this->upload_config['upload_path'] = './uploads/working/';
$this->CI->load->library('upload', $this->upload_config);
if ($this->CI->upload->do_upload($this->posted_file))
{
$this->file_data = $this->CI->upload->data();
$return_value = TRUE;
log_message('debug', 'upload successful');
}
I added some logging to check the values:
$this->is_vertical = $this->file_data['image_height'] > $this->file_data['image_width'];
log_message('debug', 'image height:'.$this->file_data['image_height']);
log_message('debug', 'image width:'.$this->file_data['image_width']);
if ($this->is_vertical)
{
$this->resize_config['master_dim'] = 'height';
}
else
{
$this->resize_config['master_dim'] = 'width';
}
log_message('debug', 'master_dim setting:'.$this->resize_config['master_dim']);
These are the results of the log:
DEBUG - 2010-03-16 18:35:06 --> image height:1536
DEBUG - 2010-03-16 18:35:06 --> image width:2048
DEBUG - 2010-03-16 18:35:06 --> master_dim setting:width
Looking at the image in photoshop, these are the dimensions:
height: 2048
width: 1536
Anyone know what might be causing the upload library to do this?
I've never used this library, but having read the documentation, I wonder whether the master_dim property might help. If you set this to 'height' for vertical images that might keep them the right way up. You could just parse each image through a conditional to see if the image is vertically aligned and then only set this property if need be.
My other thought is about the maintain_ratio property. The documentation says that with this set to 'TRUE' it will resize as close to the target values as possible whilst maintaining the aspect ratio. I wonder if it thinks that rotating the image allows it to preserve this ratio more accurately? As an experiment, try setting this value to 'FALSE' for vertical images.
Ok - I decided not to trust photoshop and opened the images I was testing in quicktime and safari. I discovered that they were actually still horizontal.
So Codeigniter was operating exactly as expected.
I went back into photoshop, did a save for web on the test images, re-uploaded them and it worked as expected.
I then stripped out the extra code that I had added to test whether the image was vertical and the library works as I expected it would.
Now - I need to figure out how to prevent end users from doing this exact thing.
Thanks for taking the time to answer my question musoNic80. Hopefully someone else can learn from my mistakes here.