6. Modify content fields in Airship CMS Admin

When you want to create new content fields in Airship CMS Admin, you must modify the content fields on the page, add the new content to the newly created fields, and update the page template by adding the new markup for the fields. To modify the content fields for your homepage:

Render available page variables with {{{help}}}.

On the root.html template add the following markup after the closing </div> of the <div class="content"> element. This will render the variables that are available within the scope of the homepage.

{{{help}}}
Copied!

Added {{{help}}} to the template

Save the file.

In your browser, refresh your local site.

{{{help}}} rendered as a list

You will see a list of variables that can be rendered on the current template.

The items listed inside the fields property correspond to content fields that have been set in the Airship CMS Admin Wrench Icon Modify tab for the current page.

Simple variables that are text and textarea field types can be rendered with {{fields.variable_name}}. Some variables have additional properties that can be found in the Airship Docs.

Modify the content fields.

Navigate to the Wrench Icon Modify tab for the current page.

Homepage Modify tab

Delete the Color Theme radio field.

Add a new field with Title Meme and Type Image.

Homepage fields modified tab

Save your changes.

If you refresh your local page now, you won't see anything different yet because you haven't added any content to the new empty "Meme" field.

Add content to the new field.

Navigate to the Wrench Icon Edit tab for the page.

Upload an image to the new "Meme" field.

Give the image a Title and Caption.

Meme added to the page

Click Add to collapse the image details box.

Save the page.

If you refresh your local page now, you still won't see anything different yet because you haven't added the new field to the page template.

Render the content field on your homepage template.

Refresh the browser for your local site. You will see the new content field variable meme has been added to the list of available page variables.

{{{help}}} shows new image field

After <p>{{fields.notes}}</p>, add the following markup to render the "Meme" image on the page.

<p>
  <img 
    src="{{fields.meme.secure_url}}" 
    alt="{{fields.meme.caption}}" 
    width="350" />
</p>
<p>{{fields.meme.title}}</p>
Copied!

Your code should look like this:

Code to render image added to the page

See the content update only locally.

When you refresh your local site url you will see the updated content.

Local Site: http://localhost:9001

Meme rendered on the page

You won't see any changes yet on the live site.


Next: Build the layout for your site