Headers with the WP Display Header plug-in

updated: 29/1/2015

This post explains about how header images are set for sites using the WP Display Header plug-in.  If your not sure if this applies to your site, please ask the administrator.

It’s a three stage process:

  1. select and prepare your header image(s)
  2. upload the image(s)
  3. set which page you wish to use this image

1. select and prepare your header image(s)

Choose images at least around 960 pixels wide.  Remember that you’re only going to use a thin strip of the image, so pictures with an interesting feature which can be cut out are going to work best.  Use photoshop or another imaging program to adjust your image for best contrast and colour.

2. upload the image(s)

Sign in to your site dashboard and select Appearance > Header

  • Click to open the Header Image tab
  • Click the Add new image button
  • Choose the Upload Files tab (unless you’ve already uploaded the image) and select the first image you wish to use as a header
  • Click Select and Crop
  • To crop, drag the selection box to choose a good part of the image.  It’s better not to resize the selection box, just click in the centre of it, and drag the whole box into place.  When you’re ready click the Crop Image button.

Repeat for additional images to be used as headers.

Note – to delete a header image: select Appearance > Header, Header Image tab, mouse over the header image you wish to delete, click the X.

3. set which page you wish to use this image

To set the header image on a given page, edit the page, and scroll to the ‘Header’ panel.  Here you can choose to have:

  • a specific uploaded header for that page alone
  • no header image shown on this page
  • a random choice from all of the uploaded header images available

after making any changes, click the ‘update’ button

Change image thumbnail crop

Suppose you have uploaded an image, and placed it on your page or post as a thumbnail, but you’ve found you don’t like the part of the image which WordPress has used to make the default 150×150 pixel thumbnail.  Here is how to change the thumbnail:

STEP 1: Sign in to your site dashboard and click Media to show the Media Library

STEP 2: Find the image you want to change, mouse over it, and click ‘Edit’

STEP 3: Click the ‘Edit Image’ button

STEP 4: IMPORTANT – select the Thumbnail radio button (near the middle of page)

STEP 5: click and drag in the image area to define a new region – best to make it a square area, as the thumbnails are by square default.  You can make sure it is square by typing numbers in the Selection boxes near the middle of the screen.

STEP 6: When you are satisfied, click the crop button top left: 

STEP 7: Click the SAVE button under the image

STEP 8: Click the UPDATE MEDIA button

STEP 9: repeat steps 2-8 if you wish to do other images at the same time.

STEP 10: go back to the page with the image thumbnail, delete the thumbnail you placed there previously, and add a new image – remember to use the image from the Media Library Tab, don’t re-upload it from your computer (if you do, you’ll be back to where you started!)

Upload a new header image

STEP 1: To upload a new header image for your site, first choose an image, and size the part you wish to use to 187 x 1000 pixels.  If you’re not sure how to do this, perhaps ask a photoshop guru.  Large single images that are not too busy work well.

STEP 2: Then sign in to your site, and from the dashboard select Appearance > Header

STEP 3: Beside ‘upload image’, click Choose File and upload your image.  You can select from the images uploaded previously, or have a randome one from this set displayed on every page.

See also: change the header image for one page/post

Remove uploaded images

Q. How do you get rid of header images, e.g. that are collected in the “random” section of appearances?

A. If you have uploaded images and you wish to permanently remove them then:

STEP 1: Sign in to the dashboard for your site

STEP 2: click the Media button to open the Media Library

STEP 3: browse through the library to locate the image you wish to remove, mouse over it, and click ‘delete permanently’.  Or, to remove several images at once, click the check box to the left of several images, then select ‘delete permanently’ from the Bulk Actions drop down, and click the Apply button.

This works for uploaded header images as well as for uploaded images used elsewhere.

Change the header image for one page/post

If you find you do not have the correct level of access to carry out this task, please contact support for this WordPress.

To change the header image for a single page or post only:

STEP 1: prepare your image.  You will need an image file of at least 1000 pixels width, but it must also be under 1Mb (the maximum upload size).  If you don’t know how to do make an image file like this, perhaps ask a photoshop guru.

STEP 2: edit the page or post for which you want to set this as the header image

STEP 3: look for the ‘Featured Image’ panel near bottom right of the editing page.  Click ‘Set Featured Image’

STEP 4: drag and drop your image file to upload it

STEP 5: after the image uploads, towards the bottom of the image details you should find a link called ‘Use as featured image’  – click this, wait while this task is carried out, then DO NOT insert the image on your page or post, instead simply click the X top right of the window you’ve just used to close it.

STEP 6: click Update (or Publish) to save your page or post.

STEP 7: click to view or preview your page or post to see the result

note: the image size used for header pictures most sites here is 1000 x 187 pixels.  If you want to control precisely what part of a larger image is shown, try cropping your image to this size before uploading.

To remove a ‘featured image’

Edit the page or post where the image appears.  Find the ‘Featured Image’ panel towards the bottom right, and click ‘Remove featured image’.  Alternatively, you can open Media>Library and delete the featured image file.

Make an image gallery/slidehow

You may prefer to use the NextGEN galler – see post here

If you find you do not have the correct level of access to carry out this task, please contact synergy support.

How to make an image gallery/slidehow…

STEP 1: locate the image files you wish to use in a gallery

STEP 2: Sign in and begin editing the post to which you wish to add the gallery

STEP 3: Click to upload/insert media

STEP 4: Drag and drop the image files you located in STEP 1 to the Drop files here area

STEP 5: Wait while upload completes

STEP 6: DO NOT insert media into your post, instead simply close the Add Media panel.

STEP 7: decide where you would like the gallery/slideshow browser to appear in your post, and type the following short code there:

[[portfolio_slideshow]]

the gallery/slidehow will not be shown in the editing area, but will appear on your post.  You click to save as a draft, you can click to preview and you will see the gallery, or of course, you may publish, and then click to view the page.

TIP: If you wish to modify details (e.g. captions etc) of media you have uploaded, sign in, and select Media > Library from the dashboard.  You can edit details form here.