Understanding image sizes and display in Mai Theme
Logo
Site logo images have a suggested dimension of 240px x 120px, but any image size is okay. Logos are not constrained to this dimension, and will be displayed at full size.
Retina Logo
If you’d like to make your logo “retina” ready (for most mobile devices and desktops with retina screens) you need to upload a double-sized logo.
Example: If your regular logo size is 200px by 50px, you need to upload a 400px by 100px image.
Then set the logo width setting in Customizer > Site Identity to half of the logo width:
Uploading Images
When uploading a featured image in WordPress and Mai Theme, it’s best to upload a large image. We typically upload 2000-2400px. Don’t worry, we’ll never actually use the full size image on the website (unless you explicitly tell Mai Theme to) so it won’t slow things down! WordPress will automatically create all the image sizes it needs based on the registered sizes in Mai Theme. If you plan to upload huge images (3000px or more), you may want to consider using a plugin like Imsanity to resize extra large images to a max size. Imsanity’s default is 2048px last we checked. Don’t worry, Mai Theme won’t actually display your image that size. It’s better to have the original image quite large so changing image sizes and layouts won’t require re-uploading a new image. Instead, just regenerate your images (see below).
Predefined Image Sizes
Mai Theme defines a handful of custom image sizes.
When an image size where “Type: Cropped” is displayed, it will show a cropped portion of the full image, at the set width/height of that registered image size (see below). Cropped image sizes insure that images are displayed at a consistent size and shape throughout your website.
Cropped image sizes are not an issue for most of the image in Mai Theme since they are a standard 4×3 aspect ratio, which is really close to what most cameras take images at. This is a concern, however, when choosing banner images.
Below is an example of what each cropped aspect ratio would look like. This works great for an image with the focal point directly in the center.
The next example doesn’t work very well. Notice how the coffee cup gets cut out in the crop. For this reason, we recommend using landscape oriented photos over portrait mode.
Thankfully, you can use plugins like YoImages and My Eyes Are Up Here to specify where/how each image size should be cropped.
Regenerating Image Sizes
When first converting to Mai Theme you will want to regenerate your images. This means taking all of your existing (already uploaded) images and re-creating crops based on the new image sizes set in Mai Theme. Regenerate Thumbnails is a really easy way to do this. It has a few nice options as well. See the plugin’s description for more details.
Mai Theme custom image sizes:
Note: The “Name:” of each image size is was you need when using the image_size
parameter in Mai Theme shortcodes like [grid]
.
Example: [grid content="post" image_size="thumbnail"]
Banner & Section Background Images
With to the flexibility of the banner or section size (height) with the “Height” setting and the unknown amount of content in the banner, it’s best to choose a banner image with the image focus near the center, especially if you have faces or other things that you don’t want to get “cropped” out, especially on tablets/mobile devices.
By default, a Banner or Section uses the banner
image size. If the Banner or Section “Height” setting is “lg” or “xl” then the section
image size is used.
Banner
- Name:
banner
- Aspect Ratio: 3×1
- Width: 1600px
- Height: 533px
- Type: Cropped
Section
This image size was added in Mai Theme Engine 1.4.0
- Name:
section
- Aspect Ratio: 16×9
- Width: 1600px
- Height: 900px
- Type: Cropped
Featured
- Name:
featured
- Aspect Ratio: 4×3
- Width: 800px
- Height: 600px
- Type: Cropped
One Half
- Name:
one-half
- Aspect Ratio: 4×3
- Width: 550px
- Height: 413px
- Type: Cropped
One Third
- Name:
one-third
- Aspect Ratio: 4×3
- Width: 350px
- Height: 263px
- Type: Cropped
One Fourth
- Name:
one-fourth
- Aspect Ratio: 4×3
- Width: 260px
- Height: 195px
- Type: Cropped
Tiny
- Name:
tiny
- Aspect Ratio:1×1 (square)
- Width: 80px
- Height: 80px
- Type: Cropped
Change Mai Theme’s registered image sizes
If you’d like to change the registered image sizes with a plugin Simple Image Sizes is super easy to use.
If you’d prefer code, the following filter will allow you to change 1 or all of the image sizes. This example filter shows the existing sizes.
You must modify the height and/or width if you’d like to use a different size.
It’s best to only include image sizes you are actually changing in this filter, you don’t need to keep them in there if they aren’t being modified.
Note: You must regenerate images after using this filter.
// Change the Mai Theme registered image sizes.
add_filter( 'mai_image_sizes', function( $image_sizes ) {
$image_sizes['banner'] = array(
'width' => 1600,
'height' => 533,
'crop' => true,
);
$image_sizes['section'] = array(
'width' => 1600,
'height' => 900,
'crop' => true,
);
$image_sizes['featured'] = array(
'width' => 800,
'height' => 600,
'crop' => true,
);
$image_sizes['one-half'] = array(
'width' => 550,
'height' => 413,
'crop' => true,
);
$image_sizes['one-third'] = array(
'width' => 350,
'height' => 263,
'crop' => true,
);
$image_sizes['one-fourth'] = array(
'width' => 260,
'height' => 195,
'crop' => true,
);
$image_sizes['tiny'] = array(
'width' => 80,
'height' => 80,
'crop' => true,
);
return $image_sizes;
});
WordPress default image sizes:
In addition to these Mai Theme specific image sizes, WordPress included the following proportional, or soft-cropped, image sizes. These sizes retain the entire image area and fit it in a box of specified dimensions. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space or padding.
Thumbnail
- Name:
thumbnail
- Width: 150px (WP default)
- Height: 150px (WP default)
- Type: Cropped/Standard (optional)
Medium size (user specified)
- Name:
medium
- Width: 300px (WP default)
- Height: 300px (WP default)
- Type: Standard
Large size (user specified)
- Name:
large
- Width: 800px (WP default)
- Height: 0 (WP default) unlimited height
- Type: Standard