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 any image in WordPress and Mai Theme, it's best to upload a large image. We typically upload 2000-2400px. 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 Lifestyle 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 4x3 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 it 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: 3x1
  • Width: 1600px
  • Height: 533px 
  • Type: Cropped

Section

This image size was added in Mai Theme Engine 1.4.0

  • Name: section
  • Aspect Ratio: 16x9
  • Width: 1600px
  • Height: 900px
  • Type: Cropped 

 Featured

  • Name: featured 
  • Aspect Ratio: 4x3
  • Width: 800px
  • Height: 600px
  • Type: Cropped

One Half

  • Name: one-half  
  • Aspect Ratio: 4x3
  • Width: 550px
  • Height: 413px
  • Type: Cropped

One Third

  • Name: one-third  
  • Aspect Ratio: 4x3
  • Width: 350px
  • Height: 263px
  • Type: Cropped

One Fourth

  • Name: one-fourth 
  • Aspect Ratio: 4x3
  • Width: 260px
  • Height: 195px
  • Type: Cropped

Tiny

  • Name: tiny 
  • Aspect Ratio: 1x1 (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
Did this answer your question?