Meet the new Glide Apps
Glide Pages are now Glide Apps. Please refer to this article for up-to-date information, as some of this documentation is outdated.
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
- Make sure you are on a Details or Custom Screen.
- Select the plus symbol in the Screen panel on the left side of the Layout Editor.
- 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.
- Navigate to the Action settings.
- Click the + button to begin adding your action.
- In Configure Action, select the dropdown menu to view action options.
- Choose an action from the dropdown list or select Create new action to create your own custom action.
- If prompted, apply any additional settings in Configure Action.