Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

How to add background image to page?


Reply

8 Posts   441 Views

Avatar
DowntownScience

11 July 2014 at 6:07am Community Member, 7 Posts

Let me preface by saying that I'm a network engineer...not a programmer! You're going to have to be very specific about paths and where to put this code in my files!

I've built a couple Silverstripe sites now which are very basic. I have a few different page types that use an image for a banner that is called through the ".ss" file within \templates\layout like so...

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
   <article>
      <div id="Banner">
         <h1><img src="themes/simple/images/Molecule2Banner.jpg" alt="Homepage image" /></h1>
      </div>
      <div class="content">$Content</div>
   </article>
      $Form
      $PageComments
</div>

I would like to add a Background Image to specific page types. Is there a "div id" for Background that I could use? I will only need to do this for a few pages so I don't mind setting it up manually in each page type. What's the easiest way to do this?

Thanks in advance.

Avatar
Devlin

11 July 2014 at 7:40pm Community Member, 215 Posts

I would like to add a Background Image to specific page types.

The tutorial section "Adding a staff section" explains how to add an image to a page.

http://doc.silverstripe.org/framework/en/tutorials/2-extending-a-basic-site#adding-a-staff-section

It's basically something like this:

// mysite/code/Page.php
class Page extends SiteTree {
   private static $has_one = array(
      'Banner' => 'Image'
   );
}

// mysite/templates/layout/Page.ss
<article>
   <div id="Banner">
      <h1>$Banner</h1>
   </div>
   <div class="content">$Content</div>
</article>

http://doc.silverstripe.org/framework/en/reference/templates
http://doc.silverstripe.org/framework/en/reference/image

Avatar
DowntownScience

15 July 2014 at 5:27am Community Member, 7 Posts

Thanks for the reply.

I have read through that section before, but didn't think it applied to my application. I'm trying to change the background of the page from a solid color to a wallpaper type image that I can type on top of.

What's in the building a basic site is not much different than adding an image through the CMS which I have already done. I don't want the text to wrap the images though in this particular instance.

Avatar
Devlin

15 July 2014 at 6:29am (Last edited: 15 July 2014 6:45am), Community Member, 215 Posts

I'm trying to change the background of the page from a solid color to a wallpaper type image that I can type on top of.

Sorry for not being clearer. It's the same principle, though.

// mysite/code/Page.php
class Page extends SiteTree {
   private static $has_one = array(
      'Background' => 'Image'
   );
}

// mysite/templates/Page.ss
<body style="background-image:url($Background.Filename);">

Avatar
DowntownScience

15 July 2014 at 6:58am Community Member, 7 Posts

Just to confirm....

I would like this background to be used on a page type I created named "ContactUs".

My ContactUs.ss already contains...

<% include SideBar %>
<div class="content-container unit size3of4 lastUnit">
   <article>
      <div id="Banner">
         <img src="themes/simple/images/Molecule3BannerLong.jpg" alt="Homepage image" />
      </div>
      <div class="content">$Content</div>

   </article>
      $Form
      $PageComments
</div>

Where do I put your code?

Likewise for ContactUs.php. It already contains...

<?php
class ContactUs extends Page {
}
class ContactUs_Controller extends Page_Controller {
}

Do I just overwrite this file with your code replacing "page" with "ContactUs"?

Also what is the difference between "extends Page" and "expends SiteTree"? Should I be using one over the other?

Thanks alot for your help.

Avatar
Devlin

15 July 2014 at 8:06am (Last edited: 15 July 2014 8:18am), Community Member, 215 Posts

That's a lot of questions.

Also what is the difference between "extends Page" and "extends SiteTree"? Should I be using one over the other?

Page is your default Page class and all your MyPage classes should extend Page. With that you "can inherit the methods and properties of" it.
http://php.net/manual/en/language.oop5.basic.php

SiteTree is the default CMS Page class. It should only be extended, if your MyPage doesn't want anything to do with the default Page class.

Do I just overwrite this file with your code replacing "page" with "ContactUs"?

This is dummy code. Never replace anything unless you're sure.

Likewise for ContactUs.php. It already contains...

If you'd include the $has_one in your mysite/code/Page.php, then $Background is available in all Page templates.
If you'd include it in your ContactUs class, then $Background is available in ContactUs.ss only.

My ContactUs.ss already contains...

This is a $Layout template located in a templates/layout/ folder.

If you like to use this image as background for the body tag, then you need to edit Page.ss (templates/Page.ss).

If you added the $has_one in ContactUs.php instead, then you need to copy templates/Page.ss to templates/ContactUs.ss and add the style attribute there.

Avatar
DowntownScience

15 July 2014 at 8:23am (Last edited: 15 July 2014 8:27am), Community Member, 7 Posts

OK...I think I'm getting there with all of this in my head!

// mysite/templates/Page.ss

I do not have a templates directory in mysite. Is this normal and do I just create one?

Also, how do I declare this background for use on only the ContactUs page if I have it in my default template?

Sorry for all of my confusion and thanks for your help and patience!

Avatar
Devlin

15 July 2014 at 9:30am (Last edited: 15 July 2014 9:36am), Community Member, 215 Posts

I do not have a templates directory in mysite. Is this normal and do I just create one?

That's a habit of mine, you can use "mysite/templates" and "themes/mytheme/templates" synonymously. I usually build all my themes in the in the 'mysite' folder.

Also, how do I declare this background for use on only the ContactUs page if I have it in my default template?

If that's the case you should add it in the ContactUs class only.

If your "ContactUs extends Page", you can add this style attribute to ~/templates/Page.ss and it will only be displayed if the current page has a assigned background image, e.g. ContactUs.