Mystique Theme – Photo Gallery Headers

A New Header In Action

I finally got round to updating to the new Mystique theme (3.1) for my Website.

After a brief read around the web, I was slightly concerned by the number of difficulties folks seem to be having with the transition. I’ll be honest I found it all straight forward, but I did do quite a lot of research before attempting it. I also took a crash course in Child Themes, using the default TwentyEleven WordPress Theme. Learning about Child Themes has been a great help but for this particular walk-through it is not required.

So the only thing that I didn’t get working instantly was the new header / banner system. Like many, I miss the scrolling headers that show our Featured Posts. I also read that many others miss this feature and a lot of folks are having trouble even getting the new system to work at all.

A New Header In Action
A New Header In Action

Nothing like a challenge… So I have done it myself. It all works great and not only will it show images that link to posts but your choice of pages too, which is great.

The hardest part really (for me), was creating the header images. To do it right it takes time and I was very keen to get the site running. I will tidy up the actual header images later. There are also other things that can be done with this feature but my desired result was a similar thing to the old system. So that is what this walk-through is all about.

Here’s how it’s done.

First you will need to activate and set up the  Mystique Photo Gallery Module. For this walk-through you should use all settings exactly as I have, to avoid confusion. I elected to leave Captions OFF as there seem to be many insurmountable problems with some of my plugins in that area.

The important thing here is the Dimensions. This must match your header image exactly.

Mine Dimensions are set at 960×320.

Mystique Photo Gallery Settings
Mystique Photo Gallery Settings

Make Some Artwork

Now you need to make some headers. These are the banners that will lead to your posts or pages and must be the correct size. So make a blank banner that is exactly 960×320 Pixels and save it. Or you can use mine.

960x320 Blank Template
960×320 Blank Template

To test everything is working you can skip designing your header/banner and just upload the blank one. Then when that is working go on to make some new banners and add them in the same way.

To design the header quickly, I found that keeping the blank banner open in a photo editor and then simply copying and pasting some of my images on to that, resizing over the blank template image until it looks OK and then saving as a new image, means that the header image always retained the correct dimensions.

Attach and Feature Your Media

OK so the last steps are as follows.

Go to the Media section of your Dashboard.

The Attach & Featured Areas
The Attach & Featured Areas

Click Add New.

Select Files – Upload your banner image(s).

Once the images have finished crunching click Save all changes.

Click the Featured Star so that it turns yellow.

On main screen you will see that the image you just uploaded is marked as (unattached).

Click Attach.

You will then be greeted with the Find Posts or Pages dialog.

Find Posts or Pages
Find Posts or Pages

Simply search for the post or page you want to connect the image banner to. This will be the post or page that will show when anyone clicks on that particular image header.

Click Select.

Your Media section should now look something like this.

Working Dashboard Media Area
Working Dashboard Media Area

That’s it you’re done! Check your site and see how it looks. (Refresh the page obviously).

I hope that this helps some folks and of course as usual, if there are any questions please drop me a line.