What is an 'aspect ratio'?
Aspect ratio is the ratio of an image's width to height.
A square image (where the height and width of the image file are the same) has an aspect ratio of 1:1. Landscape images are those which have a width greater than the height, e.g. 1.5:1.0 and portait images a width less than the height, e.g. 0.5:1.0.
Each theme on ShopWired has a preset for the aspect ratio that is used for:
- Category images (where they are displayed on the home page or where subcategories are displayed on a parent category page)
- Product images (where they are displayed on the home page or on category/search results pages)
- Product thumbnail images (where thumbnails are displayed on the product page)
- Blog post images (where they are displayed on the blog home page)
If the aspect ratio of your own images doesn't match the preset aspect ratio of the theme you are using, you have a few options:
Change your images - modify each image file so that the new aspect ratio matches the one on your theme
Change the aspect ratio on your theme - modify the code on your theme files to change the aspect ratio to match your images
Enable the setting described below - which can help your images to look neater
Changing your images
If you have a lot of products and/or categories then changing the aspect ratio of each of these images can be time consuming.
It may also not be advisable to change the aspect ratio of images if it matches the type of products you sell. For example a lot of fashion products have portait aspect ratios (trousers, jackets).
Where you have a lot of images, we don't recommend changing their aspect ratio.
Changing the theme's aspect ratio
On most themes it is easy to change the aspect ratio at which images are displayed. It can be changed individually for different types of images (e.g. category images can have one aspect ratio, product images can have another).
Changing the aspect ratio means changing the code in your theme's CSS file(s). It can be done easily and we are happy to do this for you. Please contact us.
Enabling the 'div container' setting
Each ShopWired theme has settings for category, product and blog images (where appropriate) which can adjust how images are displayed.
Consider the example below. Each image has a different aspect ratio, so the row of images looks untidy.
Consider the next example.
Here, the same images are used but they are all 'filling' the available space (which is square). This makes the images appear uniform, neat and tidy.
The disadvantage of this feature is that the whole image is not shown (for example in the first image the left and right edges are not visible).
If you activate the setting described below, you'll need to make sure that it doesn't 'cut off' too much of your images.
This setting is however particularly useful if your images have a range of different aspect ratios (as in this example).
Activating the setting(s)
Select 'themes' from the left menu and then 'installed themes' and click the 'theme settings' link for the theme you want to edit.
Scroll to the 'image containers' section (which is usually towards the bottom of the settings/page).
If you tick one of the tick boxes this will make it's images fill the available space (container) - as shown in the product image example above.
Category images - where category images are shown on the home page or on parent category pages
Product images - where product images are shown on the home page or category/search results
Product thumbnail images - where additional product images are shown on the product page
Blog thumbmail images - where blog images are shown on the blog home page (or blog category pages)
No setting exists for the main product image's display on the product page, the theme will always show the full product image.