Associating an Image with an Article or Database Item

Often, it is helpful to a site's visual design if you can have an image associated with each article or other database item. Webvanta makes his easy to implement.

Associating an Image with an Article or Database Item

In the forms for creating or editing either articles or Knowledgebase items, you'll see a list labeled "Icon". This list shows all of the images that have been uploaded to the site. Just click on one to associate it with the article or database item. (We'll soon be replacing this simple list with a visual image picker that will also allow image uploading; for now, you need to first upload the image via Content > Images & Files.)

For custom item types, you can achieve the same result by adding a custom field to the item and choosing "Related Assets" as the field type.

Accessing the Image

Once an image has been associated with an article or database item, you can access it easily within the item context. You should test to see if there is an associated image before attempting to use it, since some items may not have one.

Here's a simple example, which is indended for use on an Item page that is displaying an article:

<w:kb:item>
  <h1><w:title /></h1>         <!-- article title -->
  <w:unless condition="icon.blank?">
      <img src="<w:icon />" >    <!-- image associated with the article -->
  </w:unless>
  <w:body />                   <!-- body of the article -->
</w:kb:item>

Using Renditions

You can also specify a rendition (a resized version of the image) to be used, simply by specifying it in the w:icon tag:

<img src="<w:icon rendition='medium' />" />

(See Creating and Accessing Image Renditions to learn how to have renditions automatically created when you upload images.)

This is especially handy if you want to show a smaller version of the icon on summary pages where you're showing just the article excerpt. For example, you might use something like:

<w:kb:item:each category="cats"> <!-- repeat for all the articles about cats -->
  <h1><w:title /></h1>           <!-- article title -->
  <w:unless condition="icon.blank?">
      <img src="<w:icon rendition='thumb' />" > <!-- image associated with the article -->
  </w:unless>
  <w:excerpt />                     <!-- excerpt of the article -->
  <a href="<w:path url='/item'>">Read more...</a>
</w:kb:item:each>

If you want to access image metadata, such as the caption, then use the two-part form of the w:icon tag, as this example shows:

<w:icon:assets>
    <img src="<w:path rendition='medium' />" />
    <p><w:assets:get name="caption" /></p>
</w:icon:assets>

If there is any doubt about the existence of the rendition, you can also preface the <img> tag with <w:if_rendition name='medium'> (and follow it with </w:if_rendition>).