Special Collections MiddHistory
- 1 Index
- 2 About
- 3 Instructions
- 3.1 Edit a Timeline
- 3.2 Create a New Module
- 4 Overview of Architecture
- Edit a Timeline
- Create a New Module
- Overview of Architecture
MiddHist is a custom site which lives on the middarchive(formerly maozi consult Brian Carson) server. It was built in 2008/9 by Brendan Owens and Brendan Smith. The site is designed as a portal into multiple ContentDM collections. It features a time line a custom search menu and module based pages. Module based pages allow administrators to add new modules by simply editing a few lines of code, duplicating some files and creating a few new directories.
Edit a Timeline
Through the administration interface it is possible to edit the currently existing time lines. In this section there is first an explanation of how to generally approach manipulating the time lines and then a more in depth discussion of each of the areas of the administration panel.
Add an Item
- Log in to the admin panel
- You should find the drop down menuand then choose the time line you want to edit.
- if you want to auto fill the item using a CDM link
- Find the box titled "Directly from CDM"
- Open a new window or tab to Middlebury's instance of ContentDM
- Browse ContentDM to find an image (images must be simple not compound or the process will fail
- Copy the URL of the item in content DM from the address bar/field of your browser
- Paste that URL into the CDM link box
- Then give a name and title in the CDM title box
- and a date in the CDM date box
- finally press the submit button
- this copies the image to the current image folder for the current timeline, finds the links for the current current item and then populates the date and title field in the Add to Currently Selected Timeline field
- Now just fill in the blurb box with a paragraph of text less than 515 characters in length including white space.
- Finally press submit new. The new timeline element will show up at the bottom of the list of elements. If you want to move the element click it and then move it into the swap space by clicking the swap space. Then click it in the swap space and move it back to the timeline in one of the slots between the items in the timeline. See the description of the list and swap for more details.
- If you want to manually upload an image and manually fill in the date and title but automatically generate links it is possible to do so. This is an option for complex objects where you may need to download and photoshop an image before it is uploaded.
- Follow the instructions above but do not press the "submit new" button.
- To upload a new image from your local machine find the add to images folder field.
- Press the browse button and find the item on your local machine.
- Give the item a name
- Press upload button. This moves your image into the images folder for the timeline. The "Directly to CDM" field does the same thing with a ContentDM image automatically.
- Now press the image button. This brings up a list of all the images in the images folder. Clicking on one of the items in this list links that image by replacing the text in the field next to the image button. You can then change the date and name of any of the items in the "Add to Currently Selected Timeline" field.
- Finally press "submit new" this new item will appear in the list of timeline items.
Delete an Item
- Delete an item from the list of items on the left side of the screen
- To protect you from yourself you cannot directly delete a time line element. You must first move it to the swap folder. To do this you must first activate an item by clicking it.
- Then you can click on the box labeled swap. This moves the item from the time line to the swap space.
- You could then go to the next step to permanently delete the item. Another option is to use the drop down menu to go to a different time line then add the item from the swap folder into this time line.
Edit an Item
- Activate (object will turn blue) an object in the list.
- Click the edit button this will input the object's information into the
"Add to Currently Selected Timeline" fields. Make the desired changes to the fields. Be careful of the links.
- Press the submit edit button
Add to Currently Selected Timeline
This is where the actual time line element is built. Each section corresponds to a parts of the front end interface for the timeline.
- Date - is the number that appears under the element in the scrolling view of the timeline.
- Blurb - is the information that appears underneath or to the side of the picture in detail mode.
- Image - is a is the image that will be displayed in both the scrolling view and the detail view of the timeline.
- The button images to the side of the text field displays all the images in the image folder for that timeline.
- Title - Is the title of the element that displays in the detail view. It is especially important that this match something in ContentDM because one of the links executes a search based on this title.
- DM Links 1 - is a link to the item in allows you to browse the collection to which the item belongs
- DM Links 2 - executes a search by the item in ContentDM
- DM Links 3 - is a link to the item in ContentDM
Add to Images Folder
This is the place where you can add a photoshoped or non-ContentDM image to the images list in "Add to Currently Selected Timeline"
- Location - Allows you to browse your own computer for files.
- Name - Allows you to give the image a unique name so that it is easy to identify in the images folder.
Directly from CDM
This allows you to upload an image directly from ContentDM and it also autofills some of the fields in "Add to Currently Selected Timeline"
- Link - is the URL of an item in ContentDM. You must give a link from the item level of ContentDM for this to function correctly.
- Title - is the title of the image in the detail view of timeline. After you hit submit in this box this value can be changed in the "Add to Currently Selected Timeline" box before it is finally submitted.
- Date - is the date as displayed in the scrolling view of the timeline. After you hit submit in this box this value can be changed in the "Add to Currently Selected Timeline" box before it is finally submitted.
- The submit button - causes the information in the box to be sent processed. The result is that the image from ContentDM is copied into the images folder, links are generated and the title and date fields in "Add to Currently Selected Timeline" are autofilled.
- Clear Forms - Clears all forms and selections on the page.
The swap is the bottom right hand column. It remains constant no matter which timeline you are editing.
- The grey boxes in swap - can be clicked and then moved to the list of time line elements or you can press the delete button to permanently remove the item.
- The delete button - deletes the first item in the swap list. If there are 20 items in swap it must be clicked 20 times to delete them all.
The list is the bottom left column. It displays the items and their order as they will appear in the scrolling view of the timeline.
- The drop down menu - allows you to choose which timeline you are working on.
- The edit selection button - Allows you to view all of the fields for an item in the timeline change these fields and then press the submit edit button to make these changes permanent.
- The pink spaces - are place holders. Items from the swap can be moved into these spaces to reorder the list.
- The grey boxes - are the items in the list. They can be clicked and then edited or clicked and then moved to swap. From swap they can be deleted or moved back into one of the place holders.
Create a New Module
FTP and Server Location
Code to copy into new .PHP
Lines of code to edit in front-end pages
Lines of code to edit in admin pages
Adding Menu Buttons
Overview of Architecture
How It Works(for users)
The site uses a couple of technologies to achieve its dynamic front end. When the page loads and the timeline elements start scrolling all of the elements for the entire page are read out of a database and stored onto the users computer. Then they are manipulated to achieve the visual effects.