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>
Profile images should be 750x750 or larger, but make sure to maintain square proportion. 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.