Image Component

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

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

You can select a size for your Image component.

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

Button

Select Favorite to include a heart button in the top right corner of your Image 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.