Profile Block (Manual)

Block options

Styles

The profile block can be displayed in one of three styles: large, small and micro.

• All provided profile fields will display with the large block style.
• The small and micro block styles restrict the displayed information to a more compact display.
• The small style is the default style for the block.

Colors

There are also three background styles possible with this block.

• The default (unassigned) background color for the block is transparent without a border.
• Both the White and ASU Gray 2 options place the block contents within a border and provide additional padding within the block.

Dimensions

Support for margin-top and margin-bottom are included with the dimensions panel.

Additional CSS Classes

.has-default-img

Adding the has-default-img class will produce a placeholder image for the block. An uploaded profile image will exactly replace the background image rendered by the class but it will not prevent it from being displayed, so it is a good idea to remove this class as the default images are replaced by actual portraits.

Fields

The block provides individual fields for the following pieces of information.

Name, URL and Photo tab

• Profile Name – Displayed exactly as entered. Punctuation allowed.
• Profile Image – Recommended photo size is 600px by 600px. The block will automatically transform your provided image into a circle.
• Profile URL – Intended as a URL pointing back to the ASU Search page for this person.

Title and Description tab

• Title – Displayed exactly as entered. Intended for formal job titles like “Associate Professor” or “Principal Investigator”
• Department – Displayed exactly as entered.
• Description – Displayed as one block of text. Embedded carriage returns omitted from the final output. However, a limited set of HTML tags will be preserved, making it possible to create multiple paragraphs and linked text within this space.

Contact Details

• Email address – Provided text will be turned into a mailto: link, so be sure to enter the complete email address.
• Phone number – Include any necessary visual formatting including dashes, spaces and parentheses. Transformed into a tel: link automatically.
• Physical Address – Embedded carriage returns will be preserved in this field, so use multiple lines for your address if necessary.

Social Icons

• Input into the block as pairing of an icon provided by Font Awesome and a URL.
• The ASU Unity design system requires the use of the brand-square variants of most social media sites.
• By default, ASU Search provides fields for Facebook, Twitter, Linkedin and a personal website URL.

Data Source

All of the data for this block is directly entered into the post and is saved as normal block content within WordPress.

This block is intended to “mix and match” with data-driven profile blocks which DO sync their information with the ASU Search appliance. Together, the manual and data-driven profile blocks can form an ad-hoc directory structure suitable for interdisciplinary groups or groups of faculty members and students.