SharePoint List Formatting
Back to column formats
Column formattingSharePoint 2019SharePoint Online

Twitter Profile Pics

Using just the Twitter handle, Twitter profile pictures are displayed in a circle and clicking them will open the user's Twitter page in a new window. The handle is also displayed as a tooltip when hovering over the profile image.

Get this format View on GitHub

Shared by Chris Kent
Updated Aug 20, 2018

Twitter Profile Pics formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "margin": "2px",
        "width": "48px",
        "height": "48px",
        "overflow": "hidden",
        "border-radius": "50%"
      },
      "children": [
        {
          "elmType": "a",
          "attributes": {
            "href": "='https://twitter.com/' + @currentField",
            "target": "_blank"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "='https://twitter.com/' + @currentField + '/profile_image?size=normal'",
                "title": "='@' + @currentField",
                "alt": "='@' + @currentField"
              },
              "style": {
                "position": "relative",
                "top": "50%",
                "left": "50%",
                "width": "100%",
                "height": "auto",
                "margin-left": "-50%",
                "margin-top": "-50%"
              }
            }
          ]
        }
      ]
    }
  ]
}
View sourceLink to this definitiongeneric-twitterpic.json

From the contributor

How to use this sample

Summary

Using just the Twitter handle, Twitter profile pictures are displayed in a circle and clicking them will open the user's Twitter page in a new window. The handle is also displayed as a tooltip when hovering over the profile image.

screenshot of the sample

Note: Twitter updated the Twitter profile pictures API and will not return an image using the "https://twitter.com/username/profileimage" request under certain circumstances. Twitter will redirect to another more cryptic image URL and return a 403 error to SharePoint. This only happens when currently logged into Twitter in the same browser session as the SharePoint session. If NOT logged into Twitter, the "https://twitter.com/username/profileimage" request succeeds.

Alternative API for returning Twitter pic is replacing "https://twitter.com/username/profileimage" with a http://avatars.io service request using the following format: "http://avatars.io/twitter/username". For examples of how to use this approach, see the generic-socialpic sample.

Image Size

Twitter profile pictures come in 3 standard sizes:

Name Size
mini 24x24
normal 48x48
bigger 73x73

There's actually another "size", original, that returns the image using the original proportions as uploaded by the user. This doesn't work well for listviews since there is so much variation, but it is available if you customize the code and change the relevant part of the src url to ?size=original.

To change the size, adjust the portion of the src url to use the keyword from the table above and then adjust the width and height style attributes for the containing div.

Column Types

This format will work with Choice and Text columns without any changes. To use Lookup columns, you'll need to change the 2 occurences of @currentField to @currentField.lookupValue.

The field values are case insensitve and should be just the user's twitter handle with no @.

View requirements

  • This format can be applied to a text/choice column and expects the values to be twitter handles

Sample

Solution Author(s)
generic-twitterpic.json Chris Kent

Version history

Version Date Comments
1.0 March 21, 2018 Initial release
1.1 August 20, 2018 Updated to use Excel-style expressions

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

A similar wizard is also included in the Column Formatter webpart that allows full customization.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.