Profile Block (Data)

The the profile block allows users to easily add an ASU affiliate to a page within your website. All details are pulled from the ASU Search API and are updated automatically. Be sure to check out the directory patterns that utilize this block!

Styles, colors and dimensions

The block styles for the data-driven profile block are exactly the same as the manual profile block. They are designed to be interchangeable within the directory patterns supplied by the theme.

  • The block supports three sizes: micro, small and large. The small size is the default.
  • The block also supports three background color options: no background, white background, gray-1 background.
  • Within the dimensions panel, users can adjust the top and bottom margin of the block for additional spacing considerations.

See: https://comm.engineering.asu.edu/pitchfork/docs/profile-block-manual/#options for additional information and detailed screen captures for the provided controls within the editor.

Additional CSS Classes

.has-default-img

When a profile from ASU Search is missing an uploaded image, there is no default image added to the feed for that person in the API.

  • This can lead to some odd layouts for the block caused by the missing image placeholder.
  • Adding the has-default-img class solves this problem by forcing the block to display the default placeholder image from ASU search.
  • The class has no effect on profiles with uploaded images.

Block Settings

The block requires one setting to display an individual profile from ASU Search.

  1. Type the ASURITE ID of the person you wish to display.
Screen capture of the field required for a data-driven profile block.
The data driven profile block only requires an ASURITE ID to display a profile.

Performance

Each instance of the profile-data block will normally result in a separate call to the ASU Search API to return the most accurate results about the displayed person. If you are creating a layout of multiple people on a single page, this can cause the page load time to increase with each person added.

To prevent this problem, be sure to group related profile-data blocks within a single profiles block. The presence of the wrapper block will nullify this issue by querying all of the profiles within the layout with a single call to the API.