The Image Element allows you to place static images within a content area to be displayed on your website.  We recommend using JPEG or PNG image file types.




Overview


Image Tab




After the Image Element is placed into a content area, you will be presented with the initial Image Tab. Let's examine some of the elements found here:

  • Search Images: Conduct a search of all images within your File Manager.  Can be done using file names or keyword tags associated with the images.

  • Folders: This is the folder structure created within your File Manager  Creating separate folders is a helpful way to keep your images organized. 

    • To expand or collapse sub-folders, click on a triangle to the left of a yellow folder icon. To create new folders or move existing items between folders, visit your File Manager from the Dashboard.

  • Images: Click on an image to view sizes, detailed meta data, or to select it as your image to be placed.

  • Drag files here to upload: If an image you would like to place is not located in your File Manager, you can upload it by dragging the image to this area, or by clicking on the green button and selecting the image to upload. Once uploaded, the image will appear.   NOTE: At this time, you cannot use the drag files to upload method while using Internet Explorer 9 or later.

  • Save Changes: Once your image has been selected, click this button to place it on the web page.


Once your image is uploaded and selected, a preview of the image will appear along side with other sub tabs.


Image - Sub Tab

By default, an image size will be suggested based on the content area you selected. To prevent low-quality images, it will not suggest a size larger than the image you uploaded. When you are ready to place the image, please click the Place Image button. 


Choose a size - Sub Tab

Under this tab, you can adjust the size of the image if you do not wish to use the recommend size. 

  • Selected Size: If you are editing an existing Image Element, the current suggested size will be displayed here.
  • Create a Custom Size: You can create a custom size by entering a pixel with and selecting 'Create Size'.  The new size will be added to the 'Choose a new size' dropdown.
  • Choose a new size: Select a size from a list of pre-existing, or created, sizes.  The currently selected size will be indicated with a check mark.


Details - Sub Tab

Under this tab, you can see information about the image, such as the name, file size, and much more.


Advance Tab

The advanced tab contains options to customize aspects of the image.  Adjusting how the image is displayed within the content area and making the image a clickable link can be managed here.



Container Settings pertain to how the image is displayed within the content area.

  • Display: This determines on what devices the image will be displayed.
    • All Devices: The image will be displayed when viewed on all devices.
    • Full Version: The image will ONLY be displayed when website is viewed with a computer.
    • Mobile Version: The image will ONLY be displayed when website is viewed with a mobile device.

  • Align: Align this content left, center, or right inside it's containing content area.

  • Class: Assign a CSS class to this image, allowing you advanced control over how it is displayed.

  • Title: The title, more commonly known as a tool tip, is text that appears when you hover over the image. You can place instructions or other helpful content in this field.

Image Settings pertain to the actual image itself.


  • Image ID: Assign a CSS ID to this image, allowing you fine control of how it is displayed.

  • Alt Text: Choose the Alt text that will be displayed when the image fails to load, or when viewed in a text-based browser.

  • Width: You can set the width of the image inside of the content element, choose percent or pixel.

Link Settings are used to make the image an active link.

  • Link: Add a hyperlink to the image.



Video Overview




Common Questions


I tried placing an image but it says 'Image Not Found'?

The most common reason this error occurs is because the "Save Changes" button was clicked instead of the "Place This Image" button when the image as initially being placed in. To learn more about this error, please Click Here.