Adding images

How to add and host images properly for your app.

Great images are key to making your apps look fantastic. ๐ŸŽ†๐Ÿ”๐Ÿ–ผ Letโ€™s understand more about the ways in which images can appear in Glide.

Images in Glide can appear in two primary places - in list layouts and in components like the title and image component. We can add images from the web, upload our own, and even allow users to upload their own images from within the app.

Hosting

To display images in your app, Glide needs a link to an image file hosted online. E.g:

https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/D%C3%A9part_de_deltaplane.JPG/440px-D%C3%A9part_de_deltaplane.JPG

The easiest way to host images is by uploading to Glide. You can upload images in an Image Column in the Data Editor, or you can drag images onto list items.

External hosting

We reccomend hosting your images with Glide. However, if your app only uses a few images (10 - 20) you can use an external service like Dropbox, Google Drive or Imgur. All you need is a shareable link to your online image that is public, so anyone can view it with the link.

Two of the easiest ways to host your own files online are with Google Drive & Dropbox.

  • In Google drive, upload an image, right-click on it, then click Get sharable link and make sure that Anyone with the link can view.

  • In Dropbox, upload an image, click share file, make sure the link settings are set to Anyone with the link can view and then copy the link.

Now you can connect the column with your image links to the Image property in Glide.

If you use another hosting source for your images, make sure that the URL uses SSL. In other words https:// and not http://. In many instances http:// urls can be blocked by your phone.

Image component

Whilst other components can also display images, the Image component is the most customizable and can present your images in lots of different ways.

To show the original image without cropping it, choose the Show the whole image option in the Fill setting.

To show different size ratios for the image, pick any of the available ratios for the Image Height setting.

You can resize your image to fit any of the following ratios:

  • Original Image Height shows the image in its original size ratio.

  • Square Image Height shows the image in a square ratio.

  • 3:1 Image Height shows the image in a 3:1 ratio.

  • 3:2 Image Height shows the image in a 3:2 ratio.

You can also choose whether to display your image in an Edge to Edge setting where it takes the full width space of the app screen vs. the Inset with Content setting where the image aligns with the rest of the content.

You can also set the Crop Behavior for the image. There are 2 options to choose from: Center Crop Behavior or Face Crop Behavior.

You can enable a tap to enlarge action on the image as well, to allow people to view the image full screen. Simply go to the Feature setting of your image component and choose Enlarge Image from the action options.

Image Carousel

You can also display multiple images in one image component and trigger an image carousel.

To do this, name all of your image columns the same but with a number after each name and then number each column in sequence.

For example;

Title

Description

Image 1

Image 2

Image 3

Image 4

โ€‹

โ€‹

โ€‹

โ€‹

โ€‹

โ€‹

or

Title

Description

Employee 1

Employee 2

Employee 3

Employee 4

โ€‹

โ€‹

โ€‹

โ€‹

โ€‹

โ€‹

It doesnโ€™t matter what you call each column, so long as each column has the same name and the next number. Glide will recognize all of the numbered columns and allow you to choose a single column with just that name (e.g. 'Image') which will incorporate all the columns and trigger the carousel. ๐Ÿ‘๐Ÿฝ

File types

Glide recognizes JPGs, PNGs, GIFs and SVGs.

For your appโ€™s icon, itโ€™s best to use a simple SVG. The app icon will appear in many places and at many sizes so itโ€™s best to use a simple SVG icon which will scale and look good at any size.