In this lecture we'll be exploring image cropping and image sciences.
WordPress makes it easy to crop images without having to download or use any external third party libraries.
If we take a look at our posts on the home page you'll see our images fitting nice and tight.
However just like Buddy press the images may be bigger than they should be.
Inspect the element and check the sizes of the images inside this little preview box you'll see the
size that's on the page and the natural size of the image.
We want the natural size and size on the page to be as close as they can be to save on bandwidth to
do this.
We have to register the image size we desire in the resource section of this lecture.
I provide a link to a function called Ad image signs.
This function allows you to add a custom image size that WordPress will use whenever a new image is
uploaded by default.
WordPress has some built in image sizes such as the thumbnail size which is a size we've used before
inside the setup function.
We're going to call this function.
I'm going to add this code right after the theme support functions.
Let's call this function now and the first parameter is the name of this size.
Any name will do.
I'm going to set this to J you dash post dash image the second and third parameters are the width and
height respectively.
These are values you'll have to test out through trial and error.
The sizes I like are 860 by 570 fine the last parameter is whether we want a soft crop or a hard crop.
If you're unfamiliar with soft or hard cropping then check out the link I have in the resource section
of this lecture.
This is a very long article that goes over image cropping and WordPress.
It's definitely worth reading but I'm going to give you a quick rundown on what you need to know.
If you scroll down a bit you'll come across these two images from the author.
These two images are full sized and not cropped at all by default.
WordPress will set the fourth parameter to false meaning that images are soft cropped.
If you scroll down further you'll come across the images resize as you can see the images are not exactly
the desired size the author wanted them to be the size the author put down is two hundred by two hundred.
So technically these images should be squares but they're not.
This is what WordPress calls a soft cropping.
WordPress will resize an image to the dimensions you specify.
However if the ratio of the images cannot be kept intact it will then resize the image to as close as
to the dimensions you input it without having to crop any piece of the image or distorting it.
The next type of cropping is hard cropping harder cropping will resize an image to the exact dimensions
you inputting.
However if an image begins to look distorted it'll crop the image to prevent any distortion.
So you're only getting a piece of that image if you scroll down you'll see how that's done.
You just pass in true and WordPress will crop the image from the center.
If you're not looking for a centering position you can't configure the fourth parameter as an array
and specify where you'd like the cropping to begin.
If you scroll down the examples you'll see the many ways images can be hard cropped so that's basically
this article in a nutshell.
After this lecture is over I highly encourage you to give it a good read.
All right so I'm going to set my fourth parameter to false as I want solved cropping.
I prefer my whole image viewable without any cropping the size may be off and what I desired but I'm
fine with that.
Usually the size difference is only by a few pixels.
I'd rather have an image off by a few pixels than have an image off by a hundred or even a thousand
pixels.
Now that our image size is registered we can begin to use it in our own theme.
Open the content dash excerpt template part file look for where we outputting the featured image previously
we set this to full.
I'm going to replace this with our custom image size and set this to J you dash post dash image
refresh the home page and expect the element
the size may or may not be exactly the sizes we specified but it's pretty close.
I'm going to open the single Templar file and do the same since the width of the post is the same as
the home page.
Look for where we output at the thumbnail and use the custom size
having your own image size is great.
But this will not always work.
Some users who install our theme may be installing it on an existing WordPress site if they have existing
images.
They may not all be resized only new images are resized and some old ones.
In this case we have to force all images to be resized to prevent any problems.
Luckily there's a plug in that does this go to the admin dashboard and navigate to plugins add new.
Then I want you to look for the plugin regenerate thumbnails install and activate this plugin
after installing this plugin.
Go to Tools region thumbnails the plugin will go through all the images uploaded through Wordpress and
resize them all for you using the default settings and your own custom sizes.
If a plugin also registers a size it will also resize the images according to that size.
All you have to do is click this button.
This may take a while especially if you have a lot of images.
Just be patient
after all the images have been resized.
We are assured that our image size has been applied to all images on the site.
This is a plug and we are going to recommend to the user when they install our theme.
We'll be going over a how to bundle all the plugins we installed so far with our theme.
In a future lecture.