Skip to main content

Assigning Image Sizes for Blog Layouts

Foxiz allows you to choose images for blog listing layouts.

For most sites, leave every one of these settings on - Default -. Each layout already uses a crop that fits its cards: Grid 1, for example, uses 420 by 280. Pick a larger size, such as 615x410, only where images look soft, typically a grid whose cards are wide because it has one or two columns.

A post card on the Signal demo with its featured image thumbnail outlined in orange, cropped to the listing's ratio above the headline

To define your own crop sizes, you can read this documentation

Every one of the settings below is the same field, Featured Image Size, and every one of them is set to - Default - by default.

When more than one of them is set, the narrowest one wins, in this order:

  • One Elementor block, or one category: the block's own setting, or the one in that category's Foxiz Category Settings.
  • The listing page's panel: Category, Blog Index, Author Page, Search Page or Archives. An Elementor block skips this level.
  • Theme Options > Standard Blog Design, for the layout in use.
  • The crop built into the layout, when all of the above are on - Default -.

So when you do change a size, set it in Standard Blog Design first, then change only the listings or blocks that need a different one.

The list it offers holds two kinds of size:

  • Theme crop sizes: the ones still switched on under Theme Crop Sizes, at Theme Options > Theme Design > Featured Image. Turn one off there and it stops being offered everywhere.
  • WordPress core sizes: Thumbnail (Core WP), Medium (Core WP), Medium Large (Core WP), Large (Core WP), 1536x1536 (Core WP) and 2048x2048 (Core WP).

The Theme Crop Sizes group, where each built in size can be switched off

The theme's own crop sizes are:

  • foxiz_crop_g1: 330 by 220
  • foxiz_crop_g2: 420 by 280
  • foxiz_crop_g3: 615 by 410
  • foxiz_crop_o1: 860 wide
  • foxiz_crop_o2: 1536 wide

The dropdown labels them by their dimensions. The last two have no height, so they are resized to that width and never cropped.

Elementor Blocks​

  1. Open the page from Pages > All Pages with Edit with Elementor, and click the block you would like to edit.

  2. Select the Style tab, open the Featured Image section, and find Featured Image Size.

    The Style tab of the Foxiz - Grid 1 block with the Featured Image section open, Featured Image Size first

  3. Then choose your image size you want.

The dropdown here is built differently from the one in Theme Options. It lists every registered image size on the site, theme or plugin, each shown as its dimensions followed by its internal name, for example 330x220 (foxiz_crop_g1), and then Thumbnail (Core WP), Medium (Core WP), Medium Large (Core WP) and Large (Core WP).

The same section carries Custom Featured Ratio, which is the height of the image box as a percentage of its width. Setting it to match the crop you picked is what stops the image being cropped a second time by the layout.

Default Modules​

The settings in the default modules apply to the whole website. They are the defaults, and a block, a category or a listing panel can override them.

  1. Navigate to Theme Options > Standard Blog Design

  2. Select the layout you like to edit.

    The Featured Image group of Theme Options > Standard Blog Design > Grid 1, showing Featured Image Size

  3. Choose your size under the Featured Image Size setting. It is the first setting in each module, in a section headed Featured Image.

Left on - Default -, each module uses a crop built into the layout. These are the ten modules and the size each one asks for:

ModuleCrop it asks for
Classic860 wide, uncropped
Grid 1420 by 280
Grid 2420 by 280
Small Grid330 by 220
Boxed Grid 1420 by 280
Boxed Grid 2420 by 280
List 1330 by 220
List 2330 by 220
Boxed List 1330 by 220
Boxed List 2330 by 220

In the code those are foxiz_crop_o1 for Classic, foxiz_crop_g2 for the four grids and foxiz_crop_g1 for Small Grid and the four lists.

That is why switching a theme crop size off can change a layout you never touched: the module still asks for the size, WordPress no longer has a file at it, and the original image is served instead.

Category Page​

All categories: navigate to Theme Options > Category, then Post Listing - Design > Featured Image Size

The Post Listing - Design group of Theme Options > Category, showing Featured Image Size and Custom Featured Ratio

Individual Category:​

  1. Navigate to Posts > Categories

  2. Then select category you want to edit, click on the edit link.

  3. Find the Featured Image Size setting under the Predefined Blog tab of the Foxiz Category Settings box.

    The Featured Image Size setting on the Predefined Blog tab of Foxiz Category Settings

  4. Select your size

  5. Click on the Update button at the bottom of the term screen to save your changes.

Anything you set here beats the Category panel for this one category.

Blog and archives pages​

Each of these is its own tab in Theme Options, at the top level of the panel, and in each one the setting sits in the Post Listing - Design section.

Blog index: Navigate to Theme Options > Blog Index, then Post Listing - Design > Featured Image Size

The Post Listing - Design group of Theme Options > Blog Index, starting with Featured Image Size on - Default - and Custom Featured Ratio

Author page: Navigate to Theme Options > Author Page, then Post Listing - Design > Featured Image Size

Search page: Navigate to Theme Options > Search Page, then Post Listing - Design > Featured Image Size

Archive page: Navigate to Theme Options > Archives, then Post Listing - Design > Featured Image Size

note

There is a Tag Page tab as well, and it has no Featured Image Size of its own. Tag archives take their listing design from the Archives tab, so set it there.

In all five of these panels the Post Listing - Design section disappears while or Use Ruby Template for the Post Listing on the same tab has a shortcode in it.

Related Articles