How to Create Custom Image Sizes in WordPress


by default WordPress allows us to display images using only three sizes which would be the thumbnail medium a large size and even though what press does allow us to set custom sizes for images what if we didn’t want to always have to set this change manually but simply use a custom size that we’ve defined already calmed up I’m gonna show you exactly how you can create your very own custom WordPress image sizes hello welcome to the web monkey and I hope you’re having a fantastic day now like I said in a preview I’m gonna be showing you how to create custom image sizes in today’s video and in order for you to accomplish this task you’re going to need three things and the very first thing you’re gonna need is a child theme we are gonna be working with a child theme it is essential that you do have a child theme up and running on your site if you don’t know what a child theme is please check the link in the description box below i do have a full extensive tutorial exponential themes and how you can get one for yourself and just to prove this to you if i go over to the back end of my site here and i go to appearance go to themes you can see right now that the active theme is the twenty minutes child theme and not the actual 20 minutes parent theme so it’s important that you’re walking with your child theme

second you’re going to need would be an FTP account and also a text editor of some sorts I’m gonna be walking with the notepad plus plus text edit all again if you don’t know what FTP account is or what a text editor is or how you can work with notepad plus plus check the links in the description box below I do have tutorials I will show you how you can create an FTP account and also how you can work with notepad plus plus and last but not least you’re gonna need a plugin known as the regenerate

thumbnails plugin it is by Alex Mills viper double-oh-seven bond obviously a James Bond fan right here so please go ahead download install and activate this plug-in I will share exactly what is plug-in does later on in the video but moving on right now I’m gonna assume that you have

all this in place so let’s jump right in but before we get started I wanted to talk about today’s sponsors Skillshare Scotia is an online education platform where you can get unlimited access to more than 27,000 classes from technology to design from photography to web development and yes you can actually get all my wordpress courses on Skillshare and the best news here is you can gain two months free access that’s right for two whole months you can gain free unlimited access to 27,000 classes on Skillshare all you have to do is to involve using the link in the

descriptions below but please note that this offer is only available to the first 100 students so if you’re

interested in learning for free sign up today the first thing we need to do would be to create the actual image sizes themselves so we’re going to create two of them and to do this we’re gonna make use of the function which is the add-on the score image underscore size function and these are the

parameters that this particular function accepts don’t worry if this looks complicated if you don’t know how to program in PHP I will show you exactly how to do this I’m gonna go straight to my notepad plus plus file a two I’m gonna connect to my FTP account and then those are gonna go ahead now and go straight to blogger video both which is the directory for my website so from here right now I’m gonna look for the wp-content folder which contains other themes so if I may I’m gonna open up the themes folder and then I’m gonna open up the child theme folder and then finally I’m gonna open up the functions dot PHP file for my child theme so let’s open that okay great so from here right now I’m gonna go to a new line and I’ll add a comment and just say custom image sizes let’s close the comment and let’s go ahead now and add the very first image size I’m gonna say add on the score image or the score size and then in brackets I’m going

to add my coats and I’m gonna give the name for this custom image size I’m gonna say blog – post okay so this is gonna be the name of our very first custom image size and then after this I’m gonna add a comma and now I’m going to add the dimensions to width and the height of this particular image so this guy’s right now I’m gonna go with let’s say 650 by 300 okay I can then close this and say semicolon so I’ve added a very first image size which is 650 by 300 okay but take a look at this I’m gonna add another one Adams on the score image on the score size and then I’ll add another name let’s go with blog post – hard okay and then for the dimensions let’s go ahead and add make this 700 by 450 but guess what I’m gonna add another value and this value will be called true Wow

okay so what exactly have I done here you see by putting true here what I’m saying here is I want what press to always hard crop any image that has a custom image size of blog post hard so in the very first image size here we didn’t specify anything we just gave the dimensions and then the name of the custom image size the default value here after 300 will be false for all simply means that we want WordPress to soft crop the image instead but where one will press too hard crop the image we have to write true meaning yes we want WordPress to always hard crop our image if you don’t know the difference between soft copy and hard copy and soft copy simply means that WordPress will do its best to display all of the image using the dimensions that you set in here which will be 650 by 300 however the image itself may not always be 6

by 300 it will be around the range of 650 300 right however with a hard Club WordPress will always make sure that your image is displayed using the exact dimensions that you have set which in this case would be 700 by 450

what happens here is that even if WordPress has to cut part of the image to satisfy this requirement what press will do so so that’s the major

difference between hard copy and soft copy and short copying is great when you don’t really care about the dimensions of the image to say for example when you’re inserting an image into a blog post you may not really care about the exact size however if you’re setting the featured image for your positive

difference to mean you might care more about the exact size in that case you might want to use a hard crop instead so there’s a major difference between soft copy and hard cropping but we’re not done from here right now rather than just saying true I could remove true instead and then add another array so I’m gonna say array and then inside of this array another bracket and now in here instead of this bracket we can specify the direction we won’t work for us to crop are images from so this text in another two values the first value will be for your X dimension which would be left center all right and then the second value will be for your y axes which will be vertical which would be top center or bottom so you can go with something like this add another coat and say left okay and then a comma and then another coat and then say bottom okay what this means right now is a wordpress will always hard crop our images but from a left bottom position again the first value here would be your x-axis which can be left center or right the second here will be for your y-axis which can be top center or bottom if you don’t go with any of these values and just simply say are true like I did originally

