Faculty Research/Group Webpage Editing on the CBE Website

Faculty webpages on the CBE website use Drupal as a platform. The structure is not just a single content area on one page that can be edited all at once– most pages on the CBE website are comprised of different sections that combine to create a master Layout. The master layout is subsequently edited in Layout Mode.

This concept is not intuitive and is unfamiliar to most people at first but is not hard to get the hang of, once you understand that the entire page layout is comprised of the following:

  1. Sections – Literally, a defined area of a page that is edited individually. Each section has it's own type of content block.
  2. Content Blocks - Within each Section one can select different types of Content Blocks, such as Accordians, Text boxes, etc. All actual content is changed or updated within these blocks using Layout Mode.

Below is a quick overview. For more info, visit the COE page on creating/editing content.

How to Edit a Faculty / Research Group Web Page

QUICK START

Here is a mini-list of key things to remember when editing your page:

  1. Log in at the bottom right of your page.
  2. Click the blue LAYOUT button at top.
  3. Scroll down to the section you want to edit and hover over the right corner of the section until you see a little icon of a pencil.
  4. Click on the pencil and edit your block.
  5. Click ADD, UPDATE, and/or SAVE as needed within the block. If you are adding an item, there is usually an ADD button. Below the content you added, there is either a SAVE or UPDATE BLOCK button.
  6. After saving your block, you must then save the entire Layout. Go to the TOP LEFT of your page and click on the blue SAVE LAYOUT button.
  7. Add content in portions. The system will crash if you try to upload too much at once without saving in between.
  8. PHOTOS and GRAPHICS
  • When uploading pictures or graphics, first name the image while it is on your computer. Do not name your photos "Getman headshot", "Photo of Getman" or "Picture of Getman." A screen reader announces images ahead of time so having such words in the photo name itself can sound chaotic. Name it "Getman, Rachel" or "Rachel Getman in Office with Students" etc. 
  • Before uploading, check to make sure there isn't already a photo in the Media Library. We have many faculty photos already on the site. Go to Content / Media tab / select Image / type the person's last name, then Filter, and a selection will be pulled up.
  • While in Editing/Layout mode within your website, click on the little media button in the toolbar (icon of an image with music notes).
  • Select the new photo to upload, and move the "+" sign in between their eyes so that the picture centers on the frame.
  • During the upload process, there are several spots to fill in:
    • The File Name (what is seen in the Media Library index list) for a headshot can be something like "Rachel Getman". Remove the ".jpg" at the end of the name. Other photos for your group can be named things like "Getman Group-Amy Brown, PhD student" or "Getman Group in Boston."  Including the Group name in the name is helpful in the event inks get broken or a site has to be re-done (as in a platform change). It also allows you to look up and/or edit all photos for your Group simultaneously vs searching one by one in the Media Library.
    • The Title (this is what the cursor shows when hovering over a picture in an article) can be the same as the File Nam. 
    • The Alt Text should describe who or what is in the photo and/or what is happening, eg "Amy Brown, PhD student" or "Amy Brown smiling at desk."
  • For research graphics, note that if the graphic is essential to understanding the content on the page, it will require an explanation in text. Otherwise, it can be marked decorative. Adding the Group Name to graphics is extremely helpful.

Website Training Resources

Note that within the website itself, there is a Help link.  

Other Resources:

How to Make/Edit a Webpage <Very helpful overview

Getting Started with Layout Builder

Codes for Custom Features (how to change background colors, the color of accordions, etc.)

Submit an ETS Help Request sign up for a Drupal 8 Carmen Course for all page editors. After ticket is closed, navigate to carmen.osu.edu and log into the Drupal 8 Training(ETS).  This is an asynchronous course and you can review the videos as many times as you like. You need to open and then click next to get the subsequent modules as they are articulated.

Ohio State Teaching/Learning Resource Center