# Image Element

# Basic Content - Image Element

img

Dragging and dropping an Image element into a content space will start with a default image that should be modified to fit your auction event website page accordingly.

img

When the Image element is highlighted it will also be seen in the "Selected Elements" section of the Website Editor Sidebar. Clicking on "Image" in the "Selected Elements" section will open up its settings.

# Edit Image

To modify the image you can double-click the image itself, or click on the "cog" icon to display its action icons then click on the "pencil" icon to open the Choose Image window.

Clicking the Edit Element button will open the Choose Image window.

img

There are several properties available for images within content blocks.

# Alt Text

This specifies an alternate text for an image, if the image cannot be displayed. See w3schools.com for more information.

# Alignment

The default is centered although you can change this via the drop-down options available.

img

# Sizing

Images are sized in a responsive manner to either the image itself or the container the image is inserted into.

img

In some cases, an image used as a "banner" may need to use the Responsive to element size option to best fit the container the Image element was inserted into.

# Max Width

This limits the image width to the maximum value entered here.

Image Sizes

The precise dimension is not critical (since screen sizes will vary) although a width roughly in the following ranges will work well in most cases:

  • for "full-width" photos or images, a width of around 1200px is best;
  • for "half-width" photos or images, a width around 600px should be used; and,
  • page background images work well up to 1600px wide.

# Max Height

This limits the image height to the maximum value entered here.

# Border Radius

When set, this will create a "rounded corners" effect for rectangular images. The greater the value the more rounded the corners will appear.

# Image Background Color

See Background Color for more details on applying this property.


# Make An Image Clickable

To Make An Image Clickable you will need to use its Add Behavior button in the Website Editor Sidebar.

img

Clicking on the Add Behavior button will show the available properties.

img

In this case you would click on the Click property to add that behavior to the image.

img

Clicking on the click label will open its Target option drop-down selector. Clicking on the trashcan icon will remove the property.

img

The Target drop-down selector allows you to choose where clicking the image will take the visitor.

img

Selecting Page or Special Page will provide another drop-down selector to choose from existing pages on the auction website. Choosing the Web Address option will open a field where you would enter the appropriate URL for the click behavior as well as a checkbox to set if the link will open to a new page or stay within the same browser tab.

See the Click section of the Add Behavior page for more details.


Also see Common Element Actions for more details on managing the Image element.

Last Updated: 7/23/2020, 5:33:58 PM