How do you add certificates to your Education section?

[spcanelon]

Hi there! 👋

I've received this question recently so I figured I would document an answer publicly.

👩‍💻 If you'd like another example of how this is done I recommend Catrin Campbell-Moore's website which is where I borrowed the code from!

---

You can find the specific commit that incorporates these details on my site at commit https://github.com/spcanelon/silvia/commit/5b00f74bc745220ad998bcd83cac0f6b6bcf67b9, but here it is broken down a little.

Step 1: Copy and paste

Copy the about.html file in themes/academic/layouts/partials/widgets/about.html into the folder /layouts/partials/widgets/. This is the HTML code that controls the About widget of your page.

Step 2: Add some HTML

Modify the About widget to include some code for the certificate option.

Before the modification to the {{ with $person.education }} section:

      {{ with $person.education }}
      <div class="col-md-7">
        <h3>{{ i18n "education" | markdownify }}</h3>
        <ul class="ul-edu fa-ul">
          {{ range .courses }}
          <li>
            <i class="fa-li fas fa-graduation-cap"></i>
            <div class="description">
              <p class="course">{{ .course }}{{ with .year }}, {{ . }}{{ end }}</p>
              <p class="institution">{{ .institution }}</p>
            </div>
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

You can see the original layout has .courses. We're going to tweak that part a little bit and add a new option .certificate

• You can name the new option whatever you like as long as you're consistent when you refer to it later on
• You get to pick the icon. In my case I picked the "certificate" icon from Fontawesome and specified it
  using fas fa-certificate which is code provided on the Fontawesome website.
  This is how it gets incorporated into the "after the modification" code chunk below:

  <i class="fa-li fas fa-certificate"></i>
  

After the modification to the {{ with $person.education }} section:

      {{ with $person.education }}
      <div class="col-md-7">
        <h3>{{ i18n "education" | markdownify }}</h3>
        <ul class="ul-edu fa-ul">
          {{ range .courses }}
          <li>
            <!--https://github.com/catrincm/personal-website/blob/e06b3525f51a3dd2653578a29c9b5b253596ab1a/layouts/partials/widgets/about.html-->
            {{ if .course }}
            <i class="fa-li fas fa-graduation-cap"></i>
            <div class="description">
              <p class="course">{{ .course }}{{ with .year }}, {{ . }}{{ end }}</p>
              <p class="institution">{{ .institution | markdownify }}</p>
              <!--https://github.com/gcushen/hugo-academic/issues/1094#issuecomment-622200594-->
            </div>
            {{ end }}
            {{ if .certificate }}
            <i class="fa-li fas fa-certificate"></i>
            <div class="description">
              <p class="course">{{ .certificate }}{{ with .year }}, {{ . }}{{ end }}</p>
              <p class="institution">{{ .institution | markdownify }}</p>
              <!--https://github.com/gcushen/hugo-academic/pull/951#issue-255104712-->
            </div>
            {{ end }}

          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

Note I reference where I got these ideas within the code (in between the <!----> notation). That way I'll have a record I can go back to and credit folks for sharing their knowledge.

Step 3: Add your certificates

In the Education section of your _index.md file, you can use your newly created .certificate option to add your certificates. This is where you need to be consistent with whatever name you decided on in Step 2.

education:
  courses:
  - certificate: RStudio Tidyverse Instructor Certification
    institution: RStudio
    url_institution: ""
    year: 2020 (expected)
  - certificate: Certificate in Biomedical Informatics
    institution: University of Pennsylvania
    url_institution: ""
    year: 2020

---

References

1. Catrin Campbell-Moore's website and suggested code modifications
2. An alternative way to display your certificates, courses, MOOCs, etc. that I believe is now the Accomplishments widget
3. Free Fontawesome icons