Web Page Content
Content on the UTHSC website should adhere to the following guidelines. The UTHSC Office of Communications and Marketing also has editorial guidelines that explain how to use certain grammar throughout the website, and how to refer to UT and its institutions.
Important Notes:
- Ampersands (&) are not allowed.
- Phone numbers should use periods rather than dashes (i.e. 123.456.7890).
- Degrees should not have periods (i.e. PhD). Anything beyond a bachelor’s degree should be noted (i.e., John Smith, MBA).
Snippets are a type of reusable content that insert predefined content into a page while editing. The snippet content is then edited in the WYSIWYG editor without affecting the original snippet file. Snippets are often used for pieces of content with specific formatting, such as tables, buttons, and displaying quotes or images. Using snippets for design elements ensures consistent styling across pages.
Snippet creation and management is accessible to level 9 and 10 users only, but any level user can place a snippet on a page.
To insert a snippet on a page you're editing:
- While in an editable region, select the "Insert Snippet" (puzzle piece)icon.
- Choose a snippet to add to the page. You can use the top dropdown to view a specific category, or filter snippets by name. Snippets are previewed on the right-hand side, but not all snippet styling renders, as some of that depends on which page the snippet is placed in.
- Click Insert to place the snippet on the page.
- Fill out the snippet as desired with content. Oftentimes, a snippet appears one way while editing and another in the page preview. A common type of snippet is a table transformation, where the snippet appears in the editable region as a table that you fill out. Then, when you save and preview, the information you entered in the table is placed in more complex styling.
- Save your changes and exit the editable region to see how the snippet displays.
Removing a snippet from a page depends on the snippet content. If it's a table, right-click the table and select "Delete Table." Otherwise, click and drag your cursor to highlight the unwanted content, and then hit Backspace or Delete.
Photos used on the website should be taken by the UTHSC photographer or an approved freelancer. Stock photos are not allowed. If you are uncertain about a photo, contact the Webmaster. Photos should be appropriate to the subject matter of the website.
Libris by Photoshelter is the official location for UTHSC photos. To download a specific photo or request usage approval, send the photo URL to photos@uthsc.edu.
Avoid setting images to a fixed size. Changing images significantly larger or smaller than the actual image size creates problems when viewing the content.
Displaying a large image at a small size (rather than editing the image to a smaller
size) still requires the user to download the large image. To resize an image, select
the image in the image folder (you might have to wait a moment for large files to
load, and use the “Resize” tool on the left to bring down the image size.
Displaying a small image at a larger size than the original resolution of the image
degrades the image quality. It is best to ask for a higher resolution image, if possible.
Alt parameters are required for all photos. Alt parameters are the description of the image used by screen readers.
Sizing
- Headshot dimensions are 150x225 on the page.
- Hero images should be a minimum of 2000 pixels wide.
Insert/Edit Image
To add an image onto a page:
- While editing an editable region, click the "Insert/Edit Image" icon in the toolbar.
- In the "Source" field, click the "Browse" icon to search for an image. You can toggle between a list and a thumbnail view by clicking the icons to the right of the filter field. Use the breadcrumbs to move to a different folder, and filter by image name or tags if necessary.
- Once you've chosen your image, click "Insert."
- Enter a value in the "Image Description" field. This is required for accessibility reasons.
- You can also enter a "Tooltip," which is the text that displays when someone hovers their cursor over the image.
- If you want, modify the dimensions of the image, and/or add a style from the "Class" dropdown. Use a percentage for responsive image sizing, or a pixel value.
- Click "Insert." Your image is now on the page!
Appearance Tab
The "Appearance" tab of the Insert/Edit Image box has some additional options for how your image looks.
- Alignment: Sets the alignment of the image against the text, e.g. left, right, center.
- Dimensions*: Sets the height and width of the image. If "Constrain Proportions" is checked, the image keeps its original height-to-width ratio.
- Vertical Space: Sets the amount of space between the top and bottom sides of the content area and the image.
- Horizontal Space: Sets the amount of space between the left and right sides of the content area and the image.
- Border: Sets the width of the image border. You can modify the color and style of the border in the "Style" field.
- Class: Adds a style to the image.
- Style: Based on the appearance options you set, the styling code auto-completes in this field. You can also manually edit the styling here.
Videos must either be uploaded to a secondary sharing site like YouTube or Vimeo; or uploaded to Mediaserver before being linked or embedded on the UTHSC website. If videos are on YouTube, they should be under a department/office account that is linked to a department or office email address. DO NOT USE YOUR PERSONAL ACCOUNT.
To insert a video onto a webpage:
- While editing an editable region, click the "Insert Snippet" icon in the toolbar.
- Select the Video snippet.
- Answer the appropriate questions in the instructions.
- Insert the video inside the video snippet, using the "Insert/Edit Video" icon in the toolbar.
- Click on Embed Code.
- Paste in the Embed Code of the video you want to add to the webpage.
Dependency Tags
Every page, document and image uploaded to Omni CMS are given a unique dependency tag identifier. By inserting a dependency tag in a link, content throughout the site will be automatically updated when the linked content is moved or renamed.
Using the search icon to the right of the URL field, navigate to the specific page you are linking to to populate the dependency tag.
Links to PDFs or Images
Removing a link to a PDF does not remove the PDF. Even once the link is gone, the PDF will remain live and thus searchable through Google or other search engines. If you wish to remove both the link and the PDF, you should remove the link, and contact the Webmaster to delete the PDF file from the production server.
Documents
To upload a document:
- Click on the "documents" folder of the section you are wanting to add a new document to.
- Click the "Upload" button at the top of the menu.
- Select the green +Add button and select the document you would like to add.
- Make sure your document is all lowercase and does not have special characters.
- Select the Start Upload button.
Document Best Practices
When naming documents, do not put the date in the name. Use hyphens in place of spaces, and name the document what it is. We recommend not putting dates in a name so that if the document is uploaded every year, we can simply overwrite it without having to relink it on the pages.
- Correct example: resident-application-form
- Incorrect example: residentapplicationform2019
When replacing old documents, select “upload” in the correct folder, select the new document with the same name, and check the “overwrite existing” checkbox. Once the file is uploaded, publish the file.