Faith & Co. Website Maintenance Guide

Owned by Bass, Jeff
Last updated: Oct 27, 2021
9 min read


Contents:

1). Page editing basics

2). Adding films

3). Adding bonus content

4). Adding cast members 

5). Resizing images using the Wordpress tools 


1). Page editing basics

  1. Throughout this document, I will refer to the “dashboard” a number of times. This is the area you land on when you first log in at faithandco.spu.edu/wp-admin. Most of the tools described below will be accessible via the links on the left-hand navigation bar in the dashboard. 
  2. In the left-hand navigation bar, you’ll want to pay attention to four main items: 
    1. Cinerama Portfolio - this is where you will add and edit new film entries.
    2. Cast Profiles - this is where you’ll add new profile pages for cast members (this might not be utilized for Season 2 and onward).
    3. Media - this is where you’ll add new images. 
    4. Pages - this is where you will add and edit general information pages on the site, like “Courses,” “Endorsements,” and the home page. 
  3. In Wordpress, site templates are referred to as “themes.” The old Faith & Co. website used a theme called Filmmaker, and the new site uses a theme called “Cinerama.” Any references to “Cinerama” are theme-related. 
  4. In order to edit a page: 
    1. Click “Pages” in the left-hand navigation bar of the dashboard. 
    2. Hover over the page you wish to edit, and click “Edit.”
    3. The Cinerama theme utilizes a plugin called WPBakery Page Builder, which makes building custom layouts easy. All of the pages on this site use this page builder, which enables us to click-and-drag templates for the different page types. 
    4. Editing content areas requires hovering and then clicking the green pencil icon:
      1.   
    5. Anywhere you see a plus (+), you can add content. Clicking the plus brings up a menu with all of the items that can fit in the area you are trying to add to. Generally, you add a row first by clicking the large “plus” towards the bottom of the page: 
      1. Then, you can add content items to the row by clicking the “plus” in the middle of the row. Most of the content on this site will use the “Text Block” element.
    1. There are a number of pre-made page and page area templates saved. You can add these to a page at any time by clicking the template button: 
      1.  
      2. These can save you time if you are adding new pages and would like them to have the same layout as earlier pages (for example, if you are adding a new season page). 
    2. When you are done editing a page, click the blue “update” button on the right hand side of the page. If you are adding a new page, click “Publish” or “Save as draft” if you are not ready to publish.


2). Adding films 