workers will crop the image from the center center position in this kind of situation the next step now would be to get WordPress to display the custom image sizes and the back end now to do this I’m gonna add some more text I’m just go ahead and say display custom image sizes let’s close this now for the actual code itself I do have the code written out on my notepad file here I’m just go ahead and copy this I’m gonna go ahead now and paste that so don’t worry I’m gonna explain exactly what I have done in here basically we have this function which is the ad filter this is basically our styling WordPress to display the names of our custom image sizes on the back end so you can pause the video right now and simply write exactly what I have written in here however I would recommend you make some small changes first of all over here where you have the blogger underscore custom underscore image and those course sizes you can change blogger to the name of your own blog or the name of your website okay however make sure that whatever you change in here matches exactly what you have in here where you have the function so as an example if you’re gonna change blogger to a website as an example make sure in your second language you have function change blogger to website as well and then you have your custom on the score image underscore sighs it’s okay and then second in here after where you have the array this is where you have the names of your custom image sizes they can say I have blog post I have blog post hard so make sure the text you have it here matches the names of your custom image sizes and anyway you have standard and co-opted these are the names I have assigned to my respective image sizes so feel free to use your own our custom names here so hopefully you’ve done you’re done copying all this text I’m gonna go ahead now and simply save my changes

and it’s saving and it is saved

awesome so from here right now I’m gonna go to the back end of my site from hey let’s go to posts and let’s just go ahead and edit the very first one right here let’s edit it with a classic edit tool and then from here I’m gonna scroll all the way down here and let’s take a look at this image let’s go ahead and edit the image and now from here you can see that we do not have the custom image sizes listed you cannot see cropped you cannot see standard why is this

happening you see even though we’ve just added the new custom image sizes this image and all the images images were uploaded before we created the new image sizes so what press right now as it is has no way of creating a new version for image that will match the standard or the cropped custom image sizes that we’ve created the only way to do this right now would be to make use of the regenerate thumbnails plug-in which we already installed so what this plugins gonna do is that it’s going to create new versions of all our images so to do this let’s go to our back end again let’s come down here to tools I’m gonna click on regenerate thumbnails let’s go ahead and leave and then from here I’m gonna go ahead now and regenerate thumbnails for all 15 attachments let’s go ahead and do that

so there’s gonna take a few seconds but basically right now what Pete is

creating new versions for our images so let’s put a few more seconds it should be done any moment now and it is done awesome now let’s go back to our meet our posts rather let’s go to all posts go back to the very first one right here edit with a classic edit tool and now let’s go back to our image edit go to size and you can see that the custom image sizes are still not there why don’t panic

the reason why this is happening is because the full-size for this image is only 320 by 213 pixels however our custom image sizes are significantly larger we have 650 by 300 700 by 450 so this image right now is too small to satisfy the new image sizes that we’ve created so I’m gonna close this and I’m gonna go ahead now and add a new image instead so let’s go ahead and add the media I’m gonna choose a large image so in this case right now let’s go with the a quiet place image now over here where we have the size take a look at that we now have standard we now have cropped and these two are available because the full size of this image is 1280 by 720 so for me right now we can just simply choose whichever version we want let’s cope with the cropped version let’s go ahead and set into the post let’s go ahead now and update and now let’s go ahead and view our post let’s scroll down and there you go 750 by 400 so that’s exactly how to create your own custom image sizes and how to display them in the back end a very quick tip for you whenever you’re creating custom image sizes make sure whatever images you upload are large enough to satisfy the dimensions that you’ve set for your custom image sizes and then secondly do not go gung-ho with your custom image sizing what I mean here is moving forward whenever you add a new image to your media library WordPress in addition to creating the thumbnail medium and large versions of the image it will also create new versions of the image to satisfy the custom image sizes that you’ve created so if you came in here right now and you created at say 5 new custom image sizes whenever you upload a new image to WordPress you will

essentially get eight versions of that same

image by default three for the thumbnail medium and large and then the remaining five for the five custom image sizes that you’ve set keep in mind that every image takes up space on your web server so you really want to restrict the number of custom image sizes you create you don’t want to go beyond to let’s say three max okay do not just begin to create custom image sizes for the sake of it because this will essentially take up more space on your web server as a bonus if you wanted to use your newly created custom image size to affect let’s say the featured image size of your posts the first thing you need to do is to figure out what template controls the display of your single post pages in this case for me right now it is the content – single dot PHP file and over here you can see this is the block that controls the display of my featured image for my post and now in here is the actual function itself the underscore post underscore thumbnail this is the function that outputs the featured image of my post so to use my newly created custom image size I’ll just have to add the name inside of the brackets in here so in this case this could either be a blog post or blog – post – hard I’ll just add it inside of the code scene here save my template and that’s it I have applied my custom image size to control the size of the featured image of my post so that is it for creating custom image sizes if you had any questions about this feel free to put them in the comment section below if you like the video please like comment subscribe hear the bells so that you’re notified whenever I upload a new

tutorial my name is Alex it’s been a pleasure teaching you how to create custom image sizes with WordPress and I hope to see you next time and bye bye

Leave a Comment