How to Add Images To An App
  • 19 Nov 2024
  • 3 Minutes to read
  • Contributors

How to Add Images To An App


Article summary

There are three ways to add Images to your frontline operations app:

  1. Copying and pasting from your computer's clipboard in Chrome
  2. Manually uploading from your desktop
  3. Using an image URL

Copying and Pasting Images

You can copy and paste images into apps using CTRL+C and CTRL+V on Windows, and CMD+C and CMD+V on Mac.

Uploading Images

Method 1

  1. Navigate to the Step in the app where you would like to upload an image/picture.

  2. Click Embed in the App Editor Toolbar and choose Image from the resulting dropdown.

3- Upload the content by clicking the upload arrow under the Widget Tab in the Side Pane.

  1. Use the refresh arrow to Reset Aspect Ratio for easy formatting.

Method 2

You can directly drag images from your desktop or a folder and drop them into an individual Step in the App Editor. This works well if you have many images in a folder, and you want to quickly add them to steps.

Using Image URLs

You can create a variable with type "image" and then store a specific image as a default value. Or, you can update that Variable with a new image in the Trigger Editor.

To store an image in a variable by default, choose the Variables menu from the App Tab of the Side Pane.

Then, create a variable with type "Image URL".

Then, click the Upload icon in the Default Value column on the right.

You can always update this image via Triggers. Use "Data Manipulation" "Store" to add a new image URL or upload an image to this variable.

Styling/Adding Triggers to Images

You can edit the following properties of images after they are uploaded to Tulip in the Side Pane on the right side of the screen:

  • Size
  • Rotation
  • Drop Shadow
  • Border Radius
  • Blinking

You can also add a trigger to an image or show a fullscreen version of it when clicked. Use the Click Actions menu in the side pane after selecting the image:

Technical Details of Image Support

We support the following image formats:

  • PNG (maximum size of 20 MB)
  • JPEG (maximum size of 20 MB)
  • GIF (maximum size of 5 MB)
  • SVG (maximum size of 5 MB)

JPEG and PNG will be automatically resized to 1920 x 1200 at maximum.

Further Reading

  • [How To Copy Content Between Apps](https://support.tulip.co/docs/how-to-copypaste-content-within-apps-and-between-apps

Did you find what you were looking for?

You can also head to community.tulip.co to post your question or see if others have faced a similar question!


Was this article helpful?