CCBER Drupal

This is the project development documentation for the new CCBER Drupal site.

Links

• CCBER Development Site: http://www-dev.ccber.ucsb.edu/
• Current CCBER site: http://ccber.ucsb.edu/
• Cross-browser testing: https://browserlab.adobe.com/

Structure

To make content editing on the paneled structure of the CCBER site simpler and more intuitive there are several layers to each page

• There are three primary content types for all content on the site

1. Text
2. Vertical image
3. Horizontal image

• Every node created as one of these content types requires the taxonomy term of the page that it will show up on

• The taxonomy follows the hierarchy of the sites menus (eg. the term for "Kids in Nature" is located within the term "Education")
• For each content type there is a view that displays all the nodes of the corresponding content type with the contextual filter NID, which is pulled from the URL arguments
• A "Page" containing a panel is created for each page on the site and uses the page context module to send the specified page term (the page name mentioned earlier in the taxonomy) as an argument to the view panes within the panel

Editing

• To make the content editing process simpler (to avoid having to type in the page name for every new text or image node), each view displays a link to a form that creates a new node for the page and content type that the user clicked
  • The + button above each view links to the add new node form for the content type that is displayed in the view
  • The link contains a URL parameter that tells the module zaddCBP to automatically make the newly created node contain the taxonomy term of the page that was linked from
  • For example, if you click the plus button in the text view on the "Kids in Nature" page, you will be directed to node/add/page-text?type=39 (39 is the node id for the kids in nature text node)

Pages That Have Been Built

• Home
  • Panel
• Kids in Nature
  • Panel
  • Partners
    • Panel
• News and Events
  • Panel
• Photo Gallery
  • View
• People
  • View
• Send-Email with argument NID

Navigation Bar

• Changed index to home

Nested Menus

• Nested menu now exists for home -- still need some styling
• Need the rest (only "Collections" has been done)

Page Structure

• Pages should all be made with panels (with the exception of those that are less static (eg. Image Gallery, News Blog)
• These are two columns with a top and bottom row
• Images should go in left column, text in right
• Each image and text paragraph should be its own node (of type Image/Photo or Page Text)
  • Each of these nodes should contain a taxonomy term for the page it should show on (eg. type "Collections" will show on the right column of the page "Collections"

News & Events

• Blog?
• What to do about Newsletters?
• All elements are on two column panel layout page
  • Added calendar, which floats to the left. News blog is at the bottom, but there will be a recent announcements widget at the top

Gallery

• Added content type for photos
• Created taxonomy for images based on page names
  • Could filter pages to display on page by this taxonomy or create a view that displays the images from several or all pages
• Built Photo Gallery view
• Added quicktabs to filter by taxonomy
• Header on Gallery page not showing up -- needs to be added to context filter

Wrapper

• Wrappers need to be shrunk to fit page

Fonts

Installed flowerchild font with @font-your-face, but wasn't able to edit panel title with panels css editor -- will wait for stylesheet access.

• The font for the page title is set in the @font-your-face configuration settings as strikeFlowerchild normal Parchment, a Papyrus look alike
• The size of the font is controlled by #page-title in the ccber.css stylesheet

Editing

• For text views, I created a nid edit field link at the top, which an administrator can click to edit each node.
  • This is added in the views-view-fields.tpl.php file, which grabs the hidden NID from the node in the view and prints it out in a link to the edit page for that node

Contact Form

• Anonymous and registered users can send staff emails via the send-email webform

1. This is done form the people profile node or the people view node by clicking "Send E-Mail"

Footers

• Contact us footer is block in footer first section that is styled in footer.css
• Main footer is located in html.tpl.php file under the page content, and is raw HTML styled in the footer.css stylesheet

Update

• Updated drupal on August 27th 2012
  • Gave warning for DB: "You have pending database updates. Run `drush updatedb` or visit update.php in your browser. [warning]

The following updates are pending:"

Modules We Need

• Webform
• Slideshow Views
• Field Permissions
• View Bulk Options
• JQuery Plugin in Libraries

Enabled Modules

zaddCBP PHP filter

• for adding intuitive content management links from each page
  • Each node can be edited by clicking the pencil icon
  • You can add content to any view by clicking the + icon at the top of that view

Questions

• Do we want to keep the nested menu style?
• How should we display annual reports?
• What should we use as the header on subpages and new pages
• Does the CCBER content type have the same data on bios as ERI?
  • Offices, Degrees etc?
• Profiles page?

Laurie and Jan Comments

1. Navigation and Sidebars-- They work fine and replace the second navigation line from our old pages. However, we feel they add more clutter overall with the addition of the other elements on the page. So, we have a couple of suggestions for this:
   1. Remove the Quick Links section from all pages. We don't feel this adds anything but redundancy and the links are very arbitrary.
   2. Can you extend the green color down the length of the navigation sidebar to the bottom or flush with the bottom of the text?
   3. Can the text in the sidebars be moved over towards the right a little, so it doesn't look like the arrows are falling off the left side? Perhaps this is a font detail that can be discussed later.
   4. Under Education/Kids in Nature, we noticed that the sidebar says [small font size] Kids in Nature and below that [larger font size] Kids in Nature. Why is this listed twice? Can you please delete the large one?
2. Alignment of images and text on Collections pages--
   1. We see the challenge of trying to align our varying number of images with our varying sizes of text. If we keep the vertical left column for images and the right wider column for text, one thing that might make the text line up better is the use of sub-headings. We noticed that the subheadings for the main Collections page are missing. Perhaps adding them in and adding some extra lines will balance the text with the images.
   2. We also would like to see a sample page where you use the top row (versus columns) for images with the text below. Some pages are laid out that way (see Botanical Collections, Diatoms, e.g.), and we thought that maybe if all pages had the images going horizontally across the top, it might look better overall. We are not making this decision just yet, but we would like to have another example to show Jennifer (our director) and some other staff members.
      1. Did this on Algae page and Ichthyology page -- also centered the horizontal image wrapper.
3. Additional comments
   1. Home page: It seems very busy with Recent News and a Calendar. Could you take the calendar off? See News and Events below for more on Calendar.
   2. News and Events
      1. On both the page itself and the Home Page, it seems to make more sense to link from the short listing of news items to the blog itself and not to an individual article. Linking to an article seems like a redundant step. Why not just place all the articles in a blogroll and scroll down the page to read them? Then someone can log in and comment on any of them.
      2. News and Events page--We think this needs some reorganization. Could the newsletters be put into the left hand sidebar under the Heading "News Archive" and then each issue could be listed? If that happened, there would be more room for the calendar at the top under Events and the blogroll, or listing of all articles, below under News. Another thought is to put the calendar in the lower part of the left hand sidebar (as a widget?) and just let the body of the page be the news section. That would make it cleaner. People could still click on the calendar which would open it up somewhere else and you could see events on it. We don't know if this is possible, but it seems like it should be!
         1. Technically it's possible, but I'm having trouble getting the calendar to fit in the thin sidebar that we have now.
   3. I know style and appearance is not as important right now, but we hope we will be able to find a different font for the page headers! Flowerchild is a definite "no."