Headway Theme: How To Put Featured Images Only on Archive Pages
One of the neat features of the archive pages I have on different blogs that I’ve built is that I can customize them to do almost anything—like showing a post with a thumbnail to the left. When I attempted to do something like this on the Headway theme, my first thought was to go try and find a way to change the way the post metadata was shown to try to put in the code I needed.
However, Headway already had the feature I desired, something called “Featured Images”, but the problem was that I could not get the Visual Editor to behave.
What I Tried
When you’re in “Design” or “Manage” mode in the Visual Editor and you edit the content block, there is a tab for “Featured Images”. You would think that from there you could turn it off, because when you click to turn featured images off, the display hides the image. Then you hit save, figuring the job is done, and when you go to test it out on a page, you find that the images are still there.
I don’t know about you, but a smaller thumbnail featured image next to a full sized feature image—not cool.
So, then what I did was try the “Config” tab adding a Custom CSS tag to the page. For the life of me, I couldn’t get the thing to display.
What Worked
So, that meant that I had to implement a hack. I used Firebug to find the image, and the corresponding link, and then I found the entire path to the link (look above the window that displays the html), using body.single instead of body.custom I was able to path all the way down to the link and hide it using display:none.
It was ugly:
body.single div#whitewrap div#wrapper-1 div.grid-container section.row section.column div#block-3.block div.block-content div.loop div.post a.post-thumbnail<br />{<br /><%%KEEPWHITESPACE%%> display: none;<br />}However, this did the trick. Posts no longer display the featured image and the archive page still does.
So How Do I Use It?
Once this is in place, you’ll need to specify a featured image in order to see the image on the left in the archive pages. If nothing is specified, you will not see one.
This is done on the post page. When you’re editing an individual post, you should see two widgets in the right hand column that look like these:
If you do not, scroll up to the top of the page and find the tag for “Screen Options”. Click it, and all post widgets that can be displayed will show:
Check the boxes for “Headway: Featured Image Position” and “Featured Image”. They should immediately appear, and you can click “Screen Options” to close.
Setting the featured image is as simple as clicking on the “Set Featured Image” link and then finding the appropriate image in the media library (you can also specify a URL). Once you’ve found the image, instead of clicking the “Insert into Post” button, click the link to make it a Featured Image.
Once you’ve done that, it will show up in the widget that I snapshotted above.
Now you have the left (or right, depending on the Image position widget) image!
(Visited 7 times, 1 visits today)
