Image Sizes in Bricks

Bricks → Settings → General has a setting under Miscellaneous called “Generate Custom Image Sizes”.

Enabling this will register these image sizes in your Bricks-powered WordPress site:

  • bricks_large_16x9: 1200×675 pixels (cropped to fit)
  • bricks_large: 1200×9999 pixels (proportionally resized to fit inside dimensions)
  • bricks_large_square: 1200×1200 pixels (cropped to fit)
  • bricks_medium: 600×9999 pixels (proportionally resized to fit inside dimensions)
  • bricks_medium_square: 600×600 pixels (cropped to fit)

I find myself constantly looking for the list of the above and other image sizes and hence this post.

Below is a table of registered image sizes that come with:

  • WordPress (by default)
  • WooCommerce (by default)
  • Bricks (optional and not enabled by default)
Image Size HandleDimensionsImage CroppingNotes
thumbnail150×150true (cropped)Default in WordPress
medium300×300false (resized)Default in WordPress
medium_large768×0false (resized)Default in WordPress
large1024×1024false (resized)Default in WordPress
1536×15361536×1536false (resized)Default in WordPress
2x medium_large size
2048×20482048×2048false (resized)Default in WordPress
2x large size
woocommerce_thumbnail300×300true (cropped)Added by WooCommerce
woocommerce_single600×0false (resized)Added by WooCommerce
woocommerce_gallery_thumbnail100×100true (cropped)Added by WooCommerce
shop_catalog300×300true (cropped)Added by WooCommerce
shop_single600×0false (resized)Added by WooCommerce
shop_thumbnail100×100true (cropped)Added by WooCommerce
bricks_large_16x91200×675true (cropped)Added by Bricks (if enabled)
bricks_large1200×9999false (resized)Added by Bricks (if enabled)
bricks_large_square1200×1200true (cropped)Added by Bricks (if enabled)
bricks_medium600×9999false (resized)Added by Bricks (if enabled)
bricks_medium_square600×600true (cropped)Added by Bricks (if enabled)

Cropping behavior

The default value for this is false i.e., the image will be scaled or proportionately resized.

If true, the image will be cropped to the specified dimensions using center positions.

An example of when false is better is for showing posts (their featured images) in a masonry layout. We want the posts to have different heights. You would select or create an image size in this case with the cropping mode set to false.

An example of when true is better is for showing posts in a uniform grid where every post (its featured image) should be the same size.

Screenshot from wpmudev article:




Instant access to 390+ Bricks code tutorials with BricksLabs Pro


Leave your comment