How would you approach this? Wordpress

How would you approach this? Wordpress Rate Topic:

#1 Crispy

Advanced Member

Group: Members
Posts: 327
Joined: 10-July 09
Reputation: 2
Gender:Male
Location:Wrexham, North Wales
Experience:Nothing
Area of Expertise:Designer

Posted 06 January 2012 - 01:51 PM

Hey guys,

Looking for some advice on a site I'm building for a client, scratching my head about the best way to approach this problem.

My basic layout looks like:

[Logo] - [Navigation]

[Big Image]

[Testimonial Slider]

[Content]

I've put the Logo, Nav, Big Image and Testimonials in the Header.php file, so it's the same across all pages, simple!

But now the client says they want a different image on every page! (6 pages)

And I'm debating the best way to do this?

Is there a way of avoiding having to make a custom template for every different page?

Thanks,
Chris

#2 itodd

Dedicated Member

Group: Members
Posts: 111
Joined: 17-April 11
Reputation: 29
Gender:Male
Location:UK
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 06 January 2012 - 02:11 PM

Wordpress puts classes on the body tag, use css to set the image url depending on each page's body class

#3 Crispy

Advanced Member

Group: Members
Posts: 327
Joined: 10-July 09
Reputation: 2
Gender:Male
Location:Wrexham, North Wales
Experience:Nothing
Area of Expertise:Designer

Posted 06 January 2012 - 02:26 PM

How would you do that in CSS? Set it up as a background image and do it that way? So

Body.ClassName BigImage { bakground-image:url('url.jpg'); } - something a long those lines?

Thanks for your quick response!

#4 Pedro

Expert

Group: Members
Posts: 740
Joined: 30-November 08
Reputation: 62
Gender:Male
Location:London
Experience:Intermediate
Area of Expertise:Web Developer

Posted 06 January 2012 - 02:29 PM

You could do it with CSS, by changing the background image of a HTML tag according to the body class.

To get the classes applied to the body tag, do this:

<body <?php body_class();?>>

Another way of doing it, is, using the is_page() template tag, e.g:

<?php if ( is_page('About') ) { ?>
    <img src="<?php bloginfo('template_url')?>/images/about.gif" title="" />
<?php } ?>
<?php if ( is_page('Contact') ) { ?>
    <img src="<?php bloginfo('template_url')?>/images/contact.gif" title="" />
<?php } ?>

This post has been edited by Pedro: 06 January 2012 - 02:29 PM

#5 itodd

Dedicated Member

Group: Members
Posts: 111
Joined: 17-April 11
Reputation: 29
Gender:Male
Location:UK
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 06 January 2012 - 02:36 PM

Crispy, on 06 January 2012 - 02:26 PM, said:

Body.ClassName BigImage { bakground-image:url('url.jpg'); } - something a long those lines?

Essentially yes.

body.pagename1 .mainimage {background-image:url('url1.jpg');}
body.pagename2 .mainimage {background-image:url('url2.jpg');}
body.pagename3 .mainimage {background-image:url('url3.jpg');}
body.pagename4 .mainimage {background-image:url('url4.jpg');}

etc...

Pedro, on 06 January 2012 - 02:29 PM, said:

Another way of doing it, is, using the is_page() template tag, e.g:

<?php if ( is_page('About') ) { ?>
    <img src="<?php bloginfo('template_url')?>/images/about.gif" title="" />
<?php } ?>
<?php if ( is_page('Contact') ) { ?>
    <img src="<?php bloginfo('template_url')?>/images/contact.gif" title="" />
<?php } ?>

This is how I originally thought to do it and it does the same job, just more to write

#6 Crispy

Advanced Member

Group: Members
Posts: 327
Joined: 10-July 09
Reputation: 2
Gender:Male
Location:Wrexham, North Wales
Experience:Nothing
Area of Expertise:Designer

Posted 06 January 2012 - 03:10 PM

Thanks for your help, the classes might be simpler for me

But thanks!

#7 Renaissance-Design

Available for custom WordPress work

Group: Moderators
Posts: 3,592
Joined: 12-August 10
Reputation: 559
Gender:Male
Location:South Wales
Experience:Web Guru
Area of Expertise:Designer/Coder

Posted 06 January 2012 - 04:21 PM

Use the page's featured image. Set a custom size for it in your theme's functions.php, and you can get the featured image outside of the Loop by passing $post->ID.