Changing the default image sizes in Customizr


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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.

 

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

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 :


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



78 thoughts on “Changing the default image sizes in Customizr

  • Meenakshi Jangra

    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….

  • Meenakshi Jangra

    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…

  • Ms_Mignon

    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?

  • Menaka S

    Hi Sara,
    The recommended size is 1170×500px. I assume that by ‘selected image’ you mean featured image in posts.

    • Sara Östebro

      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!

  • acirnep

    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)

  • Ged

    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:

    Thanks

  • Dragon013

    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

    • 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.

      • Giorgio25b

        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.

        Hope it still helps!

  • Giorgio25b

    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:

  • Isabelle Larrodé

    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 :

    • Giorgio25b

      @Isabelle,
      Hopefully this snippet helps to drive you in the right direction, it does not deal with the thumbnail size:

      • Isabelle Larrodé

        Thanks Giorgio !
        I succeded doing this 3 weeks ago.
        You can see the result here : tourisme Bidache

        here’s my code

  • Isabelle Larrodé

    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

  • Andrew Smith

    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:

    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.

    • Nicolas Post author

      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 !

      • Erin Griesser

        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.

      • Ante Medic

        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!

  • Tabi

    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

    • Rocco Aliberti

      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?

      • Tabi

        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.

  • Carolina

    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!

  • Alex

    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?

    • Nicolas Post author

      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

  • Carl

    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 🙂

    • Nicolas Post author

      Hi, the code looks fine. Don’t forget to regenerate your images afterwards. (with the regenerate thumbnails plugin)
      Hope this helps,
      Nicolas

      • David

        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

        • Nicolas Post author

          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

  • JOHNSON OLATUNDE

    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

  • loic leveque

    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

  • Dave Sanney

    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

    • Nicolas Post author

      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

      • David

        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

      • Dirk Dickens

        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.

        • Dirk Dickens

          The code got cut off. This is the full code:

          99999 , ‘height’ => 700, ‘crop’ => false );
          return $sizeinfo;
          }

          • Nicolas Post author

            Hi, if you write a code like the following in yout functions.php file, it should work fine :

  • Mia

    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

    • Rocco Aliberti

      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 😉

      • Mia

        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

  • Rocco Aliberti

    Try this instead:

    about thumb-wrapper, you have to properly set its width and height for different viewports (see media queries)

  • Rocco Aliberti

    Hi Mia, about css in the thumb-wrapper properties add/change also these:

    and in the round-div, something like:

    Hope this helps.

    • Mia

      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

      • 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??

  • 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.

    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.

    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

  • Carla Abarca

    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

  • Tabi

    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?

    • Tabi

      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).

  • david

    I tried this code as well. It also doesn’t do anything. I made the resolution 2500 x 500 just for exaggeration purposes.

  • 2Chol

    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

    • Nicolas Post author

      Here is the working code :

      • 2Chol

        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 …

  • 2Chol

    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 ??

    • Nicolas Post author

      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

      • simona

        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

    • Carl Schmoele

      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?

Comments are closed.