Media - Image

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Beginner
Intermediate
User

Use the Image content type to add a JPG, GIF, or PNG image to the Page Builder 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 URL, product, category, or page.

TIP

You can use the Adobe Stock Integration to find and save an appropriate asset from among the millions provided by Adobe Stock. See Using Adobe Stock Images for details about how to search, refine, and save Adobe Stock assets into your gallery.

NOTE

If you are making significant changes to Page Builder content, it is recommended that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Image toolbox

The image toolbox appears when you hover over the image container.

w-500 modal-image

Tool

Icon

Description

Move

img-md
w-25

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

img-md
w-25

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

Hide

img-md
w-25

Hides the current image.

Show

img-md
w-25

Shows the hidden image.

Duplicate

img-md
w-25

Makes a copy of the image.

Remove

img-md
w-25

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.

NOTE

Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add an image

In the Page Builder panel, expand Media and drag an Image placeholder to the target container.

You can add an image to a row, column, or tab. In the following example, the image is dragged to an empty column.

img-md
w-600 modal-image

Use one of the following methods to add the image asset:

img-md
w-500 modal-image

note note
NOTE
The maximum file size is 4 MB. Supported file types are JPG, GIF, and PNG.

Upload a new image: Use this method to upload a new image file from your system.
- Click Upload Image.
- Locate and choose the image to add it to the gallery and target container.
As an alternative, you can also drag an image file from your system and drop it on the Camera (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) icon.

Select an existing asset: Use this method to select an existing image asset from the media storage/gallery.

Click Select from Gallery.
Use the tree to navigate to the image.

Click the thumbnail and click Add Selected.

img-md
w-600 modal-image

Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.

note note
NOTE
This method requires an Adobe Stock integration configured for your Admin.

Click Search Adobe Stock and search for an image.
Save the preview or licensed image to the gallery.

See Using Adobe Stock Images for more information about working with Adobe Stock assets.
Select the asset thumbnail in the gallery and click Add Selected.

The image appears in the target container at the placeholder location. Unlike a background image, you can move the image to a different position within the current container or to a different container.

note note
NOTE
The Banner and Slider content types also include Upload Image and Select from Gallery options for adding images.

img-md
w-500 modal-image

Change image settings

Hover over the image container to display the tool box and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.
The file name, dimensions, and file size appear below the current image.

img-md
w-600 modal-image

To change the current Image, do one of the following:

Upload a new image: Use this method to upload a new image file from your system.
- Click Upload Image.
- Locate and choose the image to add it to the gallery and target container.

Select an existing asset: Use this method to select an existing image asset from the media storage/gallery.

Click Select from Gallery.
Use the tree to navigate to the image.

Click the thumbnail and click Add Selected.

img-md
w-600 modal-image

Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.

note note
NOTE
This method requires an Adobe Stock integration configured for your Admin.

Click Search Adobe Stock and search for an image.
Save the preview or licensed image to the gallery.

See Using Adobe Stock Images for more information about working with Adobe Stock assets.
Select the asset thumbnail in the gallery and click Add Selected.

To add a Mobile Image, use the same methods described in the previous step to select an image to be used for display on mobile devices.

img-md
w-600 modal-image

If needed, specify a Link for the image.

The link is the destination page that appears when the customer clicks the image. You can use one of three link types:

URL - Links to either a relative or fully qualified URL.

Product - Identifies the destination page based on the product name or SKU. Search for the product by name based on either a partial or full name. Choose the product from the search results list.

img-md
w-600 modal-image

Category - Identifies the destination page as a specific category or subcategory in the category tree. Search for the category based on either a partial or full name. Choose the category from the expanded section of the displayed tree.

img-md
w-600 modal-image

Page - Identifies the destination page as a specific content page. Search for the page based on either a partial or full name. Choose the page from the search results list.

img-md
w-600 modal-image

If you want to prevent the visitor from navigating away from your store, select the Open in new tab checkbox. When the checkbox is cleared, the linked destination opens in the same browser tab, which could effectively navigate the visitor away from your store.

To add an Image Caption, enter the text that you want to appear below the image.

The format of the caption is determined by the stylesheet that is associated with the current theme.

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>
Update any of the other settings as needed:
- Search Engine Optimization
- Advanced
When complete, click Save to apply the settings and return to the Page Builder workspace.

Move an image

Hover over the image container to display the toolbox and choose the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | | +----------------------+) icon.

img-md
w-500 modal-image

Select and drag the image to the new position, just below the red guideline.

img-md
w-500 modal-image

Remove an image

Hover over the image container to display the toolbox and choose the Remove (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | | +------------------------+) icon.
When prompted to confirm, click OK.

Search Engine Optimization

Text for these settings is visible to search engines and improves the way the page is indexed.

For Alternative Text, enter an alt text description for digital accessibility tools to display.

The use of alt text is an accessibility best practice, and is required by law in some locales. In HTML, the alt attribute is a subset of the image tag: <image title="tooltip" alt="description" src="image.jpg">.
For Title Attribute, enter the text to display as a tooltip on mouseover.

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

To control the horizontal positioning of the images added to the container, choose an Alignment.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
Option	Description
`Default`	Applies the alignment default setting that is specified in the style sheet of the current theme.
`Left`	Aligns the image content along the left border of the image container, with allowance for any padding that is specified.
`Center`	Aligns the image content in the center of the image container, with allowance for any padding that is specified.
`Right`	Aligns the image content along the right border of the image container, with allowance for any padding that is specified.

Set the Border style applied to all four sides of the image container:

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
Option	Description
`Default`	Applies the default border style that is specified by the associated style sheet.
`None`	Does not provide any visible indication of the container borders.
`Dotted`	The container border appears as a dotted line.
`Dashed`	The container border appears as a dashed line.
`Solid`	The container border appears as a solid line.
`Double`	The container border appears as a double line.
`Groove`	The container border appears as a grooved line.
`Ridge`	The container border appears as a ridged line.
`Inset`	The container border appears as an inset line.
`Outset`	The container border appears as an outset line.

If you set a border style other than None, complete the border display options:

img-md
w-600 modal-image

table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
Option	Description
Border Color	Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width	Enter the number of pixels for the border line width.
Border Radius	Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

(Optional) Specify the names of CSS classes from the current style sheet to apply to the image container.

Separate multiple class names with a space.

Enter values, in pixels, for the Margins and Padding to specify the outer margins and inner padding of the image container.

Enter each corresponding value in the image container diagram.

table 0-row-2 1-row-2 2-row-2 layout-auto
Container area	Description
Margins	The amount of blank space that is applied to the outside edge of all sides of the container.
Padding	The amount of blank space that is applied to the inside edge of all sides of the container.

recommendation-more-help

85b60248-86a4-4d5f-9933-5179643f608d