Product documentation and training for Shipcode.
Assets Panel
Upload and organize static assets to your project.

The Assets Panel is where you can upload and organize the images and videos that will be embedded within your application. To access the panel, simply click on the assets icon in the Left Sidebar.

 

Assets can be displayed in your application using the Image or Video components.

 

 

Uploading Assets

To upload one or more assets, click on the “Upload Assets” button on the top of the Assets Panel to open a file browser, and select the desired files. The assets will be uploaded into the current open folder (see “File Types” below).

File Types

Shipcode does not restrict the types of images and videos that can be uploaded. However, you should keep in mind that different operating systems (e.g., iOS, Android, and Windows) as well as different browsers may support different subsets of file types. Below are our recommendations for file types that are supported across major operating systems and browsers:

  • Images: png, jpg, jpeg, bmp, gif, webp
  • Videos: mp4, mov, avi, webm

File Sizes

In order to achieve a positive experience for your customers, keep your assets as small as possible while maintaining a reasonable level of quality. Larger file sizes may be slow to download and appear on mobile connections, and older devices may struggle to display large videos. Large files may also greatly impact your storage and/or bandwidth limits per your hosting plan.

  • For images, we recommend that assets be no more than 1 megabyte in size, and with the appropriate compression, your images can be a fraction of that.
  • For videos, we recommend file sizes be smaller than 20 megabytes, though this will vary greatly depending on the length of the video. Consider the audience for your video; for example, if you are targeting mobile devices, 720p video is more than adequate.

Asset Storage Limits

Depending on the terms of your hosting plan, you may be subject to storage and/or bandwidth limits. The total amount of used and available storage is presented at the bottom of the Assets Panel. To increase your storage limits, please contact your Shipcode representative.

Organizing Assets

You can create folders to organize your assets. To create a new folder, simply click on the “New Folder” icon in the Asset Panel header. Folders can be created within other folders; first navigate to the desired folder, and then click on the “New Folder” icon.

Renaming Assets and Folders

By default, assets will maintain their original filename, and folders will be named “New Folder.” To rename an asset or folder, hover over the asset or folder name with your mouse, at which point your cursor will change to the insert text cursor. Click once to enter edit mode, provide a new name, and then click outside of the asset (or press Return) to save your change.

Viewing Asset Details

To view more information about an asset, such as its file type or size, hover over the asset with your mouse. When you do so, a “Settings” icon will be presented; click on the icon to display the details modal.

 

 

Deleting Assets and Folders

To delete an asset or folder, hover over the asset to display the settings button. Click the settings button to view the details modal, and then click the “Delete” button within the modal.

Searching for Assets

A search input is located at the top of the Assets Panel so that you can easily locate your files and folders. Type in the partial text of the item you wish to find, and matching assets and folders will be displayed below. To clear your search, either delete the search query or click on the “X” icon to the right of the search bar.

Sorting and Filtering

Next to the search bar are icons that give you the ability to switch between list and grid view.

Below the search bar you will find dropdowns for changing the sorting and filtering of the assets list. You can sort the assets by name (the default) or date added. You can also click on the “Sort” icon next to the dropdown to toggle between ascending and descending order. The “Filter” dropdown gives you the ability to only display images or videos.

 

Did this answer your question?