The image I uploaded on wordpress had a dimension of 250x357 and gets uploaded good at this page. But the same image is being cropped to 250x240 on this page. I don't know what to do, and I tried alot of things but the image just gets cropped.
Also the image on the homepage (second link) must be 300x250, just want the image to be resized to fit it without streching. So with white borders.
You must find articles loot. And find call to featured image function. Maybe it's use wp_get_attachment_image(). Than you need change wp_get_attachment_image( $image ,'cb-360-240'); to wp_get_attachment_image( $image ,'full');.
Related
I have a WooCommerce shop and on the shop page when I rollover an image it swaps it for the first image in the gallery by default which is fine. The problem i have is my images are transparent png's and so as the second image appears you can still see the first image beneath it.
Is it possible to hide the first image with dsiplay:none; if so how do i find the correct css class, as i have spent days looking but can not find it.
Any suggestions would be appreciated.
In the end, I just added a background to the second image so that it hid the first
.secondary-image {
background:red!important;
}
I am using WordPress, Jetpack Photon, and Bootstrap 4. Here is my image tag that works but can’t be good practice....
<?php echo '<img class="card-img img-fluid" src=' . the_post_thumbnail(array(375,300)) . '>'; ?>
I am trying to request the featured image with the_post_thumbnail(). I can’t get Photon to supply a scaled image that fits the width of my Bootstrap card container. The provided image is either a bit too slim or it overflows my card width. How can I get a Photon image to fit perfectly/responsively (width-wise)?
the_post_thumbnail(‘medium').... results in too small of an image for the card container.
the_post_thumbnail('large').... results in too large of an image and over flows it's card container.
Using Bootstrap’s max-width: 100% doesn’t seem to fix this problem.
Instead of image tag, try:
<?php the_post_thumbnail( 'full', array( 'class'=>'card-img img-fluid' ) ); ?>
The above function actually generate <img class="card-img img-fluid" src="http://img-src">
Add the following code to your functions.php file to define new image size.
add_image_size( 'name-of-size', 375, 300, true );
to know more about add image size click here.
**in the above line of code the name-of-size can be any unique name to represent the particular image size. The concept is while you upload any image to WordPress media it will crop to all image size defined and stored in wp-uploads folder.
***Also note that you will need to regenerate thumbnails for those images which were previously uploaded, if you need them in the new size.
Add the following code to your file to display image
<?php the_post_thumbnail( 'name-of-size', array( 'class'=>'card-img img-fluid' ) ); ?>
Hope this is helpful, Thank you
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.