I am new to Drupal and currently working on a theme from scratch. I have been using the tutorial How to create a simple Drupal 7 theme from scratch to help me. I have got most the things working required for the site I am working on apart from the header. I would like to add an image to the header which would be floated to the left of the text.

So far I have tried to create a content type with an image and assign it to the header block I have created. When I tried assigning a content type the header disappeared.

Any suggestions?

  • 2
    You might need to provide more information. Do you mean on node pages you want to show an image in the header that is specific to that node? Or something else?
    – rooby
    Mar 15 '14 at 2:07
  • Hello. Thanks for the reply. Sorry for my vagueness. I will try to explain in a little more detail. I want to try and create a header with an image floated to the left of the text that will only appear on the front page (I've worked out how to make the header only appear on the front page so that part is fine). I've created an example of what I want my header to look like here bayimg.com/CALaeaaFM . I'm trying to do that on Drupal but the closest I can get to it is this bayimg.com/ealAhaAfM . Every time I apply a content-type with an image the header disappears. Mar 15 '14 at 11:10

I would not create a content type just for adding a single image to the header in any case, but even more so in this case as it appears that is you website's logo (is that right?).

If it is your logo then the best way to achieve this is via the settings of your theme. Almost all themes have a setting for the logo image.

Go to admin/appearance then click the settings link for your theme. You will see a "Logo image settings" section on the settings form, which usually by default has a check box "Use the default logo", which will be checked by default.

You can un-check that check box and then enter a path to your logo image file, however the easier and better way is to leave that check box checked and then in your theme directory replace the default logo with your own, by renaming your logo image to logo.png and copying it over the one that is already there.

On that theme settings page there is also a section for "Toggle display". In this section make sure that "Logo" is checked.

Then the site will be using your logo, which normally by default will be in the header already.

Then you just have to use a little css to position it as you want it, or if it is not in the right place for you, edit the page.tpl.php of your theme and move the logo to where you want it, then tweak styles with css as needed.

If you only want the logo on the home page, make a copy of your page.tpl.php in your theme and call it page--front.tpl.php - This means it will only apply to your front page (see drupal 7 template suggestions for more info).

Then you can have the logo printing on the front page but you can remove it from your normal page.tpl.php so it doesn't appear on other pages.

If I was wrong about it being your site logo or it is the logo but for some other reason you don't want to use the site logo setting, you can do one of a few things.

If the image is purely decorative, it is generally considered a good idea to make it a css background image, in which case just add the image to your theme's images directory and add some css to your theme to set it as the background image of your text block in your header and use padding so that the contents don't overlap the image.

If the image is not purely decorative and it actually has meaning to the user, you want screen readers to read it as an image so disabled users can see it.

In this case you need to use an img tag.

So you can do one of these things:

Make the page--front.tpl.php and manually add an img tag in the place you want it, put the image in the images directory of your theme, then style with CSS.

The other option is to create a custom block via the block UI.

To do this go to admin/structure/block and click the "Add block" link. In the block body field add the img tag you want. The easiest way to do this is make sure you have a wysiwyg text editor (for example, ckeditor or wysiwyg module) and use it for block creation. Then you can upload an image directly via the wysiwyg editor instead of messing around uploading files manually to your server, which is not ideal.

In this way you can either make a block for your image and a block for the text to the right of it, or if they directly relate to each other you can add them in the same block.

Then in the block visibility settings you can make it so that it only shows on the home page (or you can use some other block management system to do that if you prefer).

  • Thank you for this very informative reply, I really appreciate it! After I added the logo to the page template and .info file everything was a breeze from there. I have managed to get the logo floated to the left of the text, just as I wanted it. Thanks! :) Mar 16 '14 at 13:59
  • No troubles. If you select one of the answers as correct (with the little tick icon) the system will mark this question as having a suitable answer.
    – rooby
    Mar 16 '14 at 14:51

The easier solution i can think of involves only CSS.

You can style the block to have that image as background, and set the left padding wide enough to keep the block content from covering it.

  • Hey. Thanks for the reply. I think that is what I will do if I can't add the image with Drupal. I will try adding it to my page template. Mar 15 '14 at 13:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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