1 00:00:07,380 --> 00:00:11,490 In this lecture we'll be exploring image cropping and image sciences. 2 00:00:11,490 --> 00:00:18,000 WordPress makes it easy to crop images without having to download or use any external third party libraries. 3 00:00:18,000 --> 00:00:23,010 If we take a look at our posts on the home page you'll see our images fitting nice and tight. 4 00:00:23,010 --> 00:00:27,640 However just like Buddy press the images may be bigger than they should be. 5 00:00:27,720 --> 00:00:35,330 Inspect the element and check the sizes of the images inside this little preview box you'll see the 6 00:00:35,330 --> 00:00:38,860 size that's on the page and the natural size of the image. 7 00:00:38,930 --> 00:00:44,960 We want the natural size and size on the page to be as close as they can be to save on bandwidth to 8 00:00:44,960 --> 00:00:45,470 do this. 9 00:00:45,470 --> 00:00:50,860 We have to register the image size we desire in the resource section of this lecture. 10 00:00:50,870 --> 00:00:54,430 I provide a link to a function called Ad image signs. 11 00:00:54,440 --> 00:00:59,660 This function allows you to add a custom image size that WordPress will use whenever a new image is 12 00:00:59,660 --> 00:01:01,400 uploaded by default. 13 00:01:01,400 --> 00:01:07,160 WordPress has some built in image sizes such as the thumbnail size which is a size we've used before 14 00:01:07,910 --> 00:01:09,640 inside the setup function. 15 00:01:09,650 --> 00:01:11,390 We're going to call this function. 16 00:01:11,450 --> 00:01:15,400 I'm going to add this code right after the theme support functions. 17 00:01:15,410 --> 00:01:19,700 Let's call this function now and the first parameter is the name of this size. 18 00:01:19,730 --> 00:01:20,960 Any name will do. 19 00:01:20,960 --> 00:01:29,910 I'm going to set this to J you dash post dash image the second and third parameters are the width and 20 00:01:29,910 --> 00:01:31,570 height respectively. 21 00:01:31,620 --> 00:01:34,780 These are values you'll have to test out through trial and error. 22 00:01:34,950 --> 00:01:45,650 The sizes I like are 860 by 570 fine the last parameter is whether we want a soft crop or a hard crop. 23 00:01:45,700 --> 00:01:51,100 If you're unfamiliar with soft or hard cropping then check out the link I have in the resource section 24 00:01:51,100 --> 00:01:52,200 of this lecture. 25 00:01:52,210 --> 00:01:56,460 This is a very long article that goes over image cropping and WordPress. 26 00:01:56,500 --> 00:02:01,420 It's definitely worth reading but I'm going to give you a quick rundown on what you need to know. 27 00:02:01,510 --> 00:02:05,740 If you scroll down a bit you'll come across these two images from the author. 28 00:02:05,770 --> 00:02:10,420 These two images are full sized and not cropped at all by default. 29 00:02:10,420 --> 00:02:16,040 WordPress will set the fourth parameter to false meaning that images are soft cropped. 30 00:02:16,090 --> 00:02:22,690 If you scroll down further you'll come across the images resize as you can see the images are not exactly 31 00:02:22,690 --> 00:02:28,700 the desired size the author wanted them to be the size the author put down is two hundred by two hundred. 32 00:02:28,720 --> 00:02:32,670 So technically these images should be squares but they're not. 33 00:02:32,710 --> 00:02:35,800 This is what WordPress calls a soft cropping. 34 00:02:35,800 --> 00:02:39,100 WordPress will resize an image to the dimensions you specify. 35 00:02:39,460 --> 00:02:45,970 However if the ratio of the images cannot be kept intact it will then resize the image to as close as 36 00:02:45,970 --> 00:02:51,410 to the dimensions you input it without having to crop any piece of the image or distorting it. 37 00:02:51,430 --> 00:02:57,100 The next type of cropping is hard cropping harder cropping will resize an image to the exact dimensions 38 00:02:57,100 --> 00:02:58,120 you inputting. 39 00:02:58,180 --> 00:03:03,830 However if an image begins to look distorted it'll crop the image to prevent any distortion. 40 00:03:03,880 --> 00:03:09,270 So you're only getting a piece of that image if you scroll down you'll see how that's done. 41 00:03:09,310 --> 00:03:14,170 You just pass in true and WordPress will crop the image from the center. 42 00:03:14,260 --> 00:03:18,970 If you're not looking for a centering position you can't configure the fourth parameter as an array 43 00:03:19,000 --> 00:03:22,040 and specify where you'd like the cropping to begin. 44 00:03:22,090 --> 00:03:28,390 If you scroll down the examples you'll see the many ways images can be hard cropped so that's basically 45 00:03:28,390 --> 00:03:30,240 this article in a nutshell. 46 00:03:30,280 --> 00:03:34,810 After this lecture is over I highly encourage you to give it a good read. 47 00:03:34,950 --> 00:03:40,190 All right so I'm going to set my fourth parameter to false as I want solved cropping. 48 00:03:40,270 --> 00:03:46,440 I prefer my whole image viewable without any cropping the size may be off and what I desired but I'm 49 00:03:46,450 --> 00:03:47,500 fine with that. 50 00:03:47,500 --> 00:03:51,010 Usually the size difference is only by a few pixels. 51 00:03:51,130 --> 00:03:56,410 I'd rather have an image off by a few pixels than have an image off by a hundred or even a thousand 52 00:03:56,410 --> 00:03:57,720 pixels. 53 00:03:57,730 --> 00:04:02,180 Now that our image size is registered we can begin to use it in our own theme. 54 00:04:02,350 --> 00:04:11,640 Open the content dash excerpt template part file look for where we outputting the featured image previously 55 00:04:11,670 --> 00:04:13,340 we set this to full. 56 00:04:13,350 --> 00:04:19,500 I'm going to replace this with our custom image size and set this to J you dash post dash image 57 00:04:22,300 --> 00:04:24,370 refresh the home page and expect the element 58 00:04:28,160 --> 00:04:33,410 the size may or may not be exactly the sizes we specified but it's pretty close. 59 00:04:33,410 --> 00:04:38,780 I'm going to open the single Templar file and do the same since the width of the post is the same as 60 00:04:38,780 --> 00:04:39,880 the home page. 61 00:04:39,980 --> 00:04:43,250 Look for where we output at the thumbnail and use the custom size 62 00:04:51,230 --> 00:04:53,160 having your own image size is great. 63 00:04:53,270 --> 00:04:55,140 But this will not always work. 64 00:04:55,160 --> 00:05:01,100 Some users who install our theme may be installing it on an existing WordPress site if they have existing 65 00:05:01,100 --> 00:05:01,640 images. 66 00:05:01,640 --> 00:05:06,900 They may not all be resized only new images are resized and some old ones. 67 00:05:06,920 --> 00:05:12,610 In this case we have to force all images to be resized to prevent any problems. 68 00:05:12,620 --> 00:05:18,640 Luckily there's a plug in that does this go to the admin dashboard and navigate to plugins add new. 69 00:05:18,810 --> 00:05:24,230 Then I want you to look for the plugin regenerate thumbnails install and activate this plugin 70 00:05:29,060 --> 00:05:30,480 after installing this plugin. 71 00:05:30,560 --> 00:05:36,620 Go to Tools region thumbnails the plugin will go through all the images uploaded through Wordpress and 72 00:05:36,620 --> 00:05:41,280 resize them all for you using the default settings and your own custom sizes. 73 00:05:41,390 --> 00:05:47,160 If a plugin also registers a size it will also resize the images according to that size. 74 00:05:47,180 --> 00:05:49,460 All you have to do is click this button. 75 00:05:49,460 --> 00:05:52,720 This may take a while especially if you have a lot of images. 76 00:05:52,730 --> 00:05:53,690 Just be patient 77 00:06:04,330 --> 00:06:06,570 after all the images have been resized. 78 00:06:06,610 --> 00:06:11,190 We are assured that our image size has been applied to all images on the site. 79 00:06:11,200 --> 00:06:15,510 This is a plug and we are going to recommend to the user when they install our theme. 80 00:06:15,640 --> 00:06:20,100 We'll be going over a how to bundle all the plugins we installed so far with our theme. 81 00:06:20,110 --> 00:06:21,190 In a future lecture.