We use cookies to improve our service. Learn more.

Reference / Components

Image Component

Display images

The Image component is available in both Apps and Pages, but configuration options may differ slightly.

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

Configure 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.

Data

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 source that contains an existing image file.

Design

Ratio

The Image height or Aspect Ratio determines the size and shape of the Image component on the screen.

There are four options:

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

Fill

In Apps, 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

Style options may differ in Apps and Pages.

In Apps, you can select from the following Style options:

  • 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.
  • Select the Crop Behavior to determine how Glide will crop an image to fit within the component. Use the toggle to choose between Faces or Center.

In Pages, you can select from the following Style options:

  • Select Square to ****display your image in a specified Aspect Ratio, as outlined above.
  • Select Circle to display your image as a circle that is auto-cropped.

Size

In Pages, you can select a size for your Image component. This is similar to the Style options mentioned above that are available in Apps.

  • Select Full to allow the Image component to fill the container width.
  • Select Small to display the Image component in a minimized fashion.

Overlays

Overlay options are only available in Apps.

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.

Actions

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. Navigate to the Action settings.
  2. Click the + button to begin adding your action.
  3. In Configure Action, select the dropdown menu to view action options.
  4. Choose an action from the dropdown list or select Create new action to create your own custom action.
  5. If prompted, apply any additional settings in Configure Action.
Updated 2 days ago
Was this helpful?