Technology Team Report
As members of the technology group we were responsible for streamlining the CMS, Omeka, and collaborating with the design team in order to integrate their recommendations for improving the look and usability of the Lesbian Herstory Archives Digital Collections’ website. Our ultimate goal was to improve upon the existing content and platform which had been created and maintained by previous classes. In this report we’ll discuss what we were able to accomplish within the semester’s time constraints and some challenges we encountered along the way. Lastly, we will offer some recommendations for future improvements.
- Tasks Accomplished
We upgraded Omeka powering our site from 1.5 to 2.0. We edited the PHP and CSS files to switch the content on the item pages in the right and left columns. The video file was originally in the right column, and we moved it to the larger left column, and we moved the metadata from the left column to the right column. We suppressed the “Dublin Core” header (by simply deleting it from the PHP) and some of the metadata fields (with an easy-to-use plugin). (See Figure 2)
The design team had asked for the metadata on the item page to be in the right column, but the metadata team wanted some of the fields suppressed, and with less metadata to display, we decided to keep the metadata in the left column. (See Figure 3)
We also switched the content in the columns on the homepage, moving the description section to the top of the left column and the featured item and collection to the right column. We stopped the recently added items from displaying on the homepage. We edited the layout of the navigation bar and the homepage for spacing and changed the colors. (See Figure 5)
When we began changing the colors in the CSS we started by using Google Chrome’s Inspect Element feature. We wanted to find out what the color code was for the navigation bar and then search for it in the CSS. While Inspect Element would state where the information was located it did not match up with the CSS sheet so we found it easier to search for it using the color code and changing it first to find out what it affected in the site. The style sheet was not clearly labeled and we were playing a guessing game to see what did what before we figured out the pattern. Once we understood what part of the CSS controlled what in the website it was easier to change the parts we wanted.
The first colors we changed were on the navigation bar as it was a brownish red after we updated Omeka, and it did not fit the color scheme that we wanted. We were easily able to change the red to a similar shade of purple that the original website was using after we found where in the CSS we had to change it. Once the navigation bar was done we changed the link color from yellow to white and the hover link color to yellow, as the mock-ups showed. (See Figure 6)
The design group wanted to improve the header and the footer of the page. Previously, the header simply held a logo and the collection name (see Figure 4), with a disjointed looking photo bar underneath it. The footer was Omeka’s standard footer, which contained navigation links to the collections and other parts of the website, with no added information about the LHA. The design team wanted to clean both up by getting rid of the photo bar and adding a photo to the header, and inserting some contact information in the footer, along with the LHA’s logo as a clickable link that could direct the user to the LHA homepage. The photo bar was removed by going into Omeka’s “Appearances” and “Configure Theme” and removing the image.
The header was relatively simple to update, once it was clear where the header and footer, along with other theme aspects, were edited within the Omeka admin site. In order to find that, we had to go to “Appearances” and then to “Configure Theme,” which then brought us to a platform where we could edit content, but in a controlled manner (i.e. text boxes that would only allow so much editing). The image the design team gave us was the logo and collection name superimposed onto a purple toned image from the LHA. Omeka recommended images that were 500 pixels, but on uploading the image at that size, it was found to be too small and unaligned on the page. In order to change the size of the image, we used Photoshop’s “Save for Web” options and tested out different sizes, until one fit the space allotted. At 880 x 245 pixels, the header fit perfectly into the center of the page (see Figure 5).
The footer was not as easy to manipulate as the header. While Omeka did have a content box for footer content, it was very limited as to what was in it (text only) and where it appeared (only at the lower left corner of the page). The design team had wanted a footer that began with a clickable logo that led back to the Lesbian Herstory Archives Page on the lower left side and continued across the bottom with the address and phone number of the LHA in a single line of text. They wanted to completely get rid of the automatic navigation links that Omeka comes with.
To implement this change, we tried first to put the logo into the text box in the Omeka admin page using the “text” option, which allows the user to see some of the surrounding code. This was able to hold the image in the text box, but once the “Save” button was hit, the logo would disappear completely from the page. After consulting some Omeka help pages and forums, it was clear that we needed to go in through the backend and change the code of the footer in order to insert the logo, let alone let it link back to the LHA. The footer file was found in two places: one was within the Theme folders, and the other was within the Admin folders. Later, we would discover that in order to truly implement the change on the website, the updated code file needed to be in both places. First, we created a file in the “emiglio” and “admin” folders called “images” and placed the logo there. To insert the logo, we inserted some HTML into the primarily PHP code of the “common.” This also allowed the logo to be a clickable link back to the LHA’s main website.
In this code file, we were also able to remove the Omeka navigation links that were previously at the bottom of the page. To do this, we located the code within the PHP file and simply deleted it, uploading the new file into the backend of the website using FireFTP. After we were successfully able to insert a clickable link, we went back and adjusted the logo size to better fit the space it appeared.
Another item that the design team asked us to address was the white space between the header and the navigation bar. Initially, it took us a few tries to find where the problem was in the style sheet but after we found it, it was an easy fix. The padding was as at a high number but once we reduced it to zero on all four sides we were left with the small space that is still there, that we were unable to remove. We concluded that the size of the header image and the size of the header container was the ultimate cause of this.
After we finished working on the navigation bar we moved onto the featured item and collection boxes. When we had updated Omeka we also updated the theme Emiglio and it left the colors of the boxes two different shades of green. On the original website, these boxes had a black bottom with a purple header, and we changed the colors back to that. Once we were able to do that we changed the font white so that they would blend with the background colors better. However, the design team came back to us and asked us to make the box white instead of black. Initially, when we did this we had some problems as we seemed to have lost the boxes and the information within them, but we were able to work out the problem by editing a different portion of the CSS.
Only after we finished the feature boxes did we notice that the search box also had the same green shading. The design team asked that we make it the same purple color as the header, and so we had to find where that was located in the style sheet. It took us a little time but we were able to find it by searching for the color code in Dreamweaver to find where it was located.
We were able to do most of what the design team wanted for the homepage: moving the featured areas to the right column and formatting the right column with the combined about and homepage text. (See Figure 6) First we attempted to change the formatting within the CSS, but adding columns changed the appearance of the page, but not the arrangement of the content. By editing the PHP, we could manipulate which part of the layout the content appeared in. The featured item, featured collection, and recently added item (which was ultimately removed) boxes were in a section of the PHP labeled #primary, which displayed them in the right column. By moving these boxes into the #secondary section, they appeared in the left column. There was also an #intro section on the homepage, but we did not put any content in that section, leaving the main description in the #primary section.
Similarly for the item pages, we tried the same method of changing the layout of the columns in the CSS, but by moving the content we wanted on the left side to the #secondary section of the PHP, we could essentially swap the columns. Instead of swapping the columns, what we did that worked was swapping the content, by putting it in a different section of the PHP.
Part of the new design aesthetic involved simplifying the live site by combining text from multiple pages and removing unnecessary information. The first thing we did to address this request was combine the about page and the homepage. We eliminated the about page and navigation tab and centralized the information on the homepage. (See Figure 5) Users can now learn a little bit about The Lesbian Herstory Archive, the digital collections, and easily locate contact information in one place. These changes resulted in an improved, straightforward home page and only two navigation tabs, Home and Collections
Outside of implementing the design teams’ request, one of the largest tasks was getting all of the videos we digitized uploaded into the backend of our development site. We added the Dropbox plugin to Omeka, as well as a FTP/SFTP client to our browsers to optimize the transfer of files. The metadata team organized the compressed .mov files into an folder on the network. Unfortunately, because we could only access the network from Pratt’s computers during class time, this was a pretty time consuming process.
The first attempt to ingest the compressed files into Omeka prompted an error message indicating that there was not enough available space on our server. This issues had to be resolved by sending a note to the web host to increase the amount of disk space in the /tmp share folder. Once all the video files were in the Dropbox (See Figure 12) we had to upload each video as an item. (See Figure 13) Each time a new video was added we then assigned it to an existing collection or created a new one. All videos were then placed within the Lesbian Herstory Archives Daughters of Bilitis Video Project parent collection.
We entered Dublin Core and Item Type metadata for each item that was uploaded. Upon performing a cursory quality control check on existing items, we noticed that the metadata assigned to items from previous semesters required updating. We had to go through every item hosted on Omeka to input the correct contact information for the Lesbian Herstory Archive.
Additionally, we took and uploaded screenshots of the videos for each item, so images of each interviewees would appear below their names on the collection pages. For a few interviewees, the research group provided us photographs from the LHA to use.
- Tasks Not Accomplished
We were unable to layer the navigation on top of the header image, and we were unable to move the search bar below the header image on the homepage. (See Figure 6)
We believe this is an impossibility with Omeka, but we were unable to have all of the item files playable from the collection page, as requested by the design team. (See Figure 9)
We were also unable to add a drop-down option to the collection tree, as the design team requested, due to time and skill constraints.
We did not add breadcrumbs to the pages and change the names of the collections. The design team suggested changing the names of the collections to just the names of the person interviewed in the collection and removing “LHA Daughters of Bilitis Video Project.” However, LHA wanted that title included with the collections. Breadcrumbs were suggested to show that the collection, and the items contained in it, were part of the DOB video project. Due to time constraints, we did not add breadcrumbs to the site, and we left “LHA DOB Video Project” in the collection title.
- Future Directions for the Project
With more time, we would be able to add breadcrumbs to the site and possibly overlay the navigation bar on the header image. We would like to make the collection tree a drop-down, as well as change the names of the collections, to streamline both of those.