Forums → General discussion →

Best method for different banner images on different pages?

Feed 11 posts, 5 voices

Avatar
DavidCOG
96 posts

Hi,

I’m creating my first Frog site which will have a unique banner image per page, e.g. Home = cat image, About Us = dog image, Contact Us = fish image. Children should inherit the parent’s image (except children of ‘home’).

Can anyone recommend the best method for that? I could use a separate layout for each page, but that doesn’t seem very elegant.

Thanks.
 
Avatar
oweb
125 posts

You can add a new page part (beside body) named “my-img” with the green + button, for each page.
In this page part, write the name of your image : “my-dog” if your picture is “my-dog.jpg”…
In your layout, add this code (where you want to add the banner) :

<img src="<?php echo URL_PUBLIC; ?>/public/your_img_directory/<?php if ($this->hasContent('my-img') != '') {
    echo $this->content('my-img'); }
      else {
    echo 'my_default_img'; } ?>.jpg" width="468" height="60" />

my_default_img is your default picture, if you add page with no specific banner…
 
Avatar
DavidCOG
96 posts

Thanks. I gave that a go, but no luck.

I created a ‘Banner’ page part for the home page and added your code, then added the following to Normal layout:

<div id="banner"><?php $this->content('Banner', true); ?></div>

Nothing is output.

Any more suggestions gratefully received. :)
 
Avatar
DavidCOG
96 posts

OK, I spotted my silly mistake: missing ‘echo’. For anyone else wanting to do this:

1. go to page, click green ‘+’ to add page part
2. I called mine ‘banner’ (ignore the fact that it capitalises it as ‘Banner’ – a little confusing)
3. add whatever code you want to ‘Banner’, e.g.:

<div id="banner"><img src="images/banner-dog.jpg" width="940" height="170" /></div>

4. go to Layouts and edit the appropriate layout, e.g. ‘Normal’
5. add e.g. 

<?php echo $this->content('banner', true); ?>

Done. Easy. :)
 
Avatar
DavidCOG
96 posts

Having worked that out, I’ve thought of another, arguably better method:

1. add the following code to relevant layout:

<body id="page-<?php echo $this->slug(); ?>">

2. this now gives per page identification for CSS, e.g. <body id=“page-about-us”> and we just need to add a div for the banner container

3. add some CSS:

body #banner {background:url(banner-default.jpg) no-repeat; height:170px; width:940px;}
body#page-about-us #banner {background:url(banner-dog.jpg) no-repeat; height:170px; width:940px;}

That gives default image and custom images for any page.
 
Avatar
redcrew
191 posts

Given images are named uniquely for each page, this code provides another method for displaying a different image for each page (thanks to David R. for sharing this with me last summer)

<?php if ($this->slug() != '') : ?>
<img src="<?php echo URL_PUBLIC; ?>public/images/<?php echo $this->slug(); ?>.jpg" alt="" width="652" height="114" />
<?php else: ?>
<img src="<?php echo URL_PUBLIC; ?>public/images/home.jpg" alt="" width="652" height="114" />
<?php endif; ?>
 
Avatar
DavidCOG
96 posts

Good tip. Thanks.
 
Avatar
DavidCOG
96 posts

oweb,

I ended up using your method. Very effective.

One nicety I would like is to have pages inherit the image from their parent, e.g.:

Animals
…Dogs
…Frogs
Fruit
…Apples
…Oranges

So, ‘Animals’ uses ‘animals.jpg’ and I’d want Dogs and Frogs to automatically inherit the same.

‘Fruit’ uses ‘fruit.jpg’ and I’d want Apples and Oranges to inherit fruit.jpg.

Has anyone solved that problem? :)
 
Avatar
David
1493 posts

Hi David: I use the add-id-to-body solution that you proposed in post #5. That does exactly what you want. I think. :) But probably easier now you’re using oweb’s approach is simply to tweak the second line of his code:

    echo $this->content('my-img',true); }

The true statement means that as long as child-pages do not have their own “my-img” page part, they will inherit this one from the parent page. (And works for all “descendent” pages, if you see what I mean!) Explanation is in the docs.

Hope that works/helps!
 
Avatar
DavidCOG
96 posts

Hi David,

Thanks for your reply. The client wants to control the banner images – which the CSS method wouldn’t allow.

I’ve now got a small problem with oweb’s method: it doesn’t work if ‘banner’ Page Part is present but empty. That’s an issue because ‘banner’ is automatically created for children of ‘Home’.

No doubt there’s an easy solution… but it’s eluded me for the past 45 minutes. ;)
 
Avatar
DavidCOG
96 posts

Here’s the final code I used in the ‘banner’ snippet:

<img src="<?php echo URL_PUBLIC; ?>public/banner/<?php if ($this->hasContent('banner') === true && $this->content('banner') != '') {
   echo $this->content('banner',true); }
else {
   echo 'banner-default.jpg'; } ?>" width="940" height="170" alt="image description" />

So, if no ‘banner’ page part is present or has no content, the ‘banner-default.jpg’ is used.
 
Avatar
aud
1 posts

I have trouble with this part:

I created a ‘Banner’ page part for the home page and added your code, then added the following to Normal layout:

<div id=“banner”><?php $this->content(‘Banner’, true); ?></div>

what is the normal normal layout file called?

Many thanks