Formatting, Images, and Markdown in GridIron

GridIron is more than just a way to show data — it allows you to create visually rich tables, lists, and grids by adding images, text formatting, and even links, using either simple HTML tags or Markdown.

This guide explains how to do exactly that, with easy-to-follow examples you can copy and paste into your own datasets.

Where Does Formatting Go?

Formatting is added directly into your data source — whether that’s:

• A CSV file
• An Excel spreadsheet
• A Google Sheet
• A MySQL table
• Or TotalCMS

Each cell (or field) of your data can include:

• HTML tags for fine control and styling
• Or Markdown for simple formatting that’s easier to type

GridIron automatically renders these formats as HTML on the final web page.

Basic Formatting Examples

You can apply formatting to any text field in your dataset. Just insert one of the following into your data.

Bold and Italics

Using HTML:

<b>Bold text</b>
<i>Italic text</i>

Using Markdown:

**Bold text**
*Italic text*

Tip: Be careful not to mix both HTML and Markdown in the same field — stick to one style to avoid confusion.

Links

You can link to another website or page from within your data.

HTML:

<a href="https://example.com">Visit Site</a>

Markdown:

[Visit Site](https://example.com)

You can use this in any column — for example, to add “More Info” links beside each entry.

Images

You can display images inside GridIron layouts by adding an <img> tag or Markdown image syntax.

Using HTML:

<img src="https://example.com/image.jpg" alt="Dog" width="450" height="300">

• src is the image URL
• alt is the alternative text (for accessibility)
• width (optional) sets the pixel width size
• height (optional) sets the pixel height size

Using Markdown:

![Dog](https://example.com/image.jpg)

Most newer themes and frameworks you use with RapidWeaver or Stacks Pro will scale images responsively to fit the container or screen size.

You must host your image somewhere accessible online. You can upload it to your own server, add it as a site resource, use an image hosting service, or upload to a Concrete CMS or WordPress Media Library.

Other Useful HTML Tags

Here are a few additional tags you might want to use:

Avoid using <script>, <style>, or other potentially unsafe tags — GridIron blocks them for security.

In Practice: Sample CSV Entry

Here’s what a row in your CSV file might look like:

Name,Image,Description
Buddy,<img src="https://example.com/dog.jpg" width="100">,"**Friendly** Labrador who loves to play."

When GridIron displays it, you’ll see:

• The image of Buddy
• “Friendly” in bold
• Everything properly laid out in your chosen layout (table, grid, etc.)

Tip for Spreadsheet Users

If you’re working in Excel, LibreOffice, or Google Sheets:

• You can paste Markdown or HTML directly into a cell
• Be sure to save the file as CSV (UTF-8) if exporting for upload
• Don’t surround HTML tags with extra quotation marks unless required by your software

Common Pitfalls to Avoid

Styling Further with CSS

For advanced users, you can apply custom CSS to style your HTML. Add a <span class="my-style"> around your content, then define the style in your site’s CSS.

Example:

<span class="highlight">Training Tip</span>

.highlight {
  background: yellow;
  font-weight: bold;
}

Summary

• GridIron supports both HTML and Markdown for formatting
• You can add images, links, formatting, and structure
• Great for making data more readable, visual, and engaging
• Be sure to test your formatting in Preview mode before publishing