Working with images

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

Layout

Nearly all layout views in Glide have an image property, which displays an individual image for each list item. You can have different layout types for each tab in your app, so you can make the look & feel of images different on each page.

Images can also appear in the details page of each list item. Images can be shown in components like the Image component the Title component, and the Rich Text component.

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

On list items, this is easy as Glide can host images that you drag and drop onto the image placeholders. But you may want to use your own image URLs. 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 Original setting in the Size dropdown.

Changing the size of the image (with cropping)

To show smaller versions of this image, you can tweak the Size and Fill.

Tweaking the size & fill settings

If you choose Fill the area and then reduce the size, Glide will crop your image with the following ratios:

  • Large creates a 1:1 crop ratio, resulting in a square image

  • Medium creates a 2:1 crop ratio

  • And Small creates a 3:1 crop ratio

If you choose Show the whole image and reduce the size, Glide will make the image smaller and inset it without cropping.

Changing the size of the image (without cropping)

If you donโ€™t want your image to go all the way to the edge of the screen, you can select Inset with content, rather than Edge to edge.

You can enable a tap to enlarge action on the image as well, to allow people to view the image full screen.

Adding a tap to enlarge action

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.