VKC Website Components General Notes
Its very important to realize that page components in this site are reusable. This means that any changes to a component could change that content on many pages. For this reason the page editor has a button on each component on the page that will display the URLS in which the component is used. If you are in doubt it is best to duplicate a given component and place the copy on your page.
Its important to provide a description of each component you create for others to be able to figure out what it is easily. The description is only displayed in the content manager in most cases. In an image the description is used for the alt tag for screen readers.
The sort order on the page component in the content manager determine the order in which the components are drawn on the pages.
Redirect Component
A redirect component will redirect the URL of the page to another URL. Any redirect component on a page with redirect the page rendering any other components on the page as obsolete. This is designed just to provide redirect URLS in a simple way.
Main Menu Component
This component allows for editing of the main menu on a page. The menu structure and URLS that are displayed when clicked are editable in the content manager. The main menu component allows for one level of drop down submenus. In general a main menu should be placed on any page that is not a simple redirect.
Side Menu Component
This component allows for a side menu to be placed on a page. The side menu component does not allows for dropdowns and should generally be placed after a headline in the sort order and in the content third page location.
Image Changer Component
The image changer component will take the whole page width and should be near the top of the sort order on any page, after the main menu.
The component is designed to show a caption in the blue area on the right and a picture which should be sized or scale well to 600 by 300 pixels. In the component editor the picture file should begin with a / and contain the path on the server to the picture then the name. For example:
/assets/images/homepage/BrainAwareness2013_1.jpg
While it is not technically required that the picture be in /assets/images/, that is the preferred location we should use. Web editors will need to manually size and place pictures in the folder.
To add a shortcut to the assets older on a PC… Right click your desktop. Pick new then shortcut, in the location put:
All files and picture assets should be in that folder for consistency. User can make subfolders as needed and make sub folder names that make sense to allow others to find the asset easily.
Image Component
An image component image can be any size but should not exceed the usable page width. The placement of a general image is controlled in the content manager location drop down. The usable page width for this site is 800 pixels. Images can also be coding into HTML component blocks with an img tag. The image component itself does not support a caption but can be followed by and html block with a caption. See also the image block component below if a consistent caption is desired.
HTML Block Component
This component is used to put text or any other html markup on a page. The placement is done with style sheets and those styles are selectable in the html bloc editor screen. Paragraph tags should be used at minimum and when pasting in html be careful to remove <div> tags unless you are using them in your html. One page can contain as many html block as you need.
File Link Component
A file link component provides a way to easily place a link to a file with a short description above it. This does not require writing the <a href> tag to the file. However, in many cases as with lists of files, it may be preferable to use an HTML block depending on the formatting situation you want to implement.
Video Component
This component allows for easy placement of a video on a page. The video must be on the Vanderbilt streaming server in the VKC directory to use this component.
Headline Component
A headline component provides a formatted headline on a page to provide a consistent look for a page headline. Headline can be used other places but are normally at the top of a page.
Image Block Component
The image block component displays a single image with a caption in blue next to it. It is designed to go in the right 2/3rd of the page like this page:
http://vkc.mc.vanderbilt.edu/vkc/about/
Images should be 230 pixels high and 230-300 pixels wide. Like the image changer component, images should be placed in the /assets/image folder somewhere.