Screenshoter in blocks | Viseven Help Center

You can use the eWizard.js screenshoter to generate and modify block icons for e-Detailers, emails, sites, and messenger ads.

Generate icons for blocks

Instead of adding block icons locally with the icon property, you can use the screenshoter to generate block icons for all blocks, even if they don't have an icon in blocks.json or blocks-themes.json. This is useful if you want to generate a block icon for a specific theme.

The generated icons are displayed on the Blocks tab in eWizard Editor.

As best practice, use screenshoter to generate the icons. If you want to add custom icons, use the wiz screen block command and its options.

To generate icons for blocks in emails, define the screenshoter.icons.blocks.enabled field as true in the ./settings.json file.

// ./settings.json

{
  "screenshoter": {
    "icons": {
      "blocks": {
        "enabled": true
      }
    }
  }
}

When you upload the zipped project to eWizard and open it in eWizard Editor, the Blocks tab has icons for all the blocks even if they don't have an icon in blocks.json or blocks-themes.json.

After you modify the project in eWizard Editor, eWizard.js adds icons for all the blocks to the common/icons/blocks directory. Download the project archive and open the project locally to view the JPG files of the block icons.

You can change the default common/icons/blocks path to the directory in the system settings.

// ./.ewizard/settings.json

{
  "path": {
    "icons": {
      "blocks": "common/icons/blocks"
    }
  }
}

Set generated icon width

To change the block icon width for all the icons generated automatically in the common/icons/blocks directory:

Add the following configuration to the ./settings.json file:

// ./settings.json

{
  "screenshoter": {
    "icons": {
      "blocks": {
        "enabled": true,
        "width": "700px"
      }
    }
  }
}

Set the block icon width in pixels, for example, 700px.

Archive the project with the wiz archive command.
Upload the zipped project to My library.
Open the email in Editor and change the content.
Download the source and open the project locally.

The width of all block icons in the ./common/icons/blocks directory is now 700 pixels.

Skip generating icons for individual blocks

Use the skip setting when you want to skip automatic icon generation for specific blocks.

// ./common/blocks-library/blocks.json
// OR
// ./common/blocks-library/blocks-themes.json

{
  "components": [
    {
      "id": "introBlock",
      "name": "Intro Block",
      "screenshoter": {
        "skip": true
      }
    }
  ]
}

When you archive and upload the email project to eWizard, the skipped blocks either don't have icons on the Blocks tab in Editor or have the local icons from the block directory.

For example, a blocks.json file, with block1 and block2 where block2 has the skip option as true:

// ./common/blocks-library/blocks.json

{
  "components": [
    {
      "id": "block1",
      "name": "Intro Block",
    },
    {
      "id": "block2",
      "name": "Block 2",
      "screenshoter": {
        "skip": true
      }
    },
  ]
}

As a result, block2 is skipped in the downloaded common/icons/blocks directory.

If the block directory has an icon.png file included, then it's displayed on the Blocks tab in eWizard Editor.

Icons for view/edit mode

The appearance of certain blocks can differ in the Editor PREVIEW/EDIT mode or in Viewer. To display the block icons as they appear in these modes, add the following configurations to the ./settings.json file:

To display all block icons as they appear in the PREVIEW mode or in Viewer, add the view mode:
```
// ./settings.json

{
  "screenshoter": {
    "icons": {
      "blocks": {
        "enabled": true,
        "mode": "view"
      }
    }
  }
}
```
For example, block1 looks as follows in the Editor PREVIEW mode:

If you apply the view mode, the block icon looks as follows on the Blocks tab:
To display all block icons as they appear in the Editor EDIT mode, add the edit mode:
```
// ./settings.json

{
  "screenshoter": {
    "icons": {
      "blocks": {
        "enabled": true,
        "mode": "edit"
      }
    }
  }
}
```
The view mode is used by default.

For example, block1 looks as follows in the Editor EDIT mode:

If you apply the edit mode, the block icon looks as follows on the Blocks tab:

To apply the view or edit mode to specific block icons, add the respective mode configuration to the blocks.json or blocks-themes.json file:

// ./common/blocks-library/blocks.json

{
  "components": [
    {
      "id": "header-1a",
      "name": "Header with social icons",
      "screenshoter": {
        "mode": "edit"
      }
    },
    {
      "id": "header-1b",
      "name": "Header with text V1",
      "screenshoter": {
        "mode": "view"
      }
    }
  ]
}

Monochrome icons for individual blocks

Use the monochrome option to display block icons in black, white, and grey colors.

To display monochrome icons for specific blocks, add the monochrome option to the block in the blocks.json or blocks-themes.json file:

// ./common/blocks-library/blocks.json
// OR
// ./common/blocks-library/blocks-themes.json

{
  "components": [
    {
      "id": "introBlock",
      "name": "Intro Block",
      "screenshoter": {
        "monochrome": true
      }
    },
    {
      "id": "infoBlock2a",
      "name": "Block with coded component",
      "icon": "common/blocks-library/infoBlock2a/icon.png",
      "screenshoter": {
        "monochrome": true
      }
    },
  ]
}

As a result, the block is displayed with a monochrome icon in eWizard Editor.