All Collections
Using Editor
Laying out screens
Adding Images in Editor via File or URL
Adding Images in Editor via File or URL
A handy tutorial on adding images in Editor
Jamie Gutierrez avatar
Written by Jamie Gutierrez
Updated over a week ago

Adding an Image file to your prototype


Adding images to Editor, is now even easier. Find your image, then just drag and drop into Editor. You can either add the image to an existing page, or drag into the 'Screens', and a new screen is created. You can also select multiple images to create pages or screens. Check out the quick video that demonstrates how to do this.

Adding an external Image widget

You can set an image source via URL, instead of uploading an image file to your iRise project. This allows you to use images from any public website or public file in Google Drive, Dropbox, or OneDrive. That way, if the image changes, your iRise project will automatically be updated.

  1. Copy the URL of any publicly available image. For example: https://images.pexels.com/photos/94654/pexels-photo-94654.jpeg 

  2. In iRise, select an Image widget

  3. In the Settings panel, paste the URL into the Image URL field

Add an external Background Image

  1. Copy the URL of any publicly available image. For example: https://images.pexels.com/photos/94654/pexels-photo-94654.jpeg 

  2. In iRise, select any widget

  3. In the Style panel under Fill, paste the URL into the Image URL field

Using public images from Google Drive, Dropbox, or OneDrive

You can embed a public image from Google Drive, Dropbox, or OneDrive. That way, when the image changes, your iRise project will automatically be updated.

Note: at this time, only public image files can be embedded in iRise.  

Microsoft Onedrive

To embed a OneDrive image in iRise, simply use the Share link provided.

Google Drive

Unfortunately Google does not provide a direct link to the raw images stored in Google Drive. To embed a Google Drive image, you'll have to use the following URL:

Use this URL:

 https://drive.google.com/uc?id=FILE-ID 

The find the File ID, get the Share link for the image file. Within the link you'll see the file ID:

Don't use this URL:
https://drive.google.com/file/d/FILE-ID/view?usp=sharing

  

Dropbox

Unfortunately Dropbox does not provide a direct link to the raw images stored in Google Drive. To embed a Dropbox image, you'll have to use the following URL:

Use this URL:

 
https://dl.dropboxusercontent.com/s/FILE-ID/FILE-NAME 

The find the File ID and File Name, get the Share link for the image file. Within the link you'll see both:

Don't use this URL:

 
https://www.dropbox.com/s/FILE-ID/FILE-NAME?dl=0  

Did this answer your question?