Using Image Metadata Fields

When you upload images, you can choose to provide information about those images (often called metadata). Your initial Webvanta site is configured for a single metadata field: the caption.

If this is the only metadata field you need, you don't need to do any configuration; just enter the caption when you upload the image, by clicking on the Custom Metadata header in the upload form.

You can also edit the caption or other metadata at any time by selecting the image file in the Images & Files admin page, and then clicking Update File.

Adding Custom Fields

If you want additional fields, edit the Config Setting named asset.metadata.settings. This setting has a string, in JSON format, that defines the custom metadata fields:

[{"mime": "*/*", "fields": [{"name": "caption"}]}]

This looks rather technical, we realize, and we plan to replace the editing of this string with a nice widget before too long, but for now, you need to modify this string to add metadata fields. You just add as many items as you want, separated by commas, in the same format as the "caption" item. For example, this setting will provide metadata fields for caption, author, and date:

[{"mime": "*/*", "fields": [{"name": "caption"}, {"name": "author"}, {"name": "date"}]}]

You can optionally specify that a custom metadata field get a multi-line text area, instead of a simple text field, which is helpful if you expect to enter a long description, for example. Here's an example that creates a single metadata field, called "description", which get a four-line text area for entry:

[{"mime": "*/*", "fields": [{"name": "description", "type": "textarea", "height": "4"}]}]

There's more power here as well; you could specify different metadata fields for different types of files, such as for video; that why there's a mime type parameter at the beginning. If you follow this example, all uploaded files will have the same metadata fields available to them.

Using Metadata Fields in Your Pages

To access the metadata fields, you must be in an asset context, which is typically set via the w:assets tag. For example:

<w:assets tag="cats">
  <img src="<w:path rendition='medium' />" />
  <p><w:caption /></p>
</w:assets>

This code repeats the two inner lines for every image that has the tag "cats". The first line displays the "medium" rendition of the image, and the second line displays the caption.

If you add custom metadata fields, each is accessed by a corresponding w:fieldname tag.

Working with Article Icons

A slightly different technique is needed when you need to access the metadata for an article's icon image. In this case, the WebvantaScript context is set for the article, typically by being on an item page:

<w:kb:item>
  <w:name />
  <img src="<w:icon />" />
  <w:body />
</w:kb:item>

With this code, however, there is no asset context available to enable you to access the caption for the icon image. So you must use the two-part form of the w:icon tag, changing the code above to something like the following:

<w:kb:item>
  <w:name />
  <w:icon>
    <img src="<w:path />" />
    <p><w:caption /></p>
  </w:icon>
</w:kb:item>

This sets up a context for the icon image, so you can then access it's file path using w:path, and the caption and any other metadata using the usual WebvantaScript.