experiment_id: web-retrieval-v1
fixture_id: /docs/features/media-types
mode: provenance
representation: html
origin_response_id: 0185003e72b20a2feabe0d8aa67c8010
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.624Z
version_nonce: ece965c190a49297ec663edaa5d673e5
generated_at_utc: 2026-11-11T00:53:38.471Z
response_nonce: 12383bc20f4f26ab619137c9480f2ade
Docs Version 1

Media Types

ZingGrid has defined iframe and image column types which you can use to customize your grids with various media content.

Images

Use the image column type to display images in grids, like so:

<zg-column index="imageUrl" type="image"></zg-column>

Images in Columns Grid

Here is a complete grid that displays data in the form of cute images of cats:

Top

GIFs

You can also use the image column type to display GIFs in grids.

GIFs in Columns Grid

Here is a complete grid that displays data in the form of cat GIFs:

Top

Video

Use [index="videoUrl"] with the iframe column type to display videos in grids, like so:

<zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>

Videos in Columns Grid

Here is a complete grid that displays data in the form of embedded videos:

Top

Google Maps

Use [index="map"] with the iframe type to display maps in your grids, like so:

<zg-column index="map" type="iframe"></zg-column>

Google Maps in Columns Grid:

Here is a complete grid that displays data in the form of maps embedded from Google Maps:

Top

Many More!

The iframe and image column types offer a lot of flexibility for your grids. If you don't see your preferred media genre here, let us know and we'll add an example for you!

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: media types]