Content Creation Technical Guidelines

Text Formatting

Quote Style

To use the quote style (yellow bars on left and right), format the text as a quote using the " button in the editor.

Callout Style

To use a callout style (pink bar), format the text using the Callout item in the Formats menu.

 

Homepage

This information pertains to the version of the homepage built around location-based questions. When new homepage experiments are installed, this section should be updated. To move a retired experiment to the Previous Experiments section requires developer assistance.

Adding New Items

Images

Images must be at least 1600x1600.

Location

The location text appears on the homepage, while the Location label field allows for text to appear in the bubble that appears over the map. To avoid wrapping, the Location Label should not be a full address with postal code and country.

A location must be set using the map in the editor in order to generate a map in the homepage.

Comments

Moderation

Comments are posted directly to the site, but can be managed in the Comments area.  New comments are only held for moderation based on a number of settings controlled in the Settings > Discussion area. Because comments are unmoderated, we recommend allowing an email to be sent to a person with comment moderation permissions so any inappropriate content can be noticed and removed quickly.

Exporting Comments

A special export feature has been created for comments. This tool appears in the Homepage admin section as a button that says Generate CSV. The resulting CSV file will include all comments, which can then be taken into a spreadsheet for counting, compiling, and so on. The data for these is quite rich, and anyone with a bit of data processing skill may have some good ideas for it.

 

Architecture + Design Case Studies

Cases studies are photo-rich, and use several different photo arrangements.

Hero photos must be at least 1600px wide and cropped to 16:9 ratio.

Three-image clusters use one tall image 533x948, along with two 839x572.

Map and street view images for the location slider should be 1000x600. The best way to create these images is to use a large screen and make your browser window as big as you can. After navigating in Google maps to the place you want to show, set the zoom and position so your location is centred, then take a screen shot. Crop each to the dimensions noted above and they are ready for upload.

About Us

Team

Team photos should be composed so that the subject is generally centred, and be 600x600 in size.

Direct Links

To create a direct link to a team member, type

hcma.ca/about/#firstname-lastname

Perspectives

Perspectives photos should also be composed so that the subject is generally centred, and be at least 1600 x 900 in size.

Publications

Direct Links

To create a link to a specific publication, trigger a share action while viewing that entry and direct the output to email (or any where you can edit the text before posting), and then copy the link that is inserted there. You do not need to complete the share action for the link to be valid. When the link is clicked, it will open to that publication entry.

Call to Action Button

When creating a new publication, the button can be directed to a website using a URL, or to trigger a new email using the following format:

<a href="mailto:name@hcma.ca?subject=The%20subject%20of%20the%20mail">Button Label</a>

Important: the text specified for the subject must use the %20 to indicate spaces, and should not include any special characters like & or * or ". Be sure to test newly created or changed buttons!

AIR

Images

Cover images should be at least 1400px on both sides and 16:9 ratio. A size of 2500x2500 is ideal. A caption for these images can be added, and if a link is desired it can be added by specifying a link following this example:

Illustrated by Tylor "Gonzo" Sherman <a href="https://twitter.com/tylorsherman">@tylorsherman</a>

Non-cover images should be at least 533 wide x 948 high. Wide images need to be  839 wide x 472 high at minimum.

Direct Links

To create a link to a specific AIR entry, trigger a share action while viewing that entry and direct the output to email (or any where you can edit the text before posting), and then copy the link that is inserted there. You do not need to complete the share action for the link to be valid. When the link is clicked, it will open to that AIR entry.

Open Assets

Files

The files associated with an open assets entry must be zipped into a single package. Ensure that the file name of the resulting zip mirrors the name of the open asset entry.

Preview Images

Preview images for open assets are inserted using the text editor's Add Media tool, and ensuring that the medium size option is selected. Images will work better if inserted together.

Tilt Moments

Video
In general, the best way to use video in a Tilt Moment is to have it on YouTube or Vimeo and then to post the URL to that video in the moment, where the system will properly fetch and show the video.

If you want to host a video directly on the site and use it in a Tilt moment, you'll need to first upload it using the Media Gallery tool, and then use the following as your Tilt Moment content:

The SRC value in quotes is the URL that is given by the Media Gallery if you tried to insert the video directly into the post. The text after the SRC is the label for the video, and is optional.

News + Events

Images

Feature images should be at least 1600px wide. Non-feature images can be smaller, but in general not smaller than 640px wide or they'll just look too tiny to fit in.