Home/ Questions/Q 8655701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:06:01+00:00

Live site. My site is set up so that an image or gallery is

  • 0

Live site.

My site is set up so that an image or gallery is displayed over a wooden background(#above), with the rest of the content below on a linen background(#below). This works well on every page but the portfolio page- the wooden space has no content until a specific gallery is selected.

Is there a way to have the linen background & content(#below) show instead of the plain wooden background(#above), until the gallery has been selected? (And if so, is it possible to have it appear to be sliding down from the top of the screen?)

header.php

<body>
<div class="above">
    <div id="header">
        <div class="logo">
            <a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Urban Palate logo" id="logo" /></a>
        </div><!-- end logo -->
        <nav>
            <ul>
                <li><a href="?page_id=7"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="Urban Palate intro" /></a></li>
                <li><a href="?page_id=12"><img src="<?php echo get_template_directory_uri(); ?>/img/portfolio.png" alt="Urban Palate portfolio" /></a></li>
                <li><a href="?page_id=15"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="Urban Palate blog" /></a></li>
                <li><a href="?page_id=10"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="Urban Palate contact" /></a></li>
            </ul>
        </nav>
    </div><!-- end header -->

portfolio.php

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>  

    <div class="gallery">
       <?php     
            if( is_page( 24 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider1]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 26 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider2]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 28 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider3]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 30 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider4]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 32 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider5]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 34 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider6]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 36 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider7]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 42 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider8]');
            } else {
              // output standard content here
            }

        ?>

    </div><!-- end gallery -->
</div><!-- end above -->
<div class="below">
    <div class="blurb">
        <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio_blurb.png" alt="see who has experienced our fabulous + creative and beautiful + cutting edge decor firsthand" />
    </div><!-- end blurb -->
    <div id="client-list">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
    </div><!-- end client-list -->


<?php get_footer(); ?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a lot of improvements that could be made to the code above. Investigate the switch statement, or at least ditch all the else blocks. Anyway,

    In your header.php, try 

    <body>
<div class="above <?php if (is_page(1)) echo 'short'; ?>">
    <div id="header">
        <div class="logo">
        // etc...

    You will need to change the is_page(1) part to have the correct page number. I don’t know how you figure this out with WordPress, but if you can do it for each gallery, you can do it for the empty portfolio page.

    Then, in your site css:

    .above.short {
    height: 200px;
}

    My solution is ugly, but it will fit in with the rest of the PHP you’ve got there. If you paid developers for that work, get new developers.

    Somebody who knows WP may be able to tell you how to give div.above an additional class without resorting to inline code like I’ve done. This would be a better solution.

    • 0