Inserting an Image

Modified on Tue, Oct 10, 2023 at 2:50 PM

To insert an Image on your page when using the Tray-Text component:

  1. Click on the 'Insert/Edit Image' button.
    Additionally, within the editor, you can click on Insert in the menu, and select Image.

  2. The Insert/edit image dialog box will appear, then you will click on the Browse button.

  3. The Assets window box should show up, and you would navigate to your respective Image directory.

  4. Click on your desired image and click the Select button.
    Note: you may also upload your image at this point by clicking the Upload button in the top level of that window
    The Upload File dialog box will appear, where you could either drag 'n' drop your image file, or browse on your computer for your desired file.

  5. REQUIRED  File size is limited to 1.1MB (1100KB). If the image's file size is larger, it will need to be resized prior to uploading to the Assets folder. This can be done in an image editing software (ex. Photoshop, etc...). Otherwise, it is suggested to visit https://imageresizer.com which is a free online resource. After you upload an image, select 1100KB as the Target File Size, and .JPG as Save Image As (Select .PNG only if it needs to have a transparent background). Then Download the image, and upload that version to the Assets Folder.
  6. Once your file has been selected, you will be returned to the Insert/edit image dialog box, where you will see your image's unique Asset ID number (a/XXXX) in the Source field. At this step, you may either leave or adjust the Dimensions of your image for best fit.

    ⭐ Pro-Tip:  You can adjust your dimensions by entering it by percentage.  This is a great way to ensure that your image will automatically adjust its sizing based on the viewing experience (desktop or mobile device) a user may be on.  For example, you may enter 100% in the first field and make sure the second field is blank.
    Using this percentage value will allow the image to stretch from edge to edge within its container. You may use 50% for half the size, and so on.

  7. REQUIRED While these fields are not marked as required, for ADA/508 compliancy, please make sure to enter a short description of your image in the Image Description and Image Title fields (you may replace this existing file path shown). These two fields should contain the same description. Users with disabilities may utilize a screen reader in order to review your page's content. Please keep this in mind as you work with your site's content.
    You may view our web accessibility statement outlining our commitment to ADA compliancy.

  8. Click OK to insert your image.

  9. ⭐ Pro-Tip: After you've inserted your image, to wrap text around the image, select the image, and select Formats from the toolbar. Then select Margin, then Push Right or Push Left.
  10. REQUIREDALL Assets need to be published, or they will not appear live on the web. For assistance with the asset publishing process, read this page.



⚠️ PLEASE NOTE: Any images you upload and use on your webpage must have the proper permissions to use.  DO NOT use any images you have downloaded from Google Images or any other website without permission.  This will be considered copyright infringement.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article