I'm listing a lot of products on one page, and untill recently I used dimensions 390px*238px. Now I have to change the dimesions to something else, I updated get_the_post_thumbnail method with new parameters, page reloads and shows everything like I wanted it to be.
But, on next refresh, everything goes back as it were. When I inspect the elements, image that is displayed indeed has class attachment-390x501, but it's width, height and src attributes show 390, 238 and path/to/website/uploads/2012/11/Profile_IS_20180-390x238.jpg.
Is there a way to change my thumbnail dimensions? Here's the code I use currently:
<?php
// previous dimensions were 390x238
echo get_the_post_thumbnail($product->ID, array(390,501));
?>
You can set the size of the thumbnails by adding a line to your functions.php file and then display the new image size.
Add this to functions.php, you can change the numbers if you need to as that is the dimensions. Also, you can repeat this line as many times as you'd like to set different size thumbnails, just change new_custom_size to a unique name for each new size.
add_image_size( 'new_custom_size', 390, 501, true );
Then display your featured image with this:
<?php the_post_thumbnail('new_custom_size'); ?>
You will need to regenerate your thumbnails once you set the size in the functions.php file and before you display it on the page/post. I highly recommend the Renegerate Thumbnails plugin for this: http://wordpress.org/extend/plugins/regenerate-thumbnails/
use add_image_size and rebuild thumbnails
Related
I'm trying to display custom cropped thumbnails in Wordpress.
Here is my code:
add_image_size('about-us-slider-image', 610, 820, true);
And in the front:
echo wp_get_attachment_image_url($imgID, 'about-us-slider-image');
But only original size is shown. Original image is larger than this dimensions and I also tried regenerating thumbnails.
The weird part is that on the server all cropped sizes are visible but not in var_dump() or anywhere else.
You have to regenerate the thumbnail after you added this code in function.php then after that it will appear like what you put the size. You have to regenerate by using this plugin.
https://wordpress.org/plugins/regenerate-thumbnails-advanced/
I am trying to limit the images sizes created by themes and plugins.
For instance, if you upload an image to a woocommerce product, I only want the sizes set by woocommerce to be created.
The same for my custom slider plugin; When I upload a slider, I only want the image sizes I set for the slider custom post type to be generated.
Then, to make it more complicated, I created a couple of plugins that don't use CPT, but instead an options page (like my testimonial plugin).
I thought this may work, but it doesn't.
if( get_post_type() == 'product' ) {
add_image_size( '1280-thumb', 1280 );//1280px wide, free high
}
Thank you
Okay, first of all, do regenerate thumbnails and set your image size with same add image size function then check if the image will be cropped or not as per your custom image size try with this one.
add_image_size( 'custom-size', 220, 180, true );
Using this plugin you can do regenerate your existing thumbnails https://wordpress.org/plugins/regenerate-thumbnails/.
I am learning to develop WordPress theme and I am unable to find out how to align images, resize or crop them, or display them in a gallery format.
Image Alignment
CSS handles the alignments of images. When a user uploads an image and selects how their image will be aligned, WordPress simply adds a class based on the user's selected alignment (e.g. alignleft, alignright, aligncenter, etc.)
A complete list of such WordPress generated classes can be found here in WordPress codex.
Resize and Crop
It is recommended to use the default image sizes and manipulate the images with CSS, so that the site doesn't generate additional images unnecessarily and thus increase the size of the WordPress folders.
However, if you do need to resize or crop images when they're uploaded, as a theme developer, you can use the add_image_size() function in your theme's functions.php file.
Here are the parameters that this function takes:
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
Here's an example use of the function:
add_image_size( 'custom-size-name', 440, 360 );
To do a hard vs soft crop, you can add a fourth (boolean true/false) parameter in the add_image_size() function.
For example, to do a hard crop:
add_image_size( 'custom-size-name', 440, 360, true );
Read more about this in codex
To use these sizes of post thumbnails, you can do this (inside a loop):
the_post_thumbnail( get_the_ID(), 'custom-size-name' );
or this (outside a loop)
the_post_thumbnail( '123', 'custom-size-name' );
// here 123 is the ID of the post, which has the thumbnail.
Gallery
To show the images in a gallery format, you either need to create a custom gallery view using css and js (or use one of the gallery css/js plugins), or use the default WordPress gallery shortcode.
An example usage of the shortcode in the WYSIWYG editor or the block editor (or even page builders)
[gallery ids="123,345,456,567"]
The ids used in the gallery shortcode refer to the ids of the images, not the posts they're related to (whether they are connected to any post or not).
To use the gallery shortcode in a .php file, use the do_shortcode() function:
<?php echo do_shortcode('[gallery ids="123,345,456,567"]'); ?>
I'm making a child theme to the Twentyfifteen theme in wordpress. The theme has a function in it's functions.php that I wan't to remove:
set_post_thumbnail_size( 825, 510, true );
I can remove it from the parents functions.php but I don't want that because I wan't the parent to be untouched. Does anyone know how to do this.
(I wan't to remove it, not change it)
In Wordpress, your theme either supports thumbnails, or it doesn't.
If you do not want to support thumbnails (now called featured images), then add the following to your functions.php:
remove_theme_support( 'post-thumbnails' );
Then the set_post_thumbnail_size() in Twentyfifteen will have no effect.
If you do want to support thumbnails, then you can choose your own thumbnail size. Just run set_post_thumbnail_size() again in your functions.php to set it to what you want it to be:
set_post_thumbnail_size( width, height, cropOrNot );
Note that the only reason to set post thumbnail size is to set a default.
WordPress as installed has 4 default image sizes ('thumbnail', 'medium', 'large' and 'full'). 'full' is the original image, while the others are set in Settings > Media.
All set_featured_image_size() does is add an additional size named 'post-thumbnail'.
When you retrieve a post thumbnail, for example with the_post_thumbnail(), it will by default return the 'post-thumbnail' size of the image. However, the various functions for retrieving post thumbnails allow you to specify any size you want. For example, if you want to use the original image size for your featured image, you can get it by:
<?php the_post_thumbnail( 'full' );
Hi I just started today on creating my first Wordpress Theme and I am trying to create a featured Image for each post.Aldo I have managed to acomplish that it seems that the sizes I am giving it are not taking effect.Here is my code:
if(function_exists('add_theme_support')){
add_theme_support('post-thumbnails' , array('post'));
set_post_thumbnail_size(200,120);
}
if(function_exists('has_post_thumbnail') && has_post_thumbnail()){
the_post_thumbnail();
}
It seems that my featured images are not always set to the same size.For example if the image is smaller then what size I set it will remain the same , for big images the width is the same but for some the height is different.
What am I doing wrong here?
Are you setting the thumbnail size in functions.php? It will not work properly if it's just in index.php or another theme file.
From the codex:
This feature must be called before the init hook is fired. That means
it needs to be placed directly into functions.php or within a function
attached to the 'after_setup_theme' hook. For custom post types, you
can also add post thumbnails using the register_post_type function as
well.
the_post_thumbnail() displays the thumbnail and should be placed where you want the thumbnail to display.