Use thumbnails and banner images

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.
   
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.)
   
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:

In 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;
}