In Customizr, there are three image sizes by default defined in class-fire-init.php. Each of them has a specific filter allowing developers to change its properties.
If you need to modify the image sizes and are not developer, you’ll want to give a try to this plugin.
We can also recommend FixThePhoto if you need an image manipulation service.
//Default images sizes
$this -> tc_thumb_size = array('width' => 270 , 'height' => 250, 'crop' => true );
$this -> slider_full_size = array('width' => 99999 , 'height' => 500, 'crop' => true );
$this -> slider_size = array('width' => 1170 , 'height' => 500, 'crop' => true );
//post thumbnails for featured pages and post lists (archive, search, ...)
$tc_thumb_size = apply_filters( 'tc_thumb_size' , $this -> tc_thumb_size );
add_image_size( 'tc-thumb' , $tc_thumb_size['width'] , $tc_thumb_size['height'], $tc_thumb_size['crop'] );
//slider full width
$slider_full_size = apply_filters( 'tc_slider_full_size' , $this -> slider_full_size );
add_image_size( 'slider-full' , $slider_full_size['width'] , $slider_full_size['height'], $slider_full_size['crop'] );
//slider boxed
$slider_size = apply_filters( 'tc_slider_size' , $this -> slider_size );
add_image_size( 'slider' , $slider_size['width'] , $slider_size['height'], $slider_size['crop'] );
Important : Customizr-Pro and Featured Pages Unlimited users must use the filter ‘fpc_size’ to change the featured pages image sizes.
For example, if you need to change the thumbnail size, use the following code with your own new dimensions/cropping options
add_filter( 'tc_thumb_size', 'my_thumb_size');
function my_thumb_size() {
$sizeinfo = array( 'width' => 270 , 'height' => 200, 'crop' => false );
return $sizeinfo;
}
Important : once you have added a new image size in Customizr, you need to refresh your images folder for the new size to be applied. For this, I recommend to use the very good Regenerate Thumbnails plugin (free).
Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.
Everything you need to know about child theme with Customizr here.
More about image sizes in WordPress :
78 thoughts on “Changing the default image sizes in Customizr”
hii Nicolas…. thanx for great theme .. it is suiting best for me.
but only problem in on small screen . the three featured images are cropping from right giving a line on left .. check on my website: prayingkerala.com on mobile screen .
any help please suggest me….
Hi Meenakshi,
Thanks. Please post your support requests at the suppport forum. Our developer team handles all requests at the forum.
🙂
Hi Meenakshi,
I have the same problem. Did you get a solution for this issue from the development team?
Kara
thanks for great theme…
all is working great on my laptop but when i open my website on mobile, the three featured images are looking very ugly . those three get cropped from right side giving a vertical line on left . i tried every possibility when couldn’t success. i thing it is bcoz of thumbnail sizes.
http://www.prayingkerala.com is my site link …
any suggestions…
I’m interested in changing the default thumbnail image sizes that appear on the front page of the FREE customizr theme (front 3 images) Can someone please post updated code snippets for this? The thread below is very confusing, and it seems as though the API hooks have been updated depending on which version of the theme you are using.
should the required change be: add_filter( ‘tc_thumb_size’, ‘my_thumb_size’);
or should it be: add_filter( ‘fpc_size’, ‘my_thumb_size’);
Also, what’s the required CSS styling that has to go along with the .php code updates?
Hi,
The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Hi Sara,
The recommended size is 1170×500px. I assume that by ‘selected image’ you mean featured image in posts.
Hi Menaka!
Yes, i mean the featured image in a post. But isn’t 1170×500 the size for the slider? The image in posts is smaller than 500px tall? When I use a picture with the same size as the slider, it only shows a portion of that image, usually the middle part.
As you can see here when I use the same image in the slider as in the post, the image size is 1170x500px:
Slider – the picture with the man, the train-scene and the devil: http://scenkonstguiden.se/
And the same image in-post: http://scenkonstguiden.se/31-salj-din-sjal/
Thank you!
Hi everyone! I’m trying to find info about the sizes of the image in a post? The image you choose as ‘selected image’ and is seen on the the top of the post page? And I mean then not the image itself, but what sizes it crops the image to.
For example, check this post: http://scenkonstguiden.se/sthlm-vecka-6-taktiska-mirakel/
Thank you!
Hi sunny,
If you have deleted, then the only way to do it is to recreate it.
oops! my badluck By the way thnk u menaka
unfortunetely i deleted my featured image section i want to get them back in my website;so how can i do it.
I’m using version: 3.4.16 and I found that there’s actually five sizes been created, 1170×350 “tc-grid-full” and 570×350 “tc-grid” in addition to those mentioned.
The article is still relevant but maybe it should be updated because it causes confusion?
(also, not sure what those two additional images are for)
Hi, my Images are not showing up in the post summary. Please let me know the solution.
Hi
My thumbnails keep cropping. I’ve tried everything described above and have used the following code to try and force the Customizr default size of 270 x 250, using both crop true and false, but nothing changes. I have also been using regenerate thumbnails.
This the css I have applied:
add_filter( \'fpc_size\', \'my_thumb_size\'); function my_thumb_size() { $sizeinfo = array( \'width\' => 270 , \'height\' => 250, \'crop\' => false ); return $sizeinfo; }Thanks
Hello,
I tried all the hints in the comments, also the last one, since I do have the latest version of the theme, but nothing helped. I regenerated the thumbnails (seems to work, cause I do have images files like picture-170×150.gif in my folder) but though the featured post image is not shown in 170×150 but is cut off. You can see it at http://www.buehnenzeitung.de . It is scaled up to 275×243, no idea why. I tried several changes in CSS, but also with no luck.
What am I missing ?
Thanks for any help!
Dragon013
Since I did not get any answers and I – sadly – was not able to find my error or at least the cause for this problem, I switched to another theme. It’s a perfect workaround.
Hi Dragon013,
I guess that the notification of your message from May 11 did not go through, at least I did not receive it. In case it happens again I would post it on the WordPress Customizr support.
Here is the solution that worked for me; it is like the one posted above, but I did not mention that it requires some style.css tweak to make it work with your chosen size.
/********************************************************/ // Changing the default image sizes in Customizr /********************************************************/ add_filter( 'fpc_size', 'my_thumb_size'); //the hook name has changed into 'fpc_size' function my_thumb_size() { $sizeinfo = array( 'width' => 400, 'height' => 180, 'crop' => true ); //render the featured images in a landscape format; works well with 3 FP return $sizeinfo; } // it requires a stylr tweak to overcome min-height: 250px; /* .fpc-widget-front .thumb-wrapper img { min-height: 1px; } */Hope it still helps!
For whom it may interested in the original snippet for changing the featured pages thumbnail size on the home page, a new hook handler has been added in the recent versions of Customizr:
/********************************************************/ // Changing the default image sizes in Customizr /********************************************************/ add_filter( 'fpc_size', 'my_thumb_size'); //the hook name has changed into 'fpc_size' function my_thumb_size() { $sizeinfo = array( 'width' => 350, 'height' => 230, 'crop' => true ); //render the featured images in a landscape format; works well with 3 FP return $sizeinfo; }My html code didn’t pass at the end of my code.
The echo before and after the_post_thumbnail(‘tc_slider_size’, $sizeinfo);
are
before :
after :
@Isabelle,
Hopefully this snippet helps to drive you in the right direction, it does not deal with the thumbnail size:
/********************************************************/ //Show Featured Image in the Post page /********************************************************/ add_filter( 'tc_content_headings_separator', 'my_thumbnail_post_image' ); //output the thumbnail after the title and the entry-meta //add_filter( '__after_content', 'my_thumbnail_post_image' ); //output the thumbnail after the content and before the comments //add_filter( '__before_content', 'my_thumbnail_post_image' ); //output the thumbnail before the title and after the breadcrumb function my_thumbnail_post_image() { if ( is_single() && has_post_thumbnail() ) { //check if we are in the single post page && if the post has a featured image assigned to it. //echo ''; echo ''; //let's wrap the thumbnail in a div that can be styled echo the_post_thumbnail(); echo ''; //echo ''; } } //https://wordpress.org/support/topic/featured-images-to-show-in-post //https://wordpress.org/support/topic/display-post-featured-image-below-titleThanks Giorgio !
I succeded doing this 3 weeks ago.
You can see the result here : tourisme Bidache
here’s my code
// AJOUTER image a la une en pleine largeur en dessous du header sur les pages uniquement // /* rajouter une taille d'image pour afficher en haut des pages */ if ( function_exists( 'add_image_size' ) ) { $crop_args = array( 'left', 'top' ); add_image_size( 'top_page_image', 2000, 300, array( 'center', 'center' ) ); // on vérifie que la fonction existe, puis on crée la nouvelle taille d'image. Le dernier paramètre à true (ou array) indique qu'il faut rogner l'image pour qu'elle s'adapte aux dimensions } add_action( '__after_header' ,'image_une_haut_pages' ); //sous le menu (pleine largeur) function image_une_haut_pages() { global $post; if ( ( isset($post) && 'page' != $post -> post_type) || !is_singular() ) return; $sizeinfo = array( 'width' => 1500 , 'height'=> 300, 'crop' => true ); echo ''; echo ''; the_post_thumbnail('top_page_image'); echo ''; echo ''; }Hello,
thanks for the great job you did with this theme !
I tried to adapt this snippet in order to display the post thumbnail on top of my pages afterthe header.
I’d like the image to be cropped (250px or less for the height) and displayed in full width.
I’ve seen there’s a option in the theme customiser to perform it, but I need it for my pages (not my posts).
I can display the thumbnail but the image is not cropped in height.
Here is my code
add_action( '__after_header' ,'image_une_haut_pages' ); function image_une_haut_pages() { global $post; if ( ( isset($post) && 'page' != $post -> post_type) || !is_singular() || empty( $post->post_content ) ) return; $sizeinfo = array( 'width' => 1500 , 'height'=> 250, 'crop' => false ); echo ''; echo ''; the_post_thumbnail('tc_slider_size', $sizeinfo); echo ''; echo ''; }I am following directions to the best of my ability but I simply cannot get the display images to resize.
I’ve created a child theme.
In that child theme, in the functions folder, I’ve placed the following snippet:
add_filter( 'tc_thumb_size', 'my_thumb_size'); function my_thumb_size() { $sizeinfo = array( 'width' => 270 , 'height' => 270, 'crop' => false ); return $sizeinfo; }I’ve regenerated thumbnails.
Under Customize > Single Post, I’ve set max height to 270px.
This is my sample page:
http://i1315.photobucket.com/albums/t600/outsmartmovie/Screen%20shot%202015-03-24%20at%209.48.19%20AM_zpstzabxolz.png
Please tell me what else I need to do to make square images. Thanks.
Hi Andrew,
In the grid layout, the post thumbnails dimensions are dynamically calculated on page load to adapt to the shape of each post item and “fill” them, not matter what custom size is used. Of course using a size close to the final thumbnail dimensions is better.
The shape of each grid post items is a rectangle with a ratio of width / height = 1.618 (except for viewport width < 767 px). If you need your thumbnail to have a square shape in the grid, it's not easy to achieve as of now because there's no filter to modify this ratio to a value of 1. In the next release (v3.3.14+) you'll be able to apply a filter to do it. Thanks for reporting this problem !
Hi Nicolas,
Has this ratio issue been fixed yet? I’ve been trying for a few hours to tweak my child theme to allow for taller thumbnails in my grid view and have utterly failed. I can’t find a snippet with a filter for this yet so I’m not sure if it’s fixed and I should keep messing with it or if I should wait for a fix and use another theme in the interim.
Hi Nicolas,
first of all thanks for the great theme.
I’m also trying to change height of the thumbnails in the grid layout.
Is there any way how to achieve it?
Thanks for the help!
I was using this very useful snippet until it recently stopped working when I updated the theme. My website now looks like a mess because the smaller thumbnails have been sized up automatically. Is there any way to redo this on the newest version of the theme?
Thanks
Hi Tabi,
I think that code still work. There’s another new feature which is “causing” that, you might want to disable it.
In Apperance -> Customize -> Global Settings -> Images Settings -> Dynamic thumbnails centering on any devices
Did this help?
Thank you. I’ve disabled it now but in the meantime I found a simpler solution of just changing the images I was using as featured images to something higher res with some transparent space around them to make it look less cramped.
Hi! excelent topic for an excelent theme!
I have an issue, when I change the thumbnail size, is misaligned at the top, how can I center the image in relation to the excerpt? thanks!
Hi Carolina, thanks for this nice comment!
Would you mind reporting this in the support forum ?
I will be easier for us to provide help and will certainly be useful for many users.
Cheers 🙂
Nicolas.
Ok, but there are no answer…this is the topic https://wordpress.org/support/topic/center-thumbnails-that-have-been-resized
Please pay atention to my report, thanks!
Hi, Nicolas! I would like to ask you how can I make the slider smaller, because it is too big for the site I want to create. Do I have to change only the thumbnail size writing the extra code you told or the slider full size or the slider size?
Hi Alex,
You can set a custom slider’s height for all sliders or only the home page one, right from Appearance > customize as described here.
I hope this will help,
Cheers
Hi there,
I’m trying to resize the slider but is not working… i added the following code at the end of functions.php:
add_filter( ‘tc_slider_size’, ‘my_slider_size’);
function my_slider_size() {
$sizeinfo = array( ‘width’ => 1170 , ‘height’ => 350, ‘crop’ => false );
return $sizeinfo;
}
Something wrong? thanks 🙂
Hi, the code looks fine. Don’t forget to regenerate your images afterwards. (with the regenerate thumbnails plugin)
Hope this helps,
Nicolas
Hi Nicholas,
Thanks for checking the code for me. The part I don’t understand about regenerating thumbnails is that my image sizes in the slider are set to 1200×400 but the images dimensions I have set up are different to this. For instance, for large photos I have them set to 900×600.
Does that matter? Am I supposed to have a dimension set as 1200×400 for large photos? This is the confusing part…
Thanks,
Dave
Hi,
whatever width is set for your slider images, the images will automatically adapt to occupy 100% of the screen width (in full width mode) or 1170px maximum width in boxed mode.
This behaviour is handled by the css property max-width:100% set for images.
Since the CSS height property is not set, it will be automatically computed by your browser to keep the aspect ratio and avoid any stretching effects.
Hope this helps
Hi,
I could not find how to change my slider type from full width to boxed mode for tha latest version.
Could you describe how to change the slider mode to boxed mode?
Hello Mustafa you can change the home slider from full width to boxed by unchecking:
http://doc.presscustomizr.com/customizr/content-options/#slider-options
Full width slider (checkbox)
For sliders in post and pages you’ll see an option named `Slider Layout : set the slider in full width` while setting up the slider.
Hope this helps
Hi,
How do I connect this function.php script to my site after activating the theme?
1023 , ‘height’ => 225, ‘crop’ => false );
return $sizeinfo;
}
?>
I think there should be an ‘include’ command somewhere or connection from a calling script! Just putting this in ‘child theme’ wouldn’t make the changes expected. Has anyone experience this and want to share your solution?
Many thanks,
JFO
Hello Nicolas,
The images thumbnails of the home page (post excerpt images) can be smaller that way indeed. But, how can I change the space value between the image and the text, to have a smaller image and a larger text width? I suppose I have to work on the sections, ‘row-fluid’ or ‘span’ ?
When I look at the css, it starts to be quite frightening considering that there are 12 different, depending on the size of the screen? (not even speaking about offset and so on…)
But I do not think that I understand how it truly works at all. I suppose a responsive template is quite hard to manage in term of design and size.
I do not even know if my question is understandable… Is it?
All my best wishes
Hi Nicolas,
I have been reading in the other post about resizing the slider height to 400px and applying the css styling changes. I have changed my images to 1200×400 for the boxed slider which looks fine but for the full_width slider it stretches the image out of proportion (IMHO)
Should I apply the code as discussed above for my full width slider to ensure it holds the 400px height or will that simply stretch the image and make it look strange?
add_filter( ‘tc_slider_full_size’, ‘my_slider_full_size’);
function my_slider_full_size() {
$sizeinfo = array( ‘width’ => 99999 , ‘height’ =>400 ‘crop’ => false );
return $sizeinfo;
}
Thanks,
Dave
Hi Dave, yes I would recommend to declare this new image size for your theme.
It will override the default one for the slider in full width.
Bests
Hi Nicolas,
I thought this was working fine until I noticed this error log entry:
PHP Parse error: syntax error, unexpected ‘‘crop’’ (T_STRING), expecting ‘)’ in /…/…l/wp-content/themes/customizr-child/functions.php on line 50
Line 50 in my functions.php file relates to:
$sizeinfo = array( ‘width’ => 99999 , ‘height’ =>400 ‘crop’ => false );
Also, I noticed on Mia’s reply on 24 April 2014 that her code after ‘crop’ => is set to true
Should I be putting true or false in the code?
Thanks.
Dave
Also, I noticed
Hi David, it seems that there’s a comma missing after ‘400’.
Hope this helps!
I’m also trying to change the height of the slider with the following code and I”m not seeing any changes when I upload the functions.php file to the child them folder. Any idea what’s missing.
99999 , 'height' => 700, 'crop' => false ); return $sizeinfo; }The code got cut off. This is the full code:
99999 , ‘height’ => 700, ‘crop’ => false );
return $sizeinfo;
}
Hi, if you write a code like the following in yout functions.php file, it should work fine :
add_filter( 'tc_slider_size', 'my_slider_size'); function my_slider_size() { $sizeinfo = array( 'width' => 9999 , 'height' =>700, 'crop' => false ); return $sizeinfo; }Hi Rocco,
That has brought the borders to meet the images but has not changed the images themselves so the images that have not cropped to the correct thumbnail size are still not quite right. Examples on page 1 of the blog at http://kinkymia.com/blog-posts/ are “KOTW : Maschalagnia” and “Hunger – I am yours” as you will see these do not fill the box but the uploaded images are larger than the required thumbnail.
Any ideas?
I will be out for a few hours now but will be back later this afternoon – thanks again for your help!
Mia
Yep, I can see..
Looks like the changing of the size is not working, or the regeneration failed for some reason (preferred hypothesis) don’ know why atm.
I have to go out too, probably I’ll be back tomorrow and I’ll dig into this.
Anyway the forum would be a better place to talk about this, see you there 😉
Have a nice day 😉
Hi Rocco and Nicholas
I’ve sussed it!!!!
I had Jetpack’s Photon enabled and it appears that this was conflicting as once deactivated all the relevant thumbs sized up correctly!!!
I wonder if this is what may be causing the multiple image sizing issues that are being raised on the forum?
I will post a message on the forum with a link back to this snippet’s discussions today in case it helps others!
Thanks again for your help!!
Fabulous theme!!
Mia
Glad to read that Mia, enjoy the theme!
Try this instead:
.round-div { border: none !important; width: 100% !important; height: 100% !important; top: auto !important; left: auto !important; }about thumb-wrapper, you have to properly set its width and height for different viewports (see media queries)
Hi Mia, about css in the thumb-wrapper properties add/change also these:
and in the round-div, something like:
Hope this helps.
Hi Rocco,
That helps some thank you. Can you tell me though why some of the thumbs are still a slightly odd size within the borders? Should not the regenerate and settings allow the uploaded image to be cropped to the exact size within the border? That is what I am after if it is possible.
Thank you again.
Mia
Ps – I understand that if the uploaded image is not up to the size of the thumb that it will not sit true which is fine, but if the original image is larger then should it not crop to the designated thumb size – or maybe I am missing something??
Ps – I love this theme!!!
Mia
I am trying to change the thumbnail on my posts page to 200px by 200px, I am using the following coding in functions.php of the child theme that I have downloaded from you.
add_filter( 'tc_thumb_size', 'my_thumb_size'); function my_thumb_size() { $sizeinfo = array( 'width' => 200 , 'height' => 200, 'crop' => true ); return $sizeinfo; }I am also using the following with the CSS Stylesheet to create a border around the images which I picked up from one of the posts in the forum.
.thumb-wrapper { display: block; height: 200px; left: 0px; margin: 0px; max-width: 100%; overflow: hidden; position: relative; text-align: center; width: 200px; border: 5px solid #e3e3e3; } .tc-thumbnail.span4 { width: 200px; }Although I get the border the image thumbnail sizes do not change. Can you please tell me what I am doing wrong? The page that I am trying to get this to work on is my blog posts page – http://kinkymia.com/blog-posts/ – I have left the page as is so that you can see it.
I look forward to hearing from you.
Mia
Thank you very much! 🙂
Hi Mia,
The code looks fine.
Once you have added a new image size in Customizr, you need to refresh your images folder for the new size to be applied. For this, I recommend to use the very good Regenerate Thumbnails plugin (free).
http://wordpress.org/plugins/regenerate-thumbnails/screenshots/
Hope it will help!
Hi Nicolas
I’ve done the regenerate of the thumbs but all is the same 🙁 Any ideas?
Mia
HI PLEASE HELP:
I have the customizr-child theme and when I copied and pasted the code posted on my functions.php editor page, I got this FATAL ERROR:
Fatal error: Using $this when not in object context in /home/content/31/10408331/html/Coloquioweb/wp-content/themes/customizr-child/functions.php on line 7
Now, I can’t change it and the page is broken, even the wordpress admin page doesn’t work, and one of my friend said we need to remove that file from the FTP or host server, but I don’t know what to delete.
What can I do to restore it? Thank you
Hi Carla,
For this snippet, the piece of code to paste is the second one, not the first one. This might be the reason of this error message.
Your friend is right : you should delete the functions.php file from your server, and everything will be fine.
More about fixing problems in Customizr : http://www.presscustomizr.com/customizr/diagnosing-problems-customizr/
Hope this helps, and best regards,
Nicolas.
This does seem to change the image size for me, but the space around the thumb/featured image is still there so it just looks like a big blank space with a way too small image at the top.
I think it has something to do with the thumb-wrapper? In either case I can’t find a snippet to fix it and this seemed to be the closest I could get. Any idea how to fix it?
Well, that was embarrassing – immediately after posting I found the solution to my own problem. I added the following code to my custom css and it seems to do the trick. Maybe it’ll help someone else as well (although it’s a bit of an improvised noob job).
.thumb-wrapper { width: 269px; max-width: 100%; height: auto; position: relative; left: -1px; top: 0px; display: block; overflow: hidden; text-align: center; margin: auto; }Hey thanks for the update Tabi and for sharing your solution!
How can i change the height of my header area
I tried this code as well. It also doesn’t do anything. I made the resolution 2500 x 500 just for exaggeration purposes.
Thanks Nicolas for your instant reply !!!
I’ve restarted from the beginning, and it doesn’t work,
I put this code in my “fonctions.php” :
add_filter( ‘slider_size’, ‘my_slider_size’);
function my_slider_size() {
$sizeinfo = array( ‘width’ => 1200 , ‘height’ => 675, ‘crop’ => false );
return $sizeinfo;
}
here it is a link, maybe it’s better if you can see :
sumomedia.fr
Here is the working code :
add_filter( ‘tc_slider_size’, ‘my_slider_size’); function my_slider_size() { $sizeinfo = array( ‘width’ => 1200 , ‘height’ => 675, ‘crop’ => false ); return $sizeinfo; }I’ve replaced my code with your, I’ve refreshed, but sorry it doesn’t work,
So if I change the “carousel item” height with the correct dimension it work, so I have a big space between the carousel and the following …
So thanks again for your patience …
Hi Nicolas, and one more time thanks a lot for all,
I’ve tried to change the dimensions of the slider in class-fire-init.php, and I don,t see any change, even if I repost my images and if I make a new slider. I think I’m not efficient … If you have an Idea ??
Hi 2Chol, the snippet has to be pasted in your functions.php file. I don’t recommend to edit directly the core class files of the theme
Cheers
Hi Nicolas.
I’m trying to change the thumbnail on my slider, but I can’t find Customizr’s default image sizes page (class-fire-init.php). Could you tell me where to find it.
Many thanks
Simona
Hi simona, you don’t have to change the core classes of the theme to handle custom image sizes.
Just use the hooks API as described in this snippet.
Cheers!
More about using hooks in WordPress.
Sorry for placing my question here, I have not yet found out, how to start a new discussion.
I can only load into media library images up to ca. 800KB (1600×1065). See error message:
Fatal error: Out of memory (allocated 38797312) (tried to allocate 1600 bytes) in /homepages/36/d242436376/htdocs/clickandbuilds/oct20/wp-includes/media.php on line 2053
How/where can I relax this constraint?