Integrating an image is done by simply retrieving its URL and setting it in the template.

The following integrates a page's illustration image field.

<img src="@Model.document.GetImage("page.illustration").Url"/>

Integrating the illustration with caption is also as straightforward:

<img src="@Model.document.GetImage("page.illustration").Url"/>
<span class="image-caption">@Model.document.GetText("page.caption").AsText()}</span>

For integrating a group of images (e.g. photo slide show in a page), you need to loop through the items:

@foreach (var imageWithCaption in Model.document.GetGroup("page.slide-show").GetDocs()) {
  <img src="@imageWithCaption.GetImage("page.illustration").Url"/>
  <span class="image-caption">@imageWithCaption.GetText("page.caption").AsText()</span>
}

Image Templating with .NET

Retrieve the image url

An image & a caption field

A group of images