EssentialsComponents

Image

Display images in your app.

There are many ways to include images in your app. The Image Component is highly customizable and gives you flexibility for showcasing your images.

Adding and Setting Up an Image Component

1

In the Layout Editor, select the tab you want to edit.

2

Click on the plus (+) symbol in the Components panel.

3

Find Content in the menu and select Image.

4

Look for data in the General tab on the right. Here, you can input an images in one of three ways:

  • Uploading
  • Providing a URL
  • Through an image column in your data
5

Choose the style between square or circular.

6

Choose the aspect ratio.

7

Choose whether to display the image in full size, small, or medium.

8

Align the image left, center, or right.

9

Enable Open on click to allow users to click an image and open it larger on their screen.

10

Provide alt text for the image. This is important for accessibility and screen readers. You can enter this manually or link it to a column in your data.

Actions in Image Components

It’s possible for users to trigger an Action or Workflow 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 on the right-hand side.

2

Click on the +Add action button to begin adding your action.

3

Choose an action from the dropdown list or select create new action to create your own custom action.

More on Images in Glide

There are many ways to leverage images in guide. For more details about adding, storing, and displaying images in your app, check out our full guide.

Making an Image Carousel

To create an image carousel, use a multiple image column as the data source for your image component.