Our templates generally have a banner or style graphic field that we offer. Each template is a bit different, and have different banner sizes. Each template has a defined size for that field, depending on the template; so a major challenge people run into is getting a picture that will fit correctly. Poorly sized pictures will either stretch, or just flat out not fit well on your site. So, learning how to resize pictures for your site is a very important skill to gain. Fortunately, we provide you all the tools you need to do this.
Crop vs Resize
When trying to fit a picture into a banner, you'll want to compare the size of your picture of choice with the size of the field you have to work with. All of our default banners will say what size picture you need to replace it:
As a good rule of thumb, you'll want to start with an image LARGER than the banner field we offer, as a smaller picture would stretch/skew to fit that space.
There are a couple of things to consider when trying to get a picture to fit in place there.
- Does my picture have the same proportions as the banner field?
- Do I want my entire picture in there, or just part of it?
You'll generally want to crop your image if you only want part of your picture to fit in the Banner, and you'll want to resize your image if the image you have is the same proportion as the banner field AND you want the entire picture to fit in.
Often times, you'll want crop and resize an image to fit in that space.
In this example, let's try fitting this 3200 X 2400 pixel picture in a 680 x 340 pixels field.
First off, you'll want to open up your Media Library: Images, to see the images you've uploaded. Click on your image of choice, and select "Edit" to modify the image.
With such a large image, your best bet is to first resize it down to something more manageable; try matching the largest dimension of the picture (3200 pixels) to match the largest dimension of your banner field (680 pixels in this example).
Be sure to:
- First click on Resize
- Make sure constrain proportions is checked off to prevent stretching
- Clear out the larger dimension field, and type in the smaller one
- Then hit APPLY
The result should look something like this:
Now, let's make sure we can fit the majority of this picture in the banner. Recall, that the banner is 680 X 340 pixels in size. We've established a good width of 680 pixels; now let's crop out a picture with a height of 340 pixels. While the edit window is open, now click on "Crop"
When you click on crop, you can click and drag a box over your image to represent what gets cropped out. You can click and drag the little white boxes on the corners of your selection to get the piece of photo you're interested in. The dimensions of your selection will appear at the top like in this example. Play-around and experiment--get the portion you're most interested in! When you're all done, hit apply, and then "Save". This will allow you to save a new image under the name of your choice; so this doesn't replace your original image. This tool simply allows you to get a selected version/cropping of your photo to use as your banner.
Now, you have a proper image to use as a banner! Now you can simply select that image to be your banner by clicking on "Banner Image" within the Dashboard, and select your new photo!