Image

Image field that can be configured with size constraints

A simple image field for a page illustration:

Copy
      "illustration" : {
  "type" : "Image",
  "fieldset" : "Illustration"
}	
    

An image field with size constraints and a caption:

Copy
      "illustration" : {
  "type" : "Image",
  "config" : {
    "constraint" : {
      "width" : 600,
      "height" : 600
    }
  }
},
"caption" : {
  "type" : "StructuredText",
  "config" : {
    "single" : "heading3",
    "placeholder" : "Image caption..."
  }
}
    

An image field can be used inside a group for an image gallery or photo slide show:

What is a group?

A group is used for defining a repeatable set of fields. It can be used for galleries, authors, etc. Please refer to the group field for a detailed description.

Copy
          "slide-show" : {
      "fieldset" : "Slide Show",
      "type" : "Group",
      "config" : {
        "repeat" : true,
        "fields" : {
          "photo" : {
            "type" : "Image"
          },
          "caption" : {
            "type" : "StructuredText",
            "config" : {
              "single" : "heading3",
              "placeholder" :  "photo caption..."
            }
          }
        }
      } 
    }
    

Reference

type

string

Image

fieldset

string

a user-friendly field label for the editor

config

object

objects listed below

config

placeholder

string

user-friendly placeholder for the editor

constraint

object

width and height

thumbnails

object array

an array of name, width and height

constraint

width

number

an integer (pixels)

height

number

an integer (pixels)

There is no specific query to be done on images.

Orderings

Image fields can not be used to order results.

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:

Copy
      // URL of the main view
img(src=pageContent.getImage('page.illustration').url)
    
Copy
      <!-- URL of the main view -->
<img src="<?= $doc->getImage("page.illustration")->getUrl() ?>"/>
    
Copy
      <!-- URL of the main view -->
<img src="${doc.getImage("page.illustration").getUrl()}"/>
    
Copy
      <!-- URL of the main view -->
<img src="@Model.Doc.GetImage("page.illustration").Url"/>
    
Copy
      <!-- URL of the main view -->
<img src="<%= @doc["page.illustration"].url %>"/>
    

Integrating the illustration with caption is also as straightforward:

Copy
      img(src=pageContent.getImage('page.illustration').url)
span.image-caption !{pageContent.get('page.caption').asText()}
    
Copy
      <img src="<?= $pageContent->getImage("page.illustration")->getUrl() ?>">
<span class="image-caption"><?= $pageContent->get("page.caption")->asText() ?></span>
    
Copy
      <img src="${pageContent.getImage("page.illustration").getUrl()}"/>
<span class="image-caption">${pageContent.getText("page.caption").asText()}</span>
    
Copy
      <img src="@Model.PageContent.GetImage("page.illustration").Url"/>
<span class="image-caption">@Model.PageContent.GetText("page.caption").AsText()}</span>
    
Copy
      <img src="<%= @doc["page.illustration"].url"/>
<span class="image-caption"><%= @doc["page.caption"].at_text() %></span>
    

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

Copy
      for imageWithCaption in pageContent.getGroup("page.slide-show").toArray()
  img(src=imageWithCaption.getImage('photo').url)
  span.image-caption !{imageWithCaption.get('caption').asText()}
    
Copy
      <? foreach($pageContent->getGroup("page.slide-show")->getArray() as $imageWithCaption) { ?>
  <img src="<?= $imageWithCaption->getImage('photo')->getUrl() ?>">
  <span class="image-caption"><?= $imageWithCaption->get('caption')->asText() ?></span>
<? } ?>
    
Copy
      <c:forEach items="${pageContent.getGroup("page.slide-show").getDocs()}" var="imageWithCaption">
  <img src="${imageWithCaption.getImage("page.illustration").getUrl()}"/>
  <span class="image-caption">${imageWithCaption.getText("page.caption").asText()}</span>
</c:forEach>
    
Copy
      @foreach (var imageWithCaption in Model.PageContent.GetGroup("page.slide-show").GetDocs()) {
  <img src="@imageWithCaption.GetImage("page.illustration").Url"/>
  <span class="image-caption">@imageWithCaption.GetText("page.caption").AsText()</span>
}
    
Copy
      <% @doc["page.slide-show].each do |imageWithCaption| %>
  <img src="<%= @imageWithCaption["page.illustration"].url %>"/>
  <span class="image-caption"><%= @imageWithCaption["page.caption"].as_text() %></span>
<% end %>