Marsha Docs

Images

Please be aware of the sizes of images you are uploading and using on your pages. Your images should almost never be larger than 2MB or wider/taller than 1000 pixels. Also, you can safely compress all images to ensure fast page loading by uploading them to TinyJpg and then uploading the compressed version.

Images should be selected with the audience in mind – showing students, activities, and locations that will resonate with each specific audience. Images should appear authentic and candid, as opposed to staged and formal. Please do not use generic clipart, images of icons, photo collages, filters that distort the images, or older graphics that are unrelated to Marshall University. Do not use an image of text when you can use plain text to communicate the same information. Do not ever use any type of “under construction” type image/graphic on a page.

For images to add to your website you’re welcome to use any photo found on muphotos.marshall.edu.

Hero/Featured Image

You can added a hero image to any page by including a Featured Image in the WordPress editor. The correct size of the image should be at least 2,000 pixels wide and the height should be no larger than 750 pixels.

You can position the hero image within the hero section using the Background Position meta box.

Hero Area Buttons

You’re able to add a primary and secondary call to action button in the hero area of your homepage similar to what we’re using on UComm’s site.

When editing the homepage of your site you will see a new meta box on the right-side titled Hero Content with several input fields. You can set the:

  • Primary/Secondary Button Title: This will be the button text. It MUST be a call to action using the active voice.
  • Primary/Secondary Button Link: This is the URL of the page you wish to link to from your button.
  • Primary/Secondary Button Video: If you are linking to an external YouTube video check this box and it’ll display a special button for videos.

This will allow sites to have some important calls to action right there in the hero area. Just remember that the text for the buttons should use active voice and be a call to action for the individual visiting the site.

Positioning with Background Position

If you enter ‘0’ for the first number it’ll put the left edge of the image on the left edge of the browser window.

If you put ‘100’ in for the first number, it’ll put the right edge of the image on the ridge edge of the browser window.

If you enter ‘0’ in the second number, it’ll put the top of the image at the top of the hero image section, cutting off what’s at the bottom outside of the height for the hero image.

If you enter ‘100’ in the second number, it’ll put the bottom of the image at the bottom of the hero image section, cutting off what’s at the top outside of the height for the hero image.

If you enter ’50’ for this number, it’ll put the center of the image in the center of the hero image area.