Tech | Web Team

Student Profiles

Student Profiles are used to showcase information about several people in a uniform and organized manner without creating a long length of text. Preview a live example.
  • Each student profile needs a thumbnail (96 pixels width by 120 pixels height). Check out our Pixlr tutorial to learn how to re-size images.
  • Thumbnails will be displayed in rows of three.
  • Student Profiles DO work in tabs.

 


Walk Through

Creating your Student Profiles Add-On

  • If you don’t already have an active Add-Ons folder for your page you will need to create one.
  • Right-click the Add-Ons folder and click Insert.
  • A menu will show up with several different Add-On options. Find Student Profile Content, then click it.
    Student Profile Screenshot
  • A dialog window will pop up asking you to name your Student Profile Content. Name it something related to the overall group of students to make it easier for you to edit in the future. After you are done naming it, click OK.
  • Now you will see new fields in your content loading dock.
  • First create a title for your student profile group, one that reflects the content of the group.
  • You can also enter a small blurb about the group in Group Information, no more than a short paragraph in length, just to summarize who these people are.
  •  Additional Header and Additional Information are also optional. This will appear in a textbox next to your student profiles. Remember to keep them concise.Student Profile Screenshot
  • Click Save.

Creating Student Profiles

  • Right-click Student Profile Content folder in the content tree and click Insert. Click on Student.
    Student Profile Screenshot
  • A pop-up window will appear asking you to name the file. Name it after the person it is profiling.
  • After you are done naming it, click OK.
  • You will now see your student folder pop up in the content tree.
  • There are also fresh fields in the content loading dock to the right.
  • Lock the page to begin editing.

Creating Student Profiles

  • On your newly created Student Profile, notice the vertical red bars to the left of the fields Student Full Name and Student Thumbnail. These are required in order to create the profile.
  • Enter in the student's full name.
  • Next, you will need to upload a thumbnail.
  • The thumbnail must be 96 pixels wide and 120 pixels tall in order to fit the profile. You must resize your images to the correct dimensions. Please check out our Pixlr tutorial on how to resize your images in an external editor.
  • To enter the thumbnail click the browse tab above the student thumbnail field. A window will pop up with the media library content tree on the left side.
  • Find your thumbnail, click it and then click OK.
  • Remember that the student thumbnail will be the first picture your viewer sees.
    Student Profile Screenshot
  • Here is how the profile should look when visitors first view the page:
    Student Profile Screenshot
  • Here is how the profile looks once the visitor clicks on the student profile:
    Student Profile Screenshot 
  • Notice the X located in the right hand corner of the open textbox. Clicking that X will return the user to the textbox that was located there before.

Additional Content

  • You have several options when including additional features to your Student Profile.
  • Locate the Student Thumbnail Label field. Filling this in will create overlaying text on the student thumbnail you have uploaded and chosen.
  • Make sure the text is no longer than 25 characters, or it won’t fit on the image.
    Student Profile Screenshot
  • Student Picture gives you the option to upload a separate student image that will show up when the thumbnail image is clicked.
  • Student images must be 96 pixels wide and 120 pixels tall in order to fit the profile. You must resize your images to the correct dimensions. Please check out our Pixlr tutorial on how to resize your images in an external editor.
  • If you do not choose this option, the thumbnail you have previously chosen will be used.
    Student Profile Screenshot
  • Remember, pictures must be 96 pixels wide by 120 pixels height.
  • To upload a picture, click Browse and locate it in the media content tree. Click OK.
  • You can provide additional information about the student in Student Information.
  • To add content to the Student Information field click on the show editor above the Student Information field. It behaves like your typical text editor and allows you to enter links add font style, etc. Do not add images into this text field.
  • Keep the information brief and concise so the information does not drag the page length.
  • Once you are done, click Accept and save the page.
  • Here is how the page would look with all the optional fields filled out:
    Student Profile Screenshot
  • Once you have filled out the desired fields, click Save.
  • If you want to preview your work, make sure you preview it from the parent folder you created it in.
  • To add more profiles just repeat the steps starting at thegroup profile page.
  • Don’t overdo it with the student profiles, though. Anymore than 15 profiles in one group will crowd the page.
  • Also, a page can have more than one student profile group on the same page but having more than 18 total profiles on a page will look cluttered.
  • Just create the profile folder in the same Add-ons folder you started with and follow the steps from there.
  • Don’t forget to save your work and submit it for publishing when you are done.

FAQ

Confused Kitten

How many student profiles can I have on one page?

Anymore than 15 profiles in one group will crowd the page.

Can I sort the profiles into groups?
Yes, a page can have more than one student profile group on the same page but having more than 18 total profiles on a page will look cluttered. If you would like to add another group of profiles simply add another container by right-clicking Add-Ons, then Insert, then Student Profile Content and adding a new group of student profiles.

Do they work in Tabs?
The Student Profiles Add-On works in tabs!

Best Practices

  • Thumbnail sizes should be 96 pixels wide by 120 pixels tall.Winning Guinea Pig Refer to the
    Web Team's Pixlr tutorial if you need more information on resizing
    images.
  • A page can have more than one student profile group on the same page but having more than 18 total profiles on a page will look cluttered.
  • Keep your Additional Title limited to 25 characters or less and keep your Additional Description limited to 6-7 reasonably sized sentences.

Page last updated: 7/9/2014