How to have a static image in the home page header

• mac2

  said

  Hi,

  I want to place an image instead of a slider in the Home Page header. But I have tried many combinations of Static Content, Custom Headers, etc. and no matter what I do, the image aligns right with extra space on the left side and about 75px of header space above the image.

  I want the Home Page layout to be exactly like the Razor demo Home Page but with an image instead of the slider. The image dimensions are the same as the Razor slider. I took a screen shot but I don’t see anyway of including it with this post.

  Your help will be greatly appreciated.

• jeffw

  said

  There are a couple of techniques for this.

  Here’s the first technique…

  Create a new static block (Static Content > Add New), give it an appropriate title such as “home page static header” for example, and then paste the URL of your header image into the Image input box in the Background metabox. Leave the background image options at their defaults (Left, Top, No Repeat).

  Now in the article editor above, click the Text tab and add this content…

  <div style="height:385px"></div>

  The header area has a default height of 150px, and so what we are doing in the above HTML is adding a further 385px of height to the static content, thus giving it a total height of 150 + 385 = 535px, the same height as the demo slideshow.

  Save the static block.

  Now go to the layout manager (Appearance > Layouts) and in the Headers table click on the Home Page header to edit its settings. Set its Primary content option to reference “home page static header” (or whatever you named the static content we just created). Save the header.

  Back in the layout manager, under the “Layout & Template Defaults” heading, make sure the Home Page context is set to the “Home Page” layout.

  Your home page should now be displaying your image in the header in place of the slideshow.

  I’ll describe the second technique in the post below.

• jeffw

  said

  Technique two…

  Create a new static block (Static Content > Add New), give it an appropriate title such as “home page static header” for example.

  Now in the article editor click the Text tab and add this content…

  <div style="margin: -150px 0 -60px -22px">
    <img src="/the/path/to/my/header/image.jpg" width="960" alt="text description of image">
  </div>

  Static content containers and header containers have inbuilt margins and padding, so what we are doing in the above HTML is negating the margins and padding in a surrounding div container.

  Naturally you’ll need to adjust that HTML to include the URL of your image and its text description.

  Save the static block.

  Now go to the layout manager (Appearance > Layouts) and in the Headers table click on the Home Page header to edit its settings. Set its Primary content option to reference “home page static header” (or whatever you named the static content we just created). Save the header.

  Back in the layout manager, under the “Layout & Template Defaults” heading, make sure the Home Page context is set to the “Home Page” layout.

  Your home page should now be displaying your image in the header in place of the slideshow.

  The advantage of this technique is that the image can have an alt description, and it scales responsively rather than being a fixed height.

  References:
  http://www.w3schools.com/css/css_margin.asp

• jeffw

  said

  NOTE: If you ever need to show us a screenshot of something you can upload it to any cloud service and include a link to the image in your post.

• mac2

  said

  Thanks for the help, Jeff. The first technique worked perfectly for the header image. Now, I want to do the same thing, but with a Master Slider slider instead of an image. The slider uses shortcode or a PHP function, which is placed wherever the slider will be shown. I have the shortcode and the PHP function but no URL for the slider.

  So I put the slider shortcode in the Visual section of the Static Block and I used <div style="width: 960px; height:385px;"></div> in the Master Slider custom styles box. That sized the slider correctly in the header. But there is still a 95px space above the slider. If I put the <div style="width: 960px; height:385px;"></div> html in the Text section of the Static Block it just adds more space to the header.

  I will appreciate any guidance you can give me.

• jeffw

  said

  Firstly, to include code in your posts such as shortcodes, HTML, CSS, JavaScript, PHP → please follow the instructions on the forum home page. I have edited your post to add the necessary tags so that we can all now see the HTML you included in it.

  If I were using a slideshow plugin that provided me with a shortcode to display a slideshow I would use the second technique that I described above, and add the slideshow’s shortcode to the HTML in place of the image tag.

  When adding HTML or shortcodes to your content it is always best to use the Text tab, not the Visual tab, and stick with the Text tab for that article. (If you switch to the Visual tab WordPress will rewrite your HTML and will add paragraph and break tags where you don’t want them, thus messing up the display of that content.) Also, in the Content Options metabox set the Auto Paragraphs option to “Off”.

  Alas, I know nothing about Master Slider. For all I know it may add its own padding and/or margins around its slideshow. The only way I can help you with this is if you show me the issue on a live web page.