Skip to main content

The White Coat Hero graphic uses a shortcode to display a large hero image combined with a content box and a circular avatar photo. This code was originally created for use by labs to display information about the lab as well as a photo of the lab director, but can be used for other purposes as well. Below you will find the code needed as well as examples of what each code looks like on the page.

It is important to note that this code uses a media id rather than a url to identify the photo used. You can find the media id in by clicking on a photo in the media library, then the id will show up as “post=123” in the url.

lab hero image
avatar image of woman

Lorem Ipsum

Turpis sollicitudin lacus mi pellentesque vel pretium aptent sociis, curae magna litora ligula dapibus ultricies ante sapien blandit, ac praesent tempus scelerisque elementum nulla curabitur. Placerat habitasse dapibus ultrices dictumst sem habitant a, dolor bibendum elementum potenti ligula venenatis blandit tristique, sagittis fringilla massa convallis ad montes.

[wc_hero media_id=8565 avatar_media_id=8557]

<h2>Lorem Ipsum</h2>
Turpis sollicitudin lacus mi pellentesque vel pretium aptent sociis, curae magna litora ligula dapibus ultricies ante sapien blandit, ac praesent tempus scelerisque elementum nulla curabitur. Placerat habitasse dapibus ultrices dictumst sem habitant a, dolor bibendum elementum potenti ligula venenatis blandit tristique, sagittis fringilla massa convallis ad montes.
[/wc_hero]

Crop

You can use the “crop” attribute to change the size of the hero image.The valid crop values are 3×2, 2×1, 1×1, 2×3.

lab hero image
avatar image of woman

Lorem Ipsum

Turpis sollicitudin lacus mi pellentesque vel pretium aptent sociis, curae magna litora ligula dapibus ultricies ante sapien blandit, ac praesent tempus scelerisque elementum nulla curabitur. Placerat habitasse dapibus ultrices dictumst sem habitant a, dolor bibendum elementum potenti ligula venenatis blandit tristique, sagittis fringilla massa convallis ad montes.

[wc_hero media_id=8565 avatar_media_id=8557 crop=2x1] <h2>Lorem Ipsum</h2>
Turpis sollicitudin lacus mi pellentesque vel pretium aptent sociis, curae magna litora ligula dapibus ultricies ante sapien blandit, ac praesent tempus scelerisque elementum nulla curabitur. Placerat habitasse dapibus ultrices dictumst sem habitant a, dolor bibendum elementum potenti ligula venenatis blandit tristique, sagittis fringilla massa convallis ad montes.

[/wc_hero]

Omit avatar

In order to get rid of the avatar image, simply delete the “avatar_media_id” attribute form the shortcode.

lab hero image

Lorem Ipsum

Turpis sollicitudin lacus mi pellentesque vel pretium aptent sociis, curae magna litora ligula dapibus ultricies ante sapien blandit, ac praesent tempus scelerisque elementum nulla curabitur. Placerat habitasse dapibus ultrices dictumst sem habitant a, dolor bibendum elementum potenti ligula venenatis blandit tristique, sagittis fringilla massa convallis ad montes.

[wc_hero media_id=8565] <h2>Lorem Ipsum</h2>
Turpis sollicitudin lacus mi pellentesque vel pretium aptent sociis, curae magna litora ligula dapibus ultricies ante sapien blandit, ac praesent tempus scelerisque elementum nulla curabitur. Placerat habitasse dapibus ultrices dictumst sem habitant a, dolor bibendum elementum potenti ligula venenatis blandit tristique, sagittis fringilla massa convallis ad montes.

[/wc_hero]

Omit content

In order to use the photos together without the written content, just use the first line of the shortcode without the [/wc_hero] or body content.

lab hero image
avatar image of woman
[wc_hero media_id=8565 avatar_media_id=8557 /]