Editing/Adjusting Staff Members
- Kayla Ingersoll
This article will cover common scenarios and requests for edits to members on staff pages. While many of our staff pages are coded slightly differently, we can still follow the same basic steps to move, adjust and remove people from an existing page.
Basic Staff Page Structure
Although the classes and method used for each staff page vary, they all use some kind of HTML to encase each individual staff member in the appropriate “card” or “class”. Because of this, we can pretty easily add, remove, and move staff members on most staff pages. You’ll want to open up the code editor with the <> button to take a look and see how the page you’re being asked to edit is set up.
Examples:
Accordion Format
Back end - Div classes include “panel collapse”, we can see that this is what repeats for each member of the staff
Front end - Accordion with a photo inside, has a hoverable description
Card Format
Coming soon!
List Format
Back end - This is set up the way a standard bullet list is with <ul> and <li> classes, with each <li></li> being a staff member.
Front end - several columns (the <li></li> in the back end) with one staff member in each.
Removing a Staff Member
Once you’ve identified the basic structure of the page you’re using, you’re going to “test out” removing the staff member from the page by commenting them out. This way, the code is still in place if the structure of the page breaks by removing a person.
First, you’ll need to find where the person is on the page. You can use Ctrl+F to open the “Find” feature in the Code Editor, and search for the name of the person you’d like to remove.
Next, you’ll need to identify where the beginning and end of that individual’s card is. You may want to use the examples from above to help figure out the beginning and end. Typically, the code editor will help show you this by having the beginning and end correspond in position horizontally. You can also try using a program like VisualStudio Code, which will more clearly mark out the beginning and end of a container for you.
Once you’ve identified where the start and end of the card/container is, you can try commenting it out.
To comment out the code for an individual, you’ll want to add a
<!-- at the start of their container and a
-->at the end of it. This will make the code you’re commenting out turn brown in the editor, so you can clearly see that you’ve marked out the correct thing. Go ahead and Save & Publish the page, and then open it up to make sure that the page doesn’t look broken or incorrect.
If you don’t see any issues, then congratulations – you’ve successfully removed the staff member! You can go back to the code editor and fully delete this code out.
Adding a Staff Member
Once you’ve identified the structure of the page and the beginning/end of the card/container for each individual on the page, you can also start to add new staff members.
You will want to make sure you’ve gathered all the necessary information (Name, position, photo, occasionally some pages list emails or phone numbers). You’ll also want to ensure that the photo matches the size of the other photos on the page, to keep the columns as even as possible. If you need assistance with this, you can ask the design team to help with resizing.
Once you have all of that, you’ll want to determine where you want to place this new person on the page (typically by their name, department, or both). Highlight the card/container for the individual just before where you’d like to place them, and copy the text of that container. Then, you’ll want to paste it right after the one you just copied – you will now have two of the same card/container in a row.
Once you’ve pasted the copy, make sure you fill out any text items that need to be changed out in the Code Editor. Everything but the image should be changed out before you hit OK and go back to the regular editor.
Now, you will need to swap out the photo. Scroll until you find the two photos in a row, and use the names to determine which one should be swapped out. Make sure you change the Image Name to the correct person’s name as well.
Once this is done, Save & Publish the page. You will then want to go to the Staff page to check and make sure that it added correctly and did not mess with the page layout.