6. Extras ‐ Editing profiles

Extra - Badges

Badges can be added via the following custom markdown:

[[imgBadge]]
| ![Image Alt Text](../badges/Logo-Name.png)

---

Note: SVGs are not working at the moment.
See https://github.com/SSWConsulting/SSW.People/issues/656

For some badges, you may want a clickable link to the event or product page.
If you would like a hyperlinked badge it can be added like so:

[[imgBadge]]
| [![Image Alt Text](../badges/Logo-Name.png)](https://example.com)

---

Note: Add an <hr /> using Markdown (---) after the last badge your have. This will generate a nice separator between badges and content. See reason why this is not automatic.

Available Badges

Can be found in the Badge Library

Extra - Adding your own Badges

NOTE: Don't forget to add them to the Badge Library (This allows other people to use them too)

If you'd like to add your own badges, please make sure they are compliant:

• Images must be 135px high

  • Preference is for square and 135px width and height
  • If the badge is rectangular - put it at the end of the badge list in a profile so it looks better

• Named correctly as either Developer, Designer, SysAdmin, or Certification – followed by the name of the badge

• Uploaded to the /badges folder
  Figure: Badges can be found in the root of the People repository

• Added as an available badge to the Badge Library

See Images for how to upload items to the repository

---

Extra - Images

We use our own custom markdown tags for embedding images on our profiles.

Using Images

Large image with no limit on width

[[imgLg]]
| ![Large image alt text](./Images/Bio/cat_computer.jpg)

Medium image will stretch to maximum 400px wide

[[imgMd]]
| ![Medium image alt text](./Images/Bio/cat_computer.jpg)

Small image will stretch to maximum 200px wide

[[imgSm]]
| ![Medium image alt text](./Images/Bio/cat_computer.jpg)

Uploading Images

1. All images need to be kept in the Bio folder, located under Images:
   Figure: Firstname-Lastname > Images > Bio

2. Click on "Upload files":
   Figure: Make sure you are in the correct folder and upload the files

3. You can upload as many images as you like:
   Figure: Don't forget to add a commit message before hitting "Commit changes"

4. Reference the new images with the same syntax as above.

   Avoid spaces in filenames, use hyphens instead

Extra - Audio widget

Figure: The audio widget

You can add a voice recording of your name and a self-introduction to your profile.

1. On Windows, follow the following:

   • Open Voice Recorder
     Figure: Windows menu, Voice Recorder

   • Click on the mic button to start recording
     Figure: Voice Recorder, click on the mic button to start recording

   • After recording, right-click on the recording file.

     1. Click on Open file location
     2. Rename the file Firstname-Lastname-Audio.m4a
        
        Figure: Locate the audio file and rename it Firstname-Lastname-Audio.m4a

2. The audio recording needs to be kept in the Audios folder of the profile. If you don't have an Audios folder you can create one by adding a blank file, shown in steps below.

   • Create a new file and type Audios/blank. This will create the Audios folder. Figure: Create the Audios folder and blank file in one go by typing 'Audios/blank'

   • Commit the blank placeholder file to the main branch on your fork. Figure: Creating the blank placeholder file Firstname-Lastname/Audios/blank

   We can't create an empty folder in git. So we use a placeholder file which then allows us to upload files to the folder through GitHub.

3. Ensure you are in your Audios folder and click on "Upload files":
   Figure: Make sure you are in the correct folder Firstname-Lastname/Audios

4. Add a comment and commit to the main branch on your fork as recommended
   Figure: Don't forget to add a commit message before hitting "Commit changes"

   Avoid spaces in filenames, use hyphens instead

5. Locate your Audio file on GitHub
   Figure: Locate the audio file on GitHub and click "View raw"

6. Copy the Raw Audio link from the address bar
   
   Figure: Copy the Raw Audio link from the address bar

   Note: If your browser downloads the file before showing you the URL, you can create it using the format below.
   Remember to use the correct extension for the Audio file as saved in GitHub, this example uses .wav.

   https​://raw.githubusercontent.com/SSWConsulting/SSW.People.Profiles/main/FirstName-LastName/Audios/FirstName-LastName-Audio.wav

7. Save the copied link in Microsoft Dynamics 365 CRM
   
   Figure: Update your User Record in Dynamics CRM - Users | About Me Audio URL

Extra - Youtube widget

You can add a YouTube Playlist widget to your SSW People Profile

1. Find your SSW YouTube playlist on SSW TV
   Figure: Find your SSW YouTube Playlist

2. Open the playlist to get the ID
   Figure: Open the playlist by clicking "VIEW FULL PLAYLIST"

3. Copy the YouTube Playlist ID from the URL
   Figure: Copy the YouTube Playlist ID from the URL

4. Save the copied YouTube Playlist ID in Microsoft Dynamics 365 CRM
   Update your User Record in Dynamics CRM - Users | YouTube Playlist ID
   
   Figure: Saving the YouTube Playlist ID in Dynamics CRM - Users | YouTube Playlist ID

5. Be patient as the data is Synced from CRM to SSW People
   It may take up to 30 minutes for the playlist to appear on your profile.
   
   Figure: YouTube Playlist widget example

The functionality and setting up the playlist is shown in this video

Extra - GitHub Contributions widget

You can add a GitHub Contributions widget to your SSW People Profile

1. Go to your GitHub profile and copy the URL from the address bar
   Figure: Copy your GitHub Profile URL

2. Save the copied GitHub URL in Microsoft Dynamics 365 CRM
   Update the GitHub URL field on your User Record in Dynamics CRM - Users | GitHub URL
   Figure: Saving the GitHub URL in Dynamics CRM - Users | GitHub URL

3. Be patient as the data is Synced from CRM to SSW People
   It may take up to 30 minutes for the GitHub Contributions widget to appear on your profile.
   Figure: GitHub Contributions widget example

---

Next Step: Saving profiles >