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
Related
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 want to remove FlexSlider from my WordPress WooTheme (Astrum) since it looks terrible. It makes our images full-size, so our images look silly.
I would prefer to have a thumbnail gallery where you can click on an image and it becomes 400px x 400px or something more standard; can anyone help me with removing flexslider and replacing with a gallery?
http://dv8sports.inpresence.us/product/bag-1/ for example
Flex slider is responsive. That means if you wrap slider inside some container it will stretch.
I would try to wrap the slider inside some other container which defines the preferred width. Your theme supports column shortcodes - use that.
According to their documentation, you can do something like:
[column width="one-third" place="first" ][/column]
[column width="one-third" place="first" ] Slider shortcode here [/column]
[column width="one-third" place="last" ][/column]
Another point: You submitted link to a product page and that page expects to contain product description and other stuff / not just a single image. Once you build the product page properly (add content) your image size will shrink according to surrounding content.
Hopefully this helps.
I am having a bit of trouble with an unfamiliar wordpress theme. My featured images are all 870 x 550 and yet when i put them in they are resized to 870 x 490, with an ugly crop. I have found a couple of CSS entries with a value of 490px so I changed them to 550px (see code snippet).
div.featured-media-container {width:870px; height:550px;}
div.featured-media-container img {width:870px; height:550px;}
This has made the container the right size, and resized my image to fill it, but the crop still remains so the image is stretched. How do I stop them being cropped when I drop them in?
Thanks.
Oh, here's the page in question: http://www.decentdesign.co.uk/portfolio/east-wing-coffee/
You Just DO one thing from your wp admin panel
go to settings > Media
and change the size according to your nedd. For reference take a look of below attached image
that's it Very Simple
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.
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