We use cookies to improve our service. Learn more.

Reference / App Components

Image Component

Display images in lots of different ways.

There are many ways to include images in your Glide project, but the Image Component is the most customizable and gives you the most flexibility for showcasing your images.

How to add an Image component

  1. Make sure you are on a Details or Custom Screen.
  2. Select the plus symbol in the Screen panel on the left side of the Layout Editor.
  3. In Insert Component, locate Media and select Image.

Select the image source

If your data source contains a column with image links, Glide automatically locates that column and uses it as the default image source when you add an Image component.

  1. If your data source does not already contain images, or if you wish to choose a different image source, navigate to General > Data > Image.
  2. In the Image field, use the menu to select an image source. You can choose to:
    • Provide the URL address for the image in the Image field.
    • Select Upload image. When prompted, upload a saved image file, input a URL, or select from a menu of stock images provided by Unsplash.
    • Select a column from your data table that contains an existing image file.

Configure the component

Adjust the appearance of your Image component with the Design and Overlays settings.

Design

Image height

The Image height feature determines the size and shape of the Image component on the screen.

There are four height options:

  • Square
  • 3:1 aspect ratio
  • 3:2 aspect ratio
  • 1:1 original aspect ratio

Fill

Fill refers to the proportion of the image within the dimensions of the Image component.

  • Select Fill the area to crop and center the image so that it fills the entire space of the Image component.
  • If you select Show the whole image, Glide will not crop or resize the image to fill the component space.

Style

The Style setting determines the width of the Image component on a device’s screen.

  • Select Edge to edge to allow the Image component to span the entire width of the screen.
  • Select Inset with content to align the margins of the Image component with the other components in your project.

Crop Behavior

This setting determines how Glide will crop an image to fit within the component. Use the toggle to choose between Faces or Center. It should be noted that although Glide may be able to detect faces in images you provide, it may not be able to if you’re using stock photos.

Overlays

Button

Select Favorite to include a heart button in the top right corner of your Image component.

Adding a Favorite button will automatically add a new Boolean column named Is Favorited? to the corresponding table in the Data Editor. For more information, see Favorite Component.

Tag

You can create a tag ****that will appear in the top left corner of your Image component. In this instance, tags are used for display only and are not actionable.

  • Use the Tag menu to select the values from your data that will be displayed in the tag.
  • You can also select Custom to enter custom values for a tag.

Avatar

You can include an avatar in the bottom left corner of your Image component.

  • Use the Avatar menu to select the data to be displayed as the avatar image.
  • You can also select Custom to enter custom values for an avatar.

Caption

You can select or provide a caption for the bottom left corner of your Image component.

  • Use the Caption menu to select the data to be displayed as the caption.
  • You can also select Custom to enter custom values for a caption.

If you choose to apply both an Avatar and a Caption to the Image component, the caption will appear just to the right of the avatar image.

Action

Users can trigger an action when they tap on the Image component. You can choose from any of the actions available in Glide or create a custom action.

  1. Select the Action menu arrows.
  2. In Configure Action, select the dropdown menu to view action options.
  3. Choose the behavior to be triggered or select Create new action to create your own custom action.
  4. If prompted, apply any additional settings in Configure Action.
Updated 2 weeks ago
Was this helpful?