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. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Select Article from the Select HTML section to edit dropdown.
4. Put your cursor where you'd like to insert the banner or thumbnail.
5. Copy the merge code you want to add:
   1. Banner:

      [article("banner")]

   2. Thumbnail:

      [article("thumbnail")]

6. Paste it where you'd like it to be displayed in your article.
   1. For example, you may want to put the banner in the article header and display the thumbnail next to the title:

      <div class="hg-article">			
          <div class="hg-article-header">	
          [article("thumbnail")]	
              [article("banner")]<h1 class="hg-article-title">[article("title")][article("action_icons")]</h1>	
              <div class="metadata">

7. 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, adding this Custom CSS would place the banner above and display the article thumbnail inline with the article title:

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