Skip to main content

Image component

Add the image components to your items in Editor and customize them

Anna Voloshchuk avatar
Written by Anna Voloshchuk
Updated over a week ago

Available for all item types

Use IMAGE to upload photos, icons, illustrations, images, and graphics from My library, Veeva Vault, NaviGate, or your device to the item layout. You can add IMAGE as an individual component or as a part of the carousel, coded, container, popup, and tab group components.

Image requirements

  • Supported formats: AI, GIF, JPEG, JPG, PNG, PSD / INDD, SVG

    To check whether a target system supports GIFs added to your content item, refer to the documentation of a specific target system.

  • Recommended maximum size: 50 MB

  • The image should be at least twice the size of the email layout for optimal display quality.

    For example, if the email is designed at 600 pixels, use a 1200-pixel image for high-resolution retina screens.

To add this component to your item, drag IMAGE from the Components tab on the elements panel to the item layout.

To upload the required asset to the image component:

1. Drag IMAGE to the layout.

2. Go to the Properties tab and click BROWSE.

Alternatively, you can double-click the image component on the layout.

3. In the Assets popup that appears, select the required image and click ADD.

The selected image opens in the Edit image popup. Here, you can customize the image in the following way:

  • CROP the image in the preset shape: Rectangle, Square, or Ellipse. To keep the original proportions, use .

  • FLIP the image horizontally or vertically.

  • ROTATE the image clockwise or counterclockwise.

  • Zoom in/out the image with the slider.

To apply your changes, click SAVE.

You can find the selected image on the layout.

Emails and their briefs, landing pages and their briefs, multipage sites, and messenger ads

You can add the component separately for the desktop and mobile versions and customize an image for each version.

The added image appears on the layout and is proportionally adjusted to the component width and height.

On the layout, the uploaded high-resolution image appears smaller than its original size. However, in the source ZIP archive, the image retains its original size.

You can add actions and animation to the image on the dedicated Editor tabs.

Depending on the item type you're editing, you can use different options to customize the image.

Image customization for e-Detailers, their briefs, and banners

To resize or reposition the selected image on the slide, use handles. Hold the SHIFT key while resizing to preserve the image aspect ratio.

On the Properties tab, you can:

  • Assign the element type to the added image. Not available for banners.

  • Change the component name that is displayed on the Tree tab.

  • Upload the required asset to the image component with the BROWSE button.

  • Modify the image in the Edit image popup. For this, hover over the image box and click .

  • Update or add texts on the image using the EDIT IMAGE TEXT button.

  • Enter the alternative text for the image.

    To set the image width, height, position, and other parameters, select the image on the slide and go to its Styling tab.

Image customization for emails, landing pages, their briefs, modules, and messenger ads

The uploaded image is proportionally adjusted to the component width and height set on the layout.

On the Properties tab, you can:

  • Assign the element type to the added image.

  • Upload the required asset to the image component with the BROWSE button.

  • Modify the image in the Edit image popup. For this, hover over the image box and click .

  • Update or add texts on the image using the EDIT IMAGE TEXT button.

  • Enter the alternative text for the image.

  • Link the required external resources to the image.

  • Align the image on the layout to the left, center, or right.

  • Set the image width in pixels.

  • Set the image height in pixels. Available for modules, multipage sites, and messenger ads.

  • Clear the Show in Desktop/Tablet/Mobile checkbox to hide the image in the desktop/tablet/mobile version. Available for emails and their briefs, websites, and landing page briefs. In email fragments and messenger ads, you can also hide images separately for desktop and mobile versions.

On the Styling tab, you can set the image fill, padding, and border.

To fit the image to the full width of the layout:

1. Add a placeholder to the block.

2. On the Styling tab, set 0 for the left and right padding of the placeholder and block.

3. Drag the image component to this placeholder.

Only image components with added assets are displayed in the content item PREVIEW mode.

Image text editing

Image text editing allows inline text updates, formatting adjustments, and automatic translation directly on the image in Editor. This streamlines market-specific image preparation, ensuring that texts remain consistent across all content items.

Users with proper permissions can edit or add texts on images. Contact the administrator for details.

Consider the following recommendations for image text recognition to minimize the risk of unexpected issues:

  • Text recognition works with English and may be unreliable for other languages.

  • Maximum words per image: 100.

  • Supported formats: PNG, JPEG, JPG.

  • Maximum image size: 5 MB.

Avoid the following:

  • Text with low-contrast, blur, decorative, handwritten, or highly stylized fonts placed on curved and uneven surfaces.

  • Rare characters, subscripts, or special symbols.

  • Small or visually similar objects, as well as highly detailed or technical visuals.

  • Images with opacity below 100% or gradient backgrounds.

If formatting issues occur in the recognized text, adjust them manually.

To edit text in an image:

  1. Select the image on the layout.

  2. Go to the Properties tab and click EDIT IMAGE TEXT.

    As a result, the Edit image text popup opens. Wait for the popup notification indicating that text recognition is complete.

    In the Edit image text popup, after text recognition, you can do the following:

    • Hover over the required text. A gray frame appears, indicating that the text is editable.

    • Add a text placeholder:

      • Click the + ADD TEXT button [2] to place it in the center of the image.

      • Left double-click on the text-free space within the image.

    • Select a text to display a blue frame, allowing you to resize, rotate, or drag the text placeholder.

    When you add a new text placeholder or select existing text, the following options also become available:

    • The AUTO-TRANSLATE button [1] for automatic translation.

    • The WYSIWYG editor [4] for text customization.

      You can copy, paste, or duplicate formatted texts using the Ctrl+C, Ctrl+V, and Ctrl+D keyboard shortcuts.

      To customize the text, you can use the Upload font option in the font family dropdown [3] to add a variable font or separate font files.

      These fonts are available in all content items for 24 hours and only for your account.

    • Scale the image display with the - and + buttons [5]. Or you can select Full size, Fit to screen, Fit to width from the zoom list [6].

    • Use Undo and Redo buttons [7] to revert or reapply actions.

  3. Click SAVE to apply the changes to the image on the layout.

Did this answer your question?