3

How do you move the header (field_image) image above the title on a page?

Drupal 7/Zen Theme

This seems like it would be a simple thing to do. I've been messing around with trying to accomplish this by doing a few things suggested on other websites but cannot seem to get it to work.

I've tried editing the page.tpl.php file but that messes up my homepage.

I'm trying to do this without using panels or any other module.

Thanks!

Improve this question

3 Answers 3

Reset to default
2

If you want to change the page.tpl.php template file, but avoid it gets used for the front page, just:

  • Create the page--front.tpl.php file from the current page.tpl.php file
  • Edit the page.tpl.php file to move the image above the title

In this way, page--front.tpl.php will be used with the front page, and page.tpl.php will be used with the other pages.

Improve this answer
1

What version of Zen? And is this a background image, or just an image in the header?

For a fixed width theme, you can insert a background image into the #header with the following CSS:

#header {
  margin: 0px 0 0 0;
  height: 193px;
  background: transparent url(images/header.png) no-repeat top center;
}

The Zen 5 markup is a little leaner, and you probably have to add a #header-bgimg div in your page.tpl.php file just inside the regular #header div. Then you can add a header image like this:

#header-bgimg {
  width: 100%;
  padding-top: 33.3%; /* Responsive Scaling: 333px/1000px = 0.3333 */
  background-image: url(../images/header.jpg);
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
}

This time I used additional directives to make it a responsive header image. If you don't use the additional wrapper, you collide with some of the Zen 5 CSS.

Placing other objects in your header might require a #header-inner wrapper just inside the #header-bgimg div.

Improve this answer
2
  • There is no need to create a separate page--front.tpl.php template for a different bg image. Do it in CSS with .front #header-bgimg {...}
    – Tom Stermitz
    Commented Feb 8, 2013 at 17:27
  • Maybe I didn't understand your question. You don't mean header image, maybe you mean a field/CCK image in the node? I often turn off the Page title, and write my own as an <h2> ... </h2> which I can put below the image.
    – Tom Stermitz
    Commented Feb 8, 2013 at 17:34
0

page--[node-type].tpl.php may help.

What I mean is if you have made a page.tpl.php which achieves the desired functionality then simply renaming this file to page--[node-type].tpl.php will mean that this template will not interfere with your homepage.

Improve this answer
1
  • You should really expand on this. As it stands, it's not really an answer to the question - more of a starting point for an answer.
    – Chapabu
    Commented Nov 4, 2012 at 11:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.