Wordpress creates a new image URL for each of the sizes of images it creates when an image is uploaded. It adds the image size in pixels to the end of the string before the image extension. The problem is that if say an image size for a medium image is 300x300, wordpress may crop it to say 300x180 to keep it in dimension.
This makes it difficult when programatically fetching a larger version of an image thumbnail as the file ending -300x300.jpg may not exist.
Is there a way of fetching the image by using the URL for the full image, with a PHP variable eg. ?size=medium on the end that will load the correct version. I'm sure I have done this with older versions of wordpress but cannot find any documentation to prove this.
From the documentation:
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
$size
Either a string keyword (thumbnail, medium, large or full) or a 2-item array representing width and height in pixels, e.g. array(32,32)
https://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
Add this to functions PHP so that the line above works for the first image if the post does not have a featured image.
function set_first_as_featured($attachment_ID){
$post_ID = get_post($attachment_ID)->post_parent;
if(!has_post_thumbnail($post_ID)){
set_post_thumbnail($post_ID, $attachment_ID);
}
}
add_action('add_attachment', 'set_first_as_featured');
add_action('edit_attachment', 'set_first_as_featured');
You can register a image size to use anywhere in your theme with add_image_size, see:
add_image_size( "your-custom-image-size", 300, 300, true );
then you can use in your theme as well:
the_post_thumbnail("your-custom-image-size", $attr);
Related
I would like to set the gif file in the featured image. I would like it to run when I hover over it with the mouse.
I know I should set this in functions.php file
Together with the code:
add_theme_support ('post-thumbnails');
Unfortunately, I have no idea how to do it. I create my blog and I have never done such things. Could someone help me how to do it?
Thank you for your help!
When you upload an animated GIF to WordPress, it does all of it’s resizing magic to make the various thumbnail sizes (defaults are thumbnail, medium and large, in addition to the original full). When it does this, the resized versions lose their animation.
If your theme displays featured images at any size other than full, you’ll thusly lose your GIF’s animation.
If you definitely know that you want to display the animated version, though, there’s a little trick you can use.
<?php $thumb_url = get_the_post_thumbnail_url();
$thumb_low = strtolower($thumb_url);
if (strpos($thumb_low, '.gif') === false) {
$thumb_size = 'large';
} else {
$thumb_size = 'full';
}
?>
What am I doing here is getting the URL of our featured image, then I make sure it’s all lower case letters (WordPress may do this anyway, but just to be safe), then I check to see if .gif is present in the thumbnail’s URL, and finally, if it is, I set the thumbnail size I use to ‘large’. Doing so will allow me to use the original image, which retains it’s animation.
Then, I just need to tell our call to the_post_thumbnail() to use the variable thumbnail size we set, like this:
the_post_thumbnail($thumb_size)
If you’ve ever tried to set an animated gif as a featured image in WordPress, you’ve probably discovered that you can’t.
The reason why is pretty simple. Your theme grabs a resized version of the featured image you upload. And in the case of an animated gif, that means it’s not grabbing the original gif image, and so you end up with a static image.
The way around this is pretty simple, however. You can just install a plugin that automatically sets the featured image from the first image in a post. Of course that means you will need to make the animated image the first image, but at least it’s a workaround.
There are a number of plugins that will let you automatically set your first image as the featured image. I tried two and the both worked: Autoset Featured Image and Automatic Featured Image Posts.
Something else I found was that I didn’t even need to download the gif. I could just insert it with the URL.
We have a shop page on this website.
I will explain my problem using the very first image in the top left as example, although it applies to all of them.
If you hover over the first image (Gentes Deluxified English) you see an incomplete picture like this:
src= ".../Gentes-board-DLX-20180123-200x267.jpg"
This image actually cuts of parts of the images to the left and right. The full image is like this:
src= " .../Gentes-board-DLX-20180123.jpg"
So we want to change the thumbnail image to the full image, or keep the original ratio of the image. This needs to work for all images and the ones added in the future.
Is this fixable with css?
I already spent a lot of time looking at the source code of woocommerce to find the file that creates the page that uses the thumbnail images. I can't find that file. Where should I look for the source code files? And what should I change in these source files?
I looked at the source code of Woo commerce and found the parameter for cropping thumbnails for you.
https://github.com/woocommerce/woocommerce/blob/master/includes/class-wc-regenerate-images.php
Add this
$crop = false;
after line 318:
private static function get_image( $fullsizepath, $thumbnail_width, $thumbnail_height, $crop ) {
So I know WordPress uploads different image sizes every time you upload an image.
So for example I upload an image called background_main.jpg and in my uploads folder 'll have :
background_main-1024x512.jpg
background_main-150x150.jpg
background_main-300x150.jpg
background_main-768x384.jpg
So currently to pull out an image I handle this like:
$classImg = wp_get_attachment_url( get_post_thumbnail_id($key->ID) );
Then I can spit it out by just using $classImg.
How can I pull out the same image but a smaller size for instance the 150x150 image or the 300x300 image?
Thanks!
If you take a look at API, there is a function:
wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
'large' can be:
large
medium
full
thumbnail
array ( n, m ) where n and m are pixels
xyz where 'xyz' is custom defined size
I created a slider in WordPress using CSS background image URL dynamically inserted by php.
foreach ($slides as $key => $value){
array_push($output,'<div class="slider-slide" style="background-image:url(' . wp_get_attachment_image_src($value['image'], 'full')[0] . ');">');
array_push($output,'</div>');
}
I did this because it works better responsively, I.e. it scales down nicely by just setting the background size to cover and giving a max height.
background-size:cover;
My problem is that because I have used the full size image url, although it still scales nicely it will always load in the full image rather than the srcset image that would have been loaded if I was using the standard WordPress attachment function (link for info on srcset update).
Any suggestions would be appreciated.
I have two types of posts in the theme I am creating Trending and Normal. Post thumbnail image size is: 300x169 and I show it as that size when a trending post is displayed. But when this post is not trending I want the thumbnail size to be: 145x80. I tried the_post_thumbnail( array(145,80) ); but it doesn't work. Instead this crops the image in squarish dimensions. I don't want it to crop but decrease in size via HTML.
Can anyone please help me with this.
Thanks! Appreciate all the help.
You could try adding a new image size and then when you call the_post_thumbnail you pass it the name of the new image size you have set. Set the hardcrop flag to false if you don't wan't the image resizing via hard crop.
http://codex.wordpress.org/Function_Reference/add_image_size
You can change the size from CSS by doing this:
<div style="width:145px;height:80px;"><?php the_post_thumbnail();?></div>