So you have uploaded some great photos for your front page carousel and your city's "highlights" page but it is not looking great. Perhaps the photo looks squashed vertically or horizontally or perhaps the photo is grainy.
The easiest way to avoid this issue is to upload photos which have the recommended size.
- For bio photos - 250 (w) x 300 (h)
- For carousel photos - 400 (w) x 300 (h)
- For the banner - 1600 (w) x 610 (h)
All your photos will look great but this means you need to resize / crop your photos in your own image manipulation software such as PhotoShop.
If you see grainy photos on your website it means the photos you have uploaded are too small. When a photo is enlarged, the photo becomes grainy. The solution is to upload large photos which WordPress will reduce to an appropriate size.
When your photos look squashed, it is likely that you uploaded a photo that has a different aspect ratio than that recommended. Luckily, WordPress will let you edit your uploaded photos and crop them into the correct aspect ratio. The aspect ratio is the ratio between to width and height of the photo. For example, the highlight page photos are 400 px by 300 px. This means the aspect ratio is 4:3 (landscape) whereas the bio photos are 250 px by 300 px. Ie, 5:6 (portrait).
So this is what you need to do...
Open "Media" in the left-hand WordPress menu.
Now find the image that is rendering incorrectly, click on it and on the next screen click on "Edit Image".
On the right you find some tools. Lets say we are editing a highlight page photo and require a 4:3 ratio as per the above.
We need to add this ratio to the tools as per the graphic below.
After you set the aspect ration, go to the photo on the left and whilst holding down the "Shift" key, drag a rectangular shape on the photo.
Make the rectangular shape as big as possible without exceeding the perimeters of the photo.
As long as you hold down the "Shift" key, the ratio will stay constant irrespective of the size.
You now can move the block around on the photo.
Whatever is highlighted will be shown on your page.
After you are happy with the composition, you click the "Crop" icon in the top left.
You now cropped the photo and the edges outside the block you created are deleted.
Now click the "Save" button.