Use thumbnails and banner images

Thumbnail and banner images won't be displayed anywhere in your knowledge base automatically.

You can add one or both to your Custom HTML Article template using merge codes. To do so:

  1. Go to Settings > Style.
  2. Open the Custom HTML section below the preview pane.
  3. Select Article from the dropdown.
  4. Put your cursor where you'd like to insert the banner or thumbnail.
  5. Click the -- Select a Merge Code -- dropdown.
  6. Look for the Article Merge Codes section. The merge codes are called Banner Image and Thumbnail Image, respectively.
    Screenshot of the Style Settings page with the Select a Merge Code dropdown expanded and the Banner Image item highlighted
  7. Select the merge code you'd like to add, then click the Insert button. (or copy the merge code and paste it where you'd like it to go.)
    Screenshot of the Style Settings page with the Custom HTML pane shown, Article selected, with Banner Image selected in the merge code dropdown and an arrow pointing to the Insert button
  8. Be sure to Save your settings.

Styling your banner and thumbnail

You may need to rework the custom HTML a bit or add some custom CSS to size/style the images appropriately. For CSS, you can use these classes:

  • Banner image class: .article-banner
  • Thumbnail image class: .article-thumbnail

For example, this HTML adds both merge codes into the header portion of articles, right before the the article title:

Screenshot of the Style Settings Custom HTML for Article. The article banner and article thumbnail merge codes have been added under the hg-article-header div, before the h1 for hg-article-titleIn the Custom CSS tab, this CSS controls their positioning:

.article-banner {
  max-width: 100%;

.article-thumbnail {
  display: inline-block;
  width: 25px;
  vertical-align: inherit;
  margin-right: 1em;

.hg-article-page .hg-article-title {
  display: inline-block;