CAES Office of Information Technology

The 2019 CAES-Extension Theme allows for full width templates. This means certain parts of your website’s template can reach from edge-to-edge of the page, like the header, navigation, and footer.

The Cover Image Shortcode takes advantage of this by setting up a “cover image”, a background image with overlaying text, that can be used as a banner at the top of your page or post, or even within the body content.

The shortcode can be placed in the body of any post or page, though it will only reach edge-to-edge on pages without a sidebar.

• The Shortcode
• Uploading the image, and copying the image link
• Hiding the Title Text on pages
• Cover image on pages with a sidebar

The Shortcode

Here’s an example of what the [coverimage] shortcode will look like:

Lets break down the four important parts:

1. URL: The url= part of the shortcode should be followed by a link to the image you have already uploaded to your WordPress site’s Media Library. See below for more information on uploading the image and copying the link.
2. Dim: The dim= part of the shortcode should be followed by any number 1 through 10. The higher the number is, the darker the overlay is over the image. This should be adjusted to ensure the text over the image is easy to read.
3. Fixed: When set to fixed=yes, the cover image background will stick in place when the visitor scrolls, creating a parallax effect.
4. Text: The text inside of the [coverimage] shortcode will be centered and overlap the photo. Typically the text should be formatted as a heading 2.

Uploading the image, and copying the image link

When you choose a background image for the cover image, make sure it is sized more “landscape” instead of “portrait”, or that the image is wider than it is tall, for best results.

Once you have the image ready to go as a file on your computer:

1. Upload the image to your Media Library
2. Click on the image in the Media Library to view its Attachment Details
3. Click the text that says “Copy Link”
4. Paste the link directly after the url= part of your [coverimage] shortcode
5. If the link text in the shortcode is highlighted in blue, be sure to click on the link and click the “Remove link” button to remove the hyperlink

Hiding the Title Text on pages

When setting up a cover image at the top of a page, you may notice that the page title appears in-between the page navigation and the cover image.

If you would like the cover image to be the first thing on the page, without the title, edit the page and check the box next to “Hide Title”.

The end result looks like this:

Note that this option is only available for pages, and not posts.

Cover image on pages with a sidebar

Pages and posts that use a standard template with a sidebar can also use the cover image shortcode. The cover image will not reach edge-to-edge of the page, but can still be used as a banner.