People

You can build a directory of faculty and/or staff by utilizing “people blocks” containing a “person item” for each desired person.

Best practices

  • Use current, professional photos that encourage connections.
  • Review and update details for each person annually.
  • Connects a person to a program or service.
  • Contact information is same as University people search results.
<article class="AbstractList ContentBlock Page10">
    <div class="ProfileAbstract">
        <div class="AbstractImage">
            <a href="saraclark.aspx">
                    <img src="https://webapps.missouristate.edu/directory/upload/2123.jpg" alt="Sara M. Clark" width="60">
                </a>
        </div>
        <div class="AbstractInfo">
            <div class="ContactInfoContainer">
                <div class="ContactInfo">
                    <h2>
                        <a class="NameLink" href="saraclark.aspx">Sara M. Clark</a>
                    </h2>
                    <p class="JobTitle">Director of Web and New Media</p>
                    <div class="Contact">
                        <a href="mailto:saraclark@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>saraclark@missouristate.edu</a>
                        <a href="tel:417-836-5271">
                                <span class="content_icon_sprites phone_icon"></span>417-836-5271</a>
                    </div>
                </div>
            </div>
            <div class="AbstractContainer">
                <div class="Abstract">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="ProfileAbstract">
        <div class="AbstractImage">
            <a href="chrisaustin.aspx">
                    <img src="https://webapps.missouristate.edu/directory/upload/5614.jpg" alt="Christopher Austin" width="60">
                </a>
        </div>
        <div class="AbstractInfo">
            <div class="ContactInfoContainer">
                <div class="ContactInfo">
                    <h2>
                        <a class="NameLink" href="chrisaustin.aspx">Christopher Austin</a>
                    </h2>
                    <p class="JobTitle">Web Designer</p>
                    <div class="Contact">
                        <a href="mailto:chrisaustin@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>chrisaustin@missouristate.edu</a>
                        <a href="tel:417-836-5271">
                                <span class="content_icon_sprites phone_icon"></span>417-836-5271</a>
                    </div>
                </div>
            </div>
            <div class="AbstractContainer">
                <div class="Abstract">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="ProfileAbstract">
        <div class="AbstractImage">
            <a href="pbowles.aspx">
                    <img src="https://webapps.missouristate.edu/directory/upload/15898.jpg" alt="Philip N. Bowles" width="60">
                </a>
        </div>
        <div class="AbstractInfo">
            <div class="ContactInfoContainer">
                <div class="ContactInfo">
                    <h2>
                        <a class="NameLink" href="pbowles.aspx">Philip N. Bowles</a>
                    </h2>
                    <p class="JobTitle">Full Stack Developer/Engineer</p>
                    <div class="Contact">
                        <a href="mailto:pbowles@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>pbowles@missouristate.edu</a>
                        <a href="tel:417-836-4396">
                                <span class="content_icon_sprites phone_icon"></span>417-836-4396</a>
                    </div>
                </div>
            </div>
            <div class="AbstractContainer">
                <div class="Abstract">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!</p>
                </div>
            </div>
        </div>
    </div>
</article>
<article class="AbstractList ContentBlock Page{{pageId}}">
    {{#each personItemContainer}}
        {{! NOTE: This is a static version that deviates from the Web Press template }}
        <div class="ProfileAbstract">
            <div class="AbstractImage">
                <a href="{{bearPassId}}.aspx">
                    <img src="https://webapps.missouristate.edu/directory/upload/{{photo}}" alt="{{name}}" width="60">
                </a>
            </div>
            <div class="AbstractInfo">
                <div class="ContactInfoContainer">
                    <div class="ContactInfo">
                        <h2>
                            <a class="NameLink" href="{{bearPassId}}.aspx">{{name}}</a>
                        </h2>
                        <p class="JobTitle">{{jobTitle}}</p>
                        <div class="Contact">
                            <a href="mailto:{{bearPassId}}@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>{{bearPassId}}@missouristate.edu</a>
                            <a href="tel:{{phone}}">
                                <span class="content_icon_sprites phone_icon"></span>{{phone}}</a>
                        </div>
                    </div>
                </div>
                <div class="AbstractContainer">
                    <div class="Abstract">
                    <p>{{abstract}}</p>
                    </div>
                </div>
            </div>
        </div>
    {{/each}}
</article>
{
  "pageId": 10,
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "publishAspx": null,
  "headingText": "Lorem ipsum dolor",
  "headingLevel": null,
  "personItemContainer": [
    {
      "bearPassId": "saraclark",
      "name": "Sara M. Clark",
      "jobTitle": "Director of Web and New Media",
      "phone": "417-836-5271",
      "photo": "2123.jpg",
      "abstract": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!"
    },
    {
      "bearPassId": "chrisaustin",
      "name": "Christopher Austin",
      "jobTitle": "Web Designer",
      "phone": "417-836-5271",
      "photo": "5614.jpg",
      "abstract": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!"
    },
    {
      "bearPassId": "pbowles",
      "name": "Philip N. Bowles",
      "jobTitle": "Full Stack Developer/Engineer",
      "phone": "417-836-4396",
      "photo": "15898.jpg",
      "abstract": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!"
    }
  ]
}