The Porto theme provides a wide range of predefined image sizes for posts, portfolios, members, and widgets. These sizes ensure that your images display correctly and consistently across your website. You can also define custom sizes for specific content types, giving you full control over image quality and performance.
Some Porto widgets and elements include an Image Size option, allowing you to select from these predefined dimensions.
Default Porto Image Sizes
The following image sizes are registered by default in Porto using WordPress’s
add_image_size()
function.
add_image_size( 'blog-large', 1140, 445, true ); add_image_size( 'blog-medium', 463, 348, true ); add_image_size( 'blog-masonry', 640, 9999, false ); add_image_size( 'blog-masonry-small', 400, 9999, false ); add_image_size( 'blog-grid', 640, 480, true ); add_image_size( 'blog-grid-small', 400, 300, true ); add_image_size( 'related-post', ( isset( $porto_settings['post-related-image-size'] ) && (int) $porto_settings['post-related-image-size']['width'] ) ? (int) $porto_settings['post-related-image-size']['width'] : 450, ( isset( $porto_settings['post-related-image-size'] ) && (int) $porto_settings['post-related-image-size']['height'] ) ? (int) $porto_settings['post-related-image-size']['height'] : 231, true );
The fourth parameter in the
add_image_size()
function determines whether images are cropped.
- If set to
true, the image will be cropped to the exact size (centered). - If set to
false, the image will be resized proportionally without cropping.
Portfolio Image Sizes
Portfolio image sizes are enabled only when the Portfolio Content Type is active in Porto → Theme Options → Portfolio.
add_image_size( 'portfolio-grid-one', 1140, 595, true ); add_image_size( 'portfolio-grid-two', 560, 560, true ); add_image_size( 'portfolio-grid', 367, 367, true ); add_image_size( 'portfolio-masonry', 367, 9999, false ); add_image_size( 'portfolio-full', 1140, 595, true ); add_image_size( 'portfolio-large', 560, 367, true ); add_image_size( 'portfolio-medium', 367, 367, true ); add_image_size( 'portfolio-timeline', 560, 560, true ); add_image_size( 'related-portfolio', 367, 367, true ); add_image_size( 'portfolio-cat-stripes', 494, 1080, true ); add_image_size( 'portfolio-cat-parallax', 1970, 627, true ); add_image_size( 'portfolio-thumbnail', 200, 150, true );
These sizes are used across different portfolio layouts, such as grids, masonry, and timelines, ensuring high-quality and consistent visual presentation.
Member Image Sizes
Member image sizes are available only when the Member Content Type is enabled in Porto → Theme Options → Member.
add_image_size( 'member-two', 560, 560, true ); add_image_size( 'member', 367, 367, true );
These image sizes are primarily used in Team Member and About Us sections to maintain a uniform appearance across all member profiles.
Widget Thumbnails Sizes
The Porto theme also defines smaller image sizes for use in sidebar and footer widgets, such as Recent Posts or Recent Portfolios.
add_image_size( 'widget-thumb-medium', 85, 85, true ); add_image_size( 'widget-thumb', 50, 50, true );
These smaller image sizes help improve performance and maintain clean visual alignment in compact widget layouts.
Custom Post Image Sizes
This ensures that all existing media images are resized to match the new or updated dimensions.
You can create and manage a custom image size for your posts under Porto → Theme Options → Post
After modifying or adding image sizes, it’s essential to regenerate your thumbnails using the Regenerate Thumbnails plugin. This ensures that all existing images in your media library are resized according to the new dimensions.
WooCommerce Image Settings
For WooCommerce stores, product image dimensions can be configured in:
Appearance → Customize → WooCommerce → Product Images
- Main Image Width – Sets the width of the main product image on single product pages.
- Thumbnail Width – Defines the image size used in product catalogs and gallery thumbnails.
- Thumbnail Cropping – Allows you to choose between cropped, custom ratio, or uncropped images to achieve your desired aspect ratio.
These settings help maintain consistent product displays and enhance page load performance.
