I am trying to set a custom post thumbnail size in Wordpress. I have followed the documentation, which is pretty simple. But somehow the image is always set to some default
size.
In functions.php
add_theme_support('post-thumbnails');
add_image_size('a',453,103);
When I print with the_post_thumbnail('a');
the post thumbnails will have the height 103 (correct) and width 100 (wrong). Why is the width ignored?
add_image_size has a fourth argument, $crop. If set to true (hard crop), it'll force your images to be the exact size you specified. See the Codex.
Just add ,'' after 103 to leave THE last argument as null
Related
We created a custom theme using ACF for Wordpress. Our issue is that we are resizing a single image 1440 x 320 to fit in 2 places. The first place which is working fine is Full post leadspace image which uses the full 1440 x 320 image. The issue we are having is for the Featured post view or Card layout the image needs to resize down to 380 w x 160 H. We are using Advanced Custom fields to add the image to the post. I will attach a photo of whats happening
I guess the problem isn't ACF, but your add_image_size() function.
If you already defined the image size in your functions.php, it should look like this:
add_image_size ( "card", 380, 160, true );
The last argument (true), tells WordPress to crop the image. If this is set to false, the resized image will be 380px wide and the height will be proportionally. If you crop the image, WordPress will first resize the image, and then cut the image to 380x160px
I met a problem when trying to change the media setting. The first pic wass about Media Setting and how big a large/medium/thumbnail image is. I tried to make large for 960px.
The second picture was what I saw when trying to resize image in editing page. But I couldn't see the 960px option.
I'd tried some sizes smaller than 640px in Media Setting. It worked. And if for some larger than 640px, like 641px and 960px, it showed only 640px. It seemed not to be able to reach 960px that large.
So, why can't I use 960px?
I used a blank theme to make styles from the ground. And so far, I've not changed any function for image setting at all.
Most themes (esp. themes from wordpress) have a specific width limit (measured in pixels) for images inserted in a post or a page. Obviously, that limit depends on the theme’s main column width (which varies greatly from theme to theme).
/wp-includes/media.php has:
// we're inserting a full size image into the editor. if it's a really big image we'll scale it down to fit reasonably
// within the editor itself, and within the theme's content width if it's known. the user can resize it in the editor
// if they wish.
if ( !empty($GLOBALS['content_width']) ) {
$max_width = $GLOBALS['content_width'];
}
else
<strong>$max_width = 500;</strong>
Try overriding with $GLOBALS['content_width'] = 960; in the theme's function.php
As #Debajyoti Das explains, there is a set content width for most themes.
Either find the width in your theme and amend (search the files for 640) or if you have a child theme then add the following code in your functions.php which will usually override the themes width settings.
For instance this works with the Understrap framework:
// set theme width
global $content_width;
$content_width = 1024;
http://cameleonjackets.com/product-category/fall-2014/
The models heads are being cut off. How can I align the photo to the top? I've tried adjusting the photo sizes and the columns, but I want to keep the layout and product images as is. Is there a way to do this with CSS? Thanks!
The issue isn't with CSS. It's with the fact that your CMS is cropping the images, and doing so from the center of your images.
First you need to disable cropping on your generated thumbnails. Settings in wordpress will be found at
Dashboard > settings > media
and (depending on your installation of woocommerce)
Dashboard > Woocommerce > Settings > Product > Product Image Sizes
You will also need to disable cropping anywhere in your themes code that could be causing problems. Look for functions that look the similar to
add_image_size( $name, $width, $height, $crop );
Where $crop would be a true false statement that we want to be false.
Then you will need to have your thumbnails regenerated.
You can use this plugin to do that.
Then you can use css to set the size of whatever wraps your images as well as set overflow:hidden and then set the image styles min-width and min-height to 100%. That way if you upload different sized images it still appears to be properly cropped.
I've edited a Bootstrap Wordpress theme to display featured images randomly when refreshed on the front page. But now on every other line the images are displaying huge gaps instead of images -
Here is my site.
What have I done wrong, and how do I get rid of these gaps? I used this code in index.php to display the images randomly -
<?php /* Start the Loop */ ?>
*<?php query_posts($query_string . '&orderby=rand') ?>*
<?php while ( have_posts() ) : the_post(); ?>
The source of the problem is that the images aren't all the same height. In the row right at the top of the screen grab you've pasted, the image on the right isn't as tall as the other two. So the browser thinks there's space for content underneath it. It adds an image there, and tries to float it left. It stops when it bumps up against something - the image in the second column in the row above. Then it stops. And the next image gets put underneath it. It's just the way float works in CSS.
So you have two options. Either crop all your images (or their containers, say the articles) to the same height, or use a jQuery library like masonry to lay out your images.
See this answer for a related problem and more discussion.
Don't float in the .pbox css. Use display: inline-block instead and you're good.
See screenshot and updated css at bottom-right: https://www.dropbox.com/s/3qvmhvz5dwlnekb/Screenshot%202014-04-16%2022.14.42.png
In short the gaps come from floating images left that aren't equal heights. You have two options to fix this with out editing your current HTML markup.
Option 1
Add a new image size, add that image size to the wp_query and regenerate your thumbnails.
3 Steps:
1) Create a new image size by adding the following to functions.php
add_image_size( 'home-thumbnail', 400, 400, true);
home-thumbnail = size variable, keep it simple and short
400, 400 = height, width
true = hard crop, WP will crop the image from the center.
http://codex.wordpress.org/Function_Reference/add_image_size
2) Add the new image size to the wp query.
e.g. <?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'home-thumbnail' );
}
?>
3) Regenerate your thumbnails with this plugin: http://wordpress.org/plugins/regenerate-thumbnails/
That's it!
Options 2
Pre-crop your images before upload so they're the same size. I'd recommend Opt 1 as these steps are apart of any development workflow and will ultimately increate your development flexibility / options.
I am having trouble calling the featured image of the blog post in my wordpress blog. I have searched websites for the tutorial but it all leads to the same results.
It doesn't follow my assigned size which is 200x180px then the rest is cropped. to have a better view of what i'm trying to do, you can refer to this website:
http://freakify.com/
I am trying to have all the featured images in same sizes (200x180). on a very related topic, the sizes of my featured images is different but not lower than 500px and not more than 650px. I am trying to display it in different places such as my index file and side bar.php file
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 180, true ); // 50 pixels wide by 50 pixels tall, crop mode
add_image_size( 'post-thumbnails', 200, 180 );
I hope you can help me guys.
First, you dont need the add_image_size if you're going to use only a one thumbnail image size, only with the first two lines es enough.
Second, with the 'true' statement you are 'telling' wordpress to hard crop the images, so it just cuts down the image to make them 200x180. On the other way, if you change the 'true' to 'false', then your images will be resized to the maximum width or height they can reach maintaining the aspect ratio.
This are the two methods for resizing the images without changing their appearence, because if you don't mantain the aspect ratio, you'll have stretched images.
My recommendation is to use the 200px as an absolute value, and change the height dynamically.
To achieve this you can do this:
set_post_thumbnail_size( 200, 9999, false );
This way you can have your original images, filling the 200px requirements but not changing their height, so you could preserve the aspect ratio.
Look at http://dfine.me to see this in action, you just need to modify the css to get the items in a proper way.