Alternative Landing Page Graphic

A custom banner consisting of images and/or text that site managers/editors can design and add to their site.

An alternate landing page graphic is one that is placed directly below the horizontal navigation and spans the width of the navigation.  Since the image spans the page and will be viewed on multiple screen resolutions the image should be at least 2,000 pixels wide. The height of the image however can vary as needed.  The alternate landing page graphic of the hospital shown above is 2,000 pixels wide by 400 pixels tall.

Here's how you add the image:

  1. Upload the image to your default images folder.
  2. Go to the page you wish to add the alternate landing page graphic to.
  3. Click on the "add, edit or remove a portlet in the header area that spans columns one and two plus the content area" link (the link to the uppermost portlet area)
  4. In the Header Portlet A column, select "Static text portlet" from the drop down menu
  5. Add the image to the portlet (just like you would add an image to a page)
  6. Click on the HTML button in the editor.
  7. Your code should look something like this:
    <img class="image-inline" src="resolveuid/7ac280d38c93450da908a4f421da9956"  />
  8. You need to add width="100%" so that your code now looks like this:
    <img class="image-inline" src="resolveuid/7ac280d38c93450da908a4f421da9956" width="100%" />
  9. Click the update button to get out of the html screen.
  10. Scroll down the page and check "omit portlet border"
  11. Click the save button and you're done

 

Examples

1. Department of Neurosurgery

Button Example

 

2. Department of Psychiatry

Alternate Landing Page Graphic 2

 

3. UNC Hospitals' Beacon Child and Family Program

Alternate Landing Graphic 3

 

4. Center for Women's Health Research at UNC

ButtonExample_09.png

 

5. UNC Center for Functional GI & Motility Disorders - they didn't place the graphic in the upper-most portlet, they placed it in the body text area.

Alternate Landing Page Graphic 1