Notice: Screenshots in this tutorial are shortcodes of King Composer page builder. You will find the same setting if you are using Elementor or WP Bakery Pagebuilder
Setting up Custom Size:
Step 1: Activate Child Theme
Step 2: Put the following functions to functions.php of Child Theme
add_action( 'after_setup_theme', 'wilcityChildThemeImageSizes');
function wilcityChildThemeImageSizes() {
// 300 pixels wide (and unlimited height)
add_image_size( 'wilcity_360x200', 360, 200, true ); // (cropped)
add_image_size( 'wilcity_500x500', 500, 500, true ); // (cropped)
}The code should after <?php syntax
You can put more size if you want by using add_image_size function. However, We recommend you should not add too many image sizes.
Step 3: Setup ReGenerate Thumbnail plugin
- Click on Plugins -> Add New
- Search for Regenerate Thumbnail
- Install and activate this plugin
- Click on Tools -> Regenerate Thumbnail -> Run it
1. Hero Image Size
I recommend using the large key. If you want to use full key (Using original size), I recommend uploading an image of 1200 x 800px
2. Configuring Listing Slider / Listing Grid Image Size
You can configure image size of these shortcodes by clicking on Pages -> [The page contains this shortcode ] -> Edit Listing Slider / Listing Grid -> Image Size / Desktop Image Size.
3. Configuring Taxonomy Image Size
Taxonomy page is Listing Category / Listing Location / Listing Tag page. To configure Image Size of the taxonomy page, please click on Appearance -> Theme Options -> Customize Taxonomies -> Custom Taxonomy Image Size
Default Image Size Setting: wilcity_360x200
4. Configuring Search Without Map / Map Image Size
Click on Pages -> That Page -> Search Without Map Settings -> Image Size
Default Image Size Setting: wilcity_360x200
5. Changing Single Listing Image Size
Click on Settings -> Media -> Change Large setting
Default Image Size: large. I recommend an image size of 1200x800px
6. How to increase the default image sizes.
- From the admin sidebar, click on Plugins -> Add New -> Installs and activates Simple Image Sizes plugin
- Installs and activates Regenerate Thumbnails plugin
- Now clicks on Settings -> Media -> Here you will see all image sizes -> You can change to the size you want
- Finally, clicks on Tools -> Regenerate Thumbnails -> Executes it