To add a new film to the Faith & Co. website, select “Cinerama Portfolio” in the dashboard. Here, you will see a list of the existing films on the site, and you’ll be able to click the “Add New” button towards the top of the screen. 

  1. When you land on the new screen, click the blue button that reads “Backend Editor.” This will enable you to have more control over the layout of the page, and access the templates that are available for the various pages on the website. 
    1. After clicking here, click the template button.
    2. You will then be able to see a list titled “My Templates.” Find the template titled “Film page template,” hover over it, and click the plus (+). This will then fill in the page with the preset layout for film pages. 
  2. There are a number of fields and checkboxes to fill out in order to make the film page appear correctly both on its own and in the archive with the other films: 
    1. Title
    2. Video Button
      1. Hover over the Video Button element in the layout and click the green pencil icon.
      2. This will enable you to edit the source video that will appear on the page. 
      3. Fill in the “Video Link” field with the URL from Vimeo for the film you are adding. 
      4. Replace the “Video Image” and “Play Button Custom Hover Image” with the thumbnail from your video by removing the default image (clicking the red “X”) and then adding your new image (clicking the green “+” to add a new image). This image must be 1122x632. 
    1. Social Share
      1. You won’t have to edit this. These are just the links that take users to their social media accounts in order to share the video. 
    1. Story
      1. Add the subtitle for the film here. 
    1. Summary and Image
      1. Below the “Story” row, you’ll see a row with two columns. Add the synopsis for the film to the left column, and add another screenshot to the right column, by editing the “Single Image” item. 
    1. Cast & Crew
      1. Here, you can list the cast and crew for the film. 
    1. Discussion Questions
      1. You can replace the text here with related questions for the film. 
    1. Related Videos
      1. Under the row with the title “Related Videos,” you’ll see a yellow item labeled “Portfolio Slider.” This is the small carousel at the end of every film page that displays related films. Here, you can select the season the film belongs to in the “One-Category Portfolio List” field, and add a topic to the “One-Tag Portfolio List” field. If you would like total control over which videos appear in this carousel, rather than films with the same topic and/or season, you can enter the IDs of the films you would like to display here. 
        1. In order to find the IDs of videos, click on the “Cinerama Portfolio” link to the left of the page, and you will see the list of all films. 
      2. To the right, you will see a column that lists the IDs of the films. Copy and paste these values in order to show them in the “Related Videos” carousel.
    1. Company Name
      1. Enter the related company name here, and it will display under the title on the film page as well as on the film’s thumbnail on the film archive page. 
    1. Transcript
      1. Copy the text from the transcript of the film (if one exists) and paste it in this field. 
    1. Excerpt
      1. Enter the film summary here in order for it to display under the film title in search results. 
    1. Author
      1. You can disregard this field. It refers to the user who added the film (this will be your username), and it doesn’t show up on the front end. 
    1. Edge Portfolio Settings
      1. Scroll down, and you will see the section titled “Edge Portfolio Settings.” 
      2. Portfolio TypeIn this field, select “Portfolio Custom” from the options. 
      3. Show Title Area
        1. Make sure this is set to “Yes.”
    1. Edge Title
      1. Show Title Area
        1. Again, make sure this is set to “Yes.”
      2. Title Area in Grid
        1. Set this to “Yes.” This will stretch the header image across the width of the page. 
      3. Height
        1. Set this to 364px.
      4. Background Image
        1. Here, you can add the image you would like to appear behind the title on the film page. I would recommend using a darker image, with dimensions of 1600x900px, though 1920x1080 will work in a pinch. In order to keep the file size down, I would save images as jpegs, with compression level 8 in Photoshop (or use an online tool like https://png2jpg.com/ to convert the file). 
      5. Background Image Behavior
        1. Select “Enable Parallax Image.” This enables the scroll animation on the title that adds an illusion of depth. 
    1. Portfolio Categories
      1. Scroll back up and look at the sidebar to the right of the page. Here, you will see the area titled “Portfolio Categories.” Select the season for the film, and either “Films” or “Bonus Content/Expert Interviews,” depending on which category the film falls under. 
    1. Portfolio Tags
      1. This is where you add the topics for the film. You can select from the list of already-created topics, or add new ones here. 
    1. Industries
      1. Here, you can select from the list of existing industries or create new ones. 
    1. Cast Members
      1. Here, you can add the cast members appearing in the film. These will show up in the dropdown filter on the film archive page. 
    1. Featured Image
      1. This is where you add the image that shows up on the archive page. The dimensions must be 356x200px in order to display correctly. 


3). Adding bonus content

  1. After logging in, click on “Add New” under “Cinerama Portfolio.”
  2. This will automatically populate a new video post, with the default layout we use for the main films in each season. For bonus content, however, we are only going to pay attention to a few fields on this page. Bonus clips don’t get their own pages, and we need site visitors to be able to see the clips in the video archive, click on them, and go straight to the video, so we don’t need to worry about the layout of this page. 
    1. Title - fill in the title field at the top of the page with the title of the clip. 
    2. Portfolio Categories (sidebar) - click the checkboxes next to the related season, and “Bonus Content / Expert Interviews.”
    3. Portfolio Tags - this is where we set topics for each video. You can enter new topics into the text field, or select from previously used topics.
    4. Cast Members - use this to select the interviewee from the existing list of “cast members,” or add a new one. This will show up under the title on the related thumbnail on the film archive page. 
    5. Industries - choose the related industry for the video, or create a new one if none of the previous industries are suitable. 
    6. Transcript - if available, copy and paste the text from the transcript into this field. 
    7. Featured image (sidebar) - this is where you put the thumbnail image that will show up on the video archive page. Upload an image at 356X200px. 
    8. Video link - scroll down to the box labeled “Edge Portfolio Images/Videos (single upload).” Click the gold “Add image/video” button, and you’ll be given a set of three fields. Select “Video” for “File Type,” “Youtube” for “Video Type”, and then paste in the Youtube URL for the bonus clip into the “Video ID” field. 
  3. After filling in the above fields, you can scroll to the top of the page and click the blue “Publish” button.


4). Adding cast members

  1. Click on the “Cast Members” link on the left-hand side of the dashboard. 
  2. Click the “Add New Cast Profile” button.
  3. After adding the cast member’s name to the “Title” field, click the blue “Back-end editor” button. 
  4. Click the template button, which looks like this: 
  5. Hover over “Cast member page template” and click the plus (+). This will fill in the page with the default layout for the cast page. 
  6. Replace the default bio (for cast member Gary Ginter) with the bio for your new cast member. 
  7. Hover over the “Button” item and click on the green pencil icon to edit the link to the related film. 
    1. Replace the URL in the “Link” field with the link for the related film page for your new cast member. 
  8. Title and Company
    1. Scroll down to the bottom of the page, and enter the cast member’s company and title at that company in the “Title” section. 
  9. Excerpt 
    1. Paste in the bio for the cast member here, so it will appear below their name in search results.  
  10. Featured image
    1. Scroll back up to the top of the page, and click the blue “Set featured image” link in the “Featured Image” section on the right-hand side of the page. This is where you can select or upload a photo for your new cast member. Cast photos should be 364x500 pixels in order to fit nicely into the page layout. 
  11. When you are done editing the profile, click the blue “Publish” button on the right-hand side of the page or “Save as draft” if you are not ready to publish yet. 



5). Resizing images using the Wordpress tools

  1. If you need to resize an image after uploading it to Wordpress, there are tools available to do so. 
  2. First, find the image in the media library, and click “Edit image” under the image preview. 
  3. Before doing any cropping, you must re-size the image first. Enter your required width into the first box under “New dimensions.”
    1. If you are creating a featured image, for example, enter 356, and make sure the height is going to be greater than or equal to 200. If this is not the case, clear the width value and enter the height first. You want one of your dimensions to match, without the other dimension being too small.
    3. Once you have your new dimensions entered, click the blue “Scale” button. 
  4. Once you’ve resized your image, click the blue “Save” button. 
  5. Click “Back.” 
  6. Now, click “Edit image” again. I realize this is repetitive, but it’s the only way to make Wordpress’s editor work. 
  7. Now, click the “Crop” button. 
  8. Enter your desired dimensions into the “Selection” boxes: 
  9. Drag the selection box into the crop position you want, and then click “Crop” again. This will crop the image. 
  10. Click the blue “Save” button.