Magento for B2B Commerce

Image

Use the Image content type to add a JPG, GIF, or PNG image to the stage. In addition to the default desktop image, you can specify a secondary image for mobile devices. You can also add a caption that appears below the image, and link the image to any URLUniform Resource Locator: The unique address of a page on the internet., product, categoryA set of products that share particular characteristics or attributes., or page.


Image In Column
  • Image Toolbox

    TOOL

    Icon

    Description

    Move

    Moves the image to another position on the stage.

    (label)

    IMAGE

    Identifies the current content container as an image. Hover over the image container to see the toolbox.

    Settings

    Opens the Edit Image page, where you can change the properties of the image and container.

    Hide

    Hides the current image.

    Show

    Shows the hidden image.

    Duplicate

    Makes a duplicate copy of the image.

    Remove

    Deletes the image from the stage.

    Upload New Image

    Uploads an image from your local file system to the gallery.

    Select from Gallery

    Chooses an existing image from the gallery.

  • Image Settings

    Setting

    Description

    Image

    Adds an image that is intended to be viewed from a desktop computer to the stage. You can add images directly to a row, column, or tab.*

    Maximum size: 4 MB

    Supported file types: JPG, GIF, PNG

    Upload

    Uploads an image from your local file system to the gallery.

    Select from Gallery

    Chooses an existing image from the gallery.

    Allows you to either drag the image to the camera tile, or browse to the image in your local file system.

    * The Banner and Slider content types also include Upload Image and Select from Gallery options for desktop images.

    Mobile Image

    Adds an image that is intended to be viewed from a mobile device to the stage. You can add mobile images directly to a row, column, or tab.*

    Maximum size: 2 MB

    Supported file types: JPG, GIF, PNG

    Upload

    Uploads an image from your local file system to the gallery.

    Select from Gallery

    Chooses an existing image from the gallery.

    Allows you to either drag the mobile image to the camera tile, or browse to the image in your local file system.

    * The Banner and Slider content types also include Upload Image and Select from Gallery options for mobile images.

    Link

    Adds a hyperlink to the primary desktop image, and to the mobile image, if available. Options:

    URL

    Links the image to a URL.

    Product

    Links the image to a product detail page from your store’s catalog.

    Category

    Links the image to a category page.

    Page

    Links the image to a content page.

    Open in new tab

    Determines whether a linked page opens in the same browser tab, or in a new tab. Options:

    When the checkbox is marked, the page from your store continues to be open on the current tab, and the linked page opens in a new browser tab.

    When the checkbox is clear, the linked page opens in the same browser tab as your store, which effectively navigates the visitor away from your store.

    Image Caption

    Specifies the caption that is associated with the image. The caption typically appears below the image, and provides information about the image for visitors and search engines. If your site is available in multiple languages, you might use the same image, but translate the caption. In HTML, the <figcaption> tag is a subset of the <figure> tag.

    <figcaption>This is the image caption</figcaption>

    Search Engine Optimization

    Provides additional information to improve the way the image is indexed by search engines. Options:

    Alternative Text

    Specifies the “alt” text description of the image. The use of alt text is an accessibility best practice, and in some locales is required by law. The alt attribute is a subset of the image tag.

    <image title="tooltip" alt="description" src="image.jpg">

    Title Attribute

    Specifies the text for a tooltip that appears when you hover over the image. As a best practice, choose a descriptive, keyword-rich title to improve the way the image is indexed by search engines. In HTML, the title attribute is a subset of the image tag.

    <image title="tooltip" alt="description" src="image.jpg">

    Advanced

    Appearance

    Determines how the background color and/or image appears in relation to the parent container, and the width that is available for content.

    Contained

    The background color or image is limited to the maximum page width that is defined by the theme.

    Full Width

    Limits the image to the maximum page width that is defined by the theme. However, the background is not limited, and extends the full width of the row.

    Full Bleed

    Neither the image nor the background are limited, and extend the full width of the row.

    Full Bleed can be used only with themes that support the layoutThe visual and structural composition of a page..

    Background

    Background Color

    Determines the background color and opacity of the row.

    Background Image

    Determines the location of the background image file, and applies the image to the row. Options:

    Upload

    Uploads an image file from your local computer to the gallery, and applies it as the background image for the row.

    Select from Gallery

    Prompts you to choose an existing image from the gallery as the background image for the row.

    Background Mobile Image

    Determines the location of the background image file that is used for mobile devices, and applies the image to the row. If left blank, the standard desktop background image is used. Options:

    Upload

    Uploads an image file from your local computer to the gallery, and then applies it as the background image for the row.

    Select from Gallery

    Prompts you to choose an existing image from the gallery as the background image for the row.

    Background Size

    Determines how the background image is scaled in relation to the width of the row. Options:

    Cover

    The background image covers the full width of the row.

    Contain

    Limits the background image to the width of the content area of the page.

    Auto

    Applies the background image size from the current style sheet.

    Background Position

    Determines the anchor point of the image in relation to the row. Options:

    Top Left

    Top Center

    Top Right

    Center Left

    Center

    Center Right

    Bottom Left

    Bottom Center

    Bottom Right

    Background Attachment

    Determines how the background image moves in relation to the scrolling page. Options:

    Scroll

    The background image is synchronized to move down as the page scrolls. See Parallax Background to control the scrolling speed.

    Fixed

    (Not available for mobile) The background image does not move as the container scrolls over the image, and is fixed at the specified background position.

    Background Repeat

    Determines if the background image is repeated to fill the available space. Options:

    Yes

    The background image is repeated to fill the available space.

    No

    Only a single instance of the background image appears.

    Parallax Background

    Determines the speed of a scrolling background image in relation to the scrolling of the page. You can set the background can be set to scroll more slowly to create a sense of immersion. Options:

    Enable Parallax Background

    Enables parallax scrolling of the background image.

    Parallax Speed

    Determines how fast the background image moves in relation to page scrolling. Accepts values in the range of -1.0 to 2.0.

    Layout

    Determines the minimum height and vertical alignment of the row. Options:

    Minimum Height

    Determines the minimum height of the row. For example, you might set the minimum height to match the height of a background image to ensure that the full image is visible.

    Vertical Alignment

    Determines the vertical position of content containers that are added to the row.