How to Use the Article Templates
A plain-English guide. No HTML experience required.
The four files
You have four HTML files. Here's what each one does:
The main articles page
The page visitors land on. Shows all articles in a grid. You update this every time a new article goes live.
Member spotlight template
Use this for member stories and community features. Gold accent color.
Program update template
Use this for Chamber program news and issue-driven articles. Green accent color.
This guide
Keep this for reference. You're reading it now.
How to publish a new article
Every time you publish an article, you do two things: (1) create a new article page, and (2) add a card to the index page. Here's the full process:
Step 1 — Create the article page
- Decide which template to use. Spotlight for member/community stories. Program update for Chamber initiatives and issue articles.
- Open the correct template file in a plain text editor (Notepad on Windows, TextEdit on Mac — set to plain text mode). Do not open it in Word.
- Use File → Save As to save a copy with a new name. Name it something short and descriptive with no spaces, like:
article-jane-smith-bakery.htmlorarticle-enterprise-zone-2026.html - Fill in the fields marked REPLACE (explained in detail below).
- Upload the finished file to ChamberMaster as a new page. The URL it creates is the link you'll use everywhere.
Step 2 — Add the card to the index page
- Open
articles-index.htmlin your text editor. - Find the section that says
article-grid. You'll see blocks labeled<!-- ARTICLE CARD -->. - Copy one entire card block — from
<!-- ARTICLE CARD -->to<!-- END ARTICLE CARD -->. - Paste it above the first existing card. Newest articles always go first.
- Fill in the photo, date, headline, preview sentence, author, and link for the new article.
- If you now have more than 6 cards in the grid, delete the oldest one at the bottom.
- Also update the featured article at the top of the index page to match your newest article.
- Save and re-upload
articles-index.htmlto replace the existing index page.
What to replace in the templates
Every field you need to update is marked with a comment that says REPLACE in capital letters. Here's a reference for each one:
| Field | What to put there | Example |
|---|---|---|
| Page title (top of file) | The article headline followed by the Chamber name | How Jane Smith Built Main Street Bakery | Aurora Chamber |
| Breadcrumb text | A short version of the headline (3-5 words) | Jane Smith, Main Street Bakery |
| Publication date | Month and year of publication | May 2026 |
| Article headline (h1) | The full headline exactly as written | From One Table to a Full House |
| Author initials | First and last initial of the author, in capital letters | JS (for Jane Smith) |
| Author name + title | Full name and their role or organization | Jane Smith | Owner, Main Street Bakery |
| Hero image URL | The full web address of the photo (must start with https://) | https://growthzonecmsprodeastus.azureedge.net/... |
| Photo caption | One sentence describing the photo. Delete the line if not needed. | Jane Smith behind the counter at Main Street Bakery. |
| Article paragraphs | The article text. Each paragraph goes between <p> and </p> tags. | See formatting guide below. |
| Connect / CTA box | How readers reach the person or take the next step. | Website, Instagram handle, email, or phone |
| Author bio | 1-2 sentence background on the author. | Jane has been baking professionally since 2016... |
| "More articles" cards | Links to 2 other recent articles. Update title and href. | The titles and links to your two most recent other articles |
Formatting the article text
The article body lives inside a section labeled article-content. Here are the only formatting codes you'll need:
Regular paragraph
Section heading (if the article has named sections)
Pull quote (a short, impactful line set apart from the text)
Adding a second photo mid-article
<figure class="article-photo"> block in the template and delete everything from that opening tag to the matching </figure> tag.
Using an author headshot instead of initials
In both the header and the author bio, you'll see a byline-avatar or bio-avatar section. By default it shows initials. To use a photo instead:
- Delete the initials (e.g.
JS) - In its place, type:
<img src="PHOTO-URL-HERE" alt="Author Name"> - Replace
PHOTO-URL-HEREwith the full web address of the headshot photo.
How to get a photo URL
All photos need to be hosted online — you can't use a photo from your desktop. Here's the easiest way:
- Upload the photo to the Chamber's media library in ChamberMaster (or your SharePoint/OneDrive).
- Once uploaded, right-click on the photo and choose Copy image address (Chrome) or Copy image link (other browsers).
- Paste that address in place of the placeholder URL in the template.
Monthly publishing checklist
Use this checklist each time you publish. Do it twice a month — once for the spotlight, once for the program update.
Quick reference — when something looks wrong
| Problem | Likely cause | Fix |
|---|---|---|
| Photo isn't showing | The URL is broken or the photo isn't publicly accessible | Re-upload the photo and copy a fresh URL |
| Text looks strange or runs together | A <p> or </p> tag was accidentally deleted | Make sure every paragraph starts with <p> and ends with </p> |
| The page looks like plain code, not a formatted page | The file was opened in the wrong program (e.g. Word) | Close and reopen in Notepad or TextEdit |
| The breadcrumb still says the placeholder text | Forgot to update the breadcrumb field near the top of the file | Find "REPLACE: short article title for breadcrumb" and update it |
| The "More articles" section still shows placeholder titles | Forgot to update the bottom of the template | Scroll to the bottom of the file and update the three more-card blocks |
Aurora Chamber of Commerce | Article Template Guide v1.0 | Questions: rdevall@aurorachamber.org