Support

Account

Home Forums ACF PRO 2nd page based off of data on first page Reply To: 2nd page based off of data on first page

  • Here is the full template file with both layouts. It might not be the prettiest WordPress code, but I’m more of a static html guy haha:

    
    <?php
    /*
    Template Name: Property Page
    
     */
    
      get_header(); 
    
      $cf_property_title  = get_field('cf_property_title');
      $cf_property_address = get_field('cf_property_address');
    
      $main_banner_image = get_field('main_banner_image');
      $mls_number = get_field('mls_number');
      $listing_price = get_field('listing_price');
      $bedrooms = get_field('bedrooms');
      $bathrooms  = get_field('bathrooms');
      $square_feet  = get_field('square_feet');
      $garage = get_field('garage');
      $property_description = get_field('property_description');
      $map_short_code = get_field('map_short_code');
      $matterport_iframe = get_field('matterport_iframe');
      $floor_plan = get_field('floor_plan');
    
      $area_title = get_field('area_title');
      $area_description = get_field('area_description');
      $area_image = get_field('area_image');
    
      
      if ( get_query_var( 'subpage' ) ) {
          // if ?subpage=flyer is used, load the content for flyer-1
       ?>
    
       <?php  the_post(); ?>
    
         <!--  ==================== -->
         <!--  flyer section -->
         <!--  ==================== -->
    
          <?php
            //contact info
          $first_name = get_the_author_meta('first_name');
          $last_name = get_the_author_meta('last_name');
          $id = get_the_author_meta('ID');
          $author_id = "user_".$id;
          $agency = get_field('agency', $author_id );
          $agency_logo = get_field('agency_logo', $author_id );
          
          $website_url = get_field('website_url', $author_id);
          $email_address = get_field('email_address', $author_id);
          $phone_main = get_field('phone_main', $author_id);
          $cell_phone = get_field('cell_phone', $author_id);
          $fax_number = get_field('fax_number', $author_id);
          $street_address = get_field('street_address', $author_id);
          $address_line_2 = get_field('address_line_2', $author_id);
          $city = get_field('city', $author_id);
          $zipcode = get_field('zipcode', $author_id);
          $profile_pic = get_field('profile_pic', $author_id);
          $email_address = get_field('email_address', $author_id);
    
          ?>
    
            <section class="header">
              <div class="container">
                <div class="row">
    
                  <div class="col-xs-6 text-left">
                    <h1 class="company"><?php echo $agency;?></h1>
                    <h2 class="realtor"><?php echo $first_name." ".$last_name; ?></h2>
                  </div><!-- close col -->
                  
                  <div class="col-xs-6 text-right">
                    <h1 class="price"><?php echo $listing_price;?></h1>
                    <h2 class="address"><?php echo $cf_property_address?></h2>
                  </div><!-- close col -->
    
                </div><!-- close row -->
              </div><!-- close container -->
            </section>
    
            <section class="banner-image">
              <div class="container">
                <div class="row">
                  <div class="col-xs-12">
                    <img class="img-responsive" src="<?php echo $main_banner_image ?>'">
                  </div><!-- close col -->
                </div><!-- close row -->
              </div><!-- close container -->
            </section>
    
            <section class="main-content">
              <div class="container">
                <div class="row">
                  <div class="col-xs-3 left-column">
    
                    <img class="img-responsive logo" src="<?php echo $agency_logo; ?>">
                    <div class="contact-info">
                      <ul class="list-unstyled">
                        <li class="name"><?php echo $first_name." ".$last_name;?> </li>
                        <li>Phone: <?php echo $phone_main;?></li>
                        <li>Email: <?php echo $phone_main;?></li>
                        <li>Website: <?php echo $website_url;?></li>
                      </ul>
                    </div><!-- close contact info -->
                    <img class="img-responsive profile" src="<?php echo $profile_pic; ?>">
                  </div><!-- close col -->
    
                  <div class="col-xs-8 col-xs-offset-1 right-column">
    
                    <h1 class="title text-center"><?php echo $cf_property_title; ?></h1>
                    <p class="mls text-center">MLS <?php echo $mls_number;?></p>
    
                    <div class="row icons">
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bed.svg">
                        <p><?php echo $bedrooms;?> Bedrooms</p>
                      </div><!-- close col  -->
    
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bath.svg">
                        <p><?php echo $bathrooms;?> Baths</p>
                      </div><!-- close col  -->
    
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/plan.svg">
                        <p><?php echo $square_feet;?> Sq. Ft.</p>
                      </div><!-- close col  -->
    
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/garage.svg">
                        <p><?php echo $garage;?> Car Garage</p>
                      </div><!-- close col  -->
                        
                    </div><!-- close row  -->
    
                    <div class="overview">
                      <h4 class="sub">Highlights</h4>
                      <?php echo $property_description ?>
                    </div><!-- close overview -->
    
                  
                  </div><!-- close col -->
    
                </div><!-- close row -->
              </div><!-- close container -->
            </section>
    
           <!--  ==================== -->
           <!--  end of flyer section -->
           <!--  ==================== -->
    
        <?php 
    
      } else {
          // load normal landing-1
    ?>
    
         <!--  ==================== -->
         <!--  landing page section -->
         <!--  ==================== -->
    
          <header>  
            <div class="above-nav">
              <div class='main-image-wrap limit'> 
                <img class="img-responsive" src='<?php echo $main_banner_image ?>' />
                <div class='main-image-overlay'>
                  <h2 class='title text-center'><?php echo $cf_property_title; ?></h2>
                  <h4 class='subtitle text-center'><?php echo $cf_property_address; ?></h4>
                </div><!-- end description div -->
              </div><!-- close main-image-wrap -->
            </div><!-- close above-nav -->
    
            <div class="nav-wrapper" style="height:51px;"> <!-- Prevents content jump when navbar becomes fixed -->
              <nav class="navbar navbar-default navbar-inverse" role="navigation">
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  </div>
    
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="">
                    <ul class="nav navbar-nav">
                      <!-- <li class="pull-left"><a href="#">logo</a></li> -->
                      <li class=""><a href="#overview">Overview</a></li>
                      <li><a href="#photos">Photos</a></li>
                      <?php
                      if( !empty($matterport_iframe) ): ?>
    
                        <li><a href="#matterport">Matterport 3D Tour</a></li>
                      <?php endif; ?>
                      <li><a href="#map">Map</a></li>
                      <li><a href="#area">About The Area</a></li>
                      <li><a href="#contact-section">Contact</a></li>
                              
                      <li class="social pull-right"><a href="#social">Social Links</a></li>
                      <li class='pull-right'><a href="?subpage=flyer" target="_new">Print Version</a></li>
                      
    
                      <?php 
                      if($floor_plan){
                        echo "<li class='pull-right'><a href='".$floor_plan."' target='_new'>Floor Plan</a></li>";
                      }
                      ?>
                      
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>
            </div>
          </header>
    
          <section class="overview" id="overview">
            <div class="container">
              <h2 class="section-title">Property Overview</h2>
              <h3 class="list-price"><?php echo $listing_price; ?></h3>
              <?php 
                if ($mls_number){
                  echo "<p class='mls'> MLS: ".$mls_number.'</p>';
                }
              ?>
             
              <div class="row icons">
                <div class="col-xs-3 col-md-2 col-md-offset-2 detail">
                  <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bed.svg">
                  <p><?php echo $bedrooms; ?> Bedrooms</p>
                </div><!-- close col  -->
    
                <div class="col-xs-3 col-md-2 detail">
                  <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bath.svg">
                  <p><?php echo $bathrooms; ?> Baths</p>
                </div><!-- close col  -->
    
                <div class="col-xs-3 col-md-2 detail">
                  <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/plan.svg">
                  <p><?php echo $square_feet; ?> Sq. Ft.</p>
                </div><!-- close col  -->
    
                <?php 
    
                  if($garage){
                    ?>
                    <div class="col-xs-3 col-md-2 detail">
                      <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/garage.svg">
                      <p><?php echo $garage; ?> Car Garage</p>
                    </div><!-- close col  -->
                   <?php 
                  }
                  
                ?>
              </div><!-- close row  -->
    
              <div class="row short-description">
                <div class="col-xs-12  col-md-8 col-md-offset-2  text-justify">
                  <?php echo $property_description; ?>
                </div><!-- close col  -->
              </div><!-- close row  -->
    
             <!-- property details section can go here -->
               
            </div><!-- close container -->
            
          </section>
    
          <section id="photos">
            <div class="container">
              <h2 class="section-title">Photos</h2>
              <div class="panel " id="togglePanel">
                  
                  <div class="text-center">
                      <div class="btn-group btn-group-lg btn-toggle">
                          <!-- <button class="btn  active btn-info" data-toggle="tab" data-target="#gallery-carousel">Slides</button>
    
                          <button class="btn btn-default" data-toggle="tab" data-target="#gallery-thumbs">Gallery</button> -->
    
                          <ul class="nav nav-tabs">
                            <li><button class="btn btn-default" data-toggle="tab" data-target="#gallery-carousel">Carousel</button></li>
                            <li class="active"><button class="btn btn-default" data-toggle="tab" data-target="#gallery-thumbs">Gallery</button></li>
                          </ul>
    
                      </div>
                      
                  </div>
    
                  <div class="panel-body tab-content">
    
                      <!-- carousel section -->
                      <div class="tab-pane" id="gallery-carousel">
                      
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                          <!-- Indicators -->
                         
    
                          <!-- Wrapper for slides -->
                          <div class="carousel-inner" role="listbox">
    
                            <?php
                            $carousel = get_field('gallery');
    
                            if( $carousel ): 
                                $i = 0;
                                foreach( $carousel as $item ): 
    
                                  // if first item make active
                                  if ($i == 0) { ?>
                                      <div class="item active">
                                        <img src="<?php echo $item['url']; ?>" alt="<?php echo $item['alt']; ?>">
                                        <div class="carousel-caption"><?php echo $item['caption']; ?></div>
                                      </div><!-- close item -->
    
                                  <?php  
                                   }
                                   else{ 
                                    ?>
                                      <div class="item">
                                        <img src="<?php echo $item['url']; ?>" alt="<?php echo $item['alt']; ?>">
                                        <div class="carousel-caption"><?php echo $item['caption']; ?></div>
                                      </div><!-- close item -->
                                   <?php
                                   }
                                   $i++;
                                   endforeach; 
                                 
                                endif; ?>
    
                           
                            
                          </div><!-- close carousel-inner -->
    
                          <!-- Controls -->
                          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </div><!-- close carousel -->
    
                      </div><!-- close tab-pane gallery-carousel -->
                      <!-- end carousel section -->
    
                      <!-- thumbnail gallery section -->
                      <div class="tab-pane active" id="gallery-thumbs">
                         <div class="content-holder">
                            <div class="container">
                              <div class="row">
    
                                <?php 
    
                                $images = get_field('gallery');
                                // (thumbnail, medium, large, full or custom size)
    
                                if( $images ): ?>
                                    
                                        <?php foreach( $images as $image ): ?>
                                            <div class="col-xs-6 col-sm-4 col-md-3 gallery-img">
                                                <a href="#">
                                                  <img class="thumbnail img-responsive img-rounded " src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>">
                                                </a>
                                            </div><!-- close col -->
                                        <?php endforeach; ?>
                                    
                                <?php endif; ?>
    
                              </div>
                            </div>
                          </div>
    
                          <!-- lightbox modal -->
                          <div class="modal" id="myModal" role="dialog">
                            <div class="modal-dialog modal-lg">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                  <div id="modalCarousel" class="carousel">
                                    <div class="carousel-inner"></div>
                                    <a class="carousel-control left" href="#modalCarousel" data-slide="prev">
                                      <i class="glyphicon glyphicon-chevron-left"></i>
                                    </a>
                                    <a class="carousel-control right" href="#modalCarousel" data-slide="next">
                                      <i class="glyphicon glyphicon-chevron-right"></i>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- end lightbox modal -->
                          
                      </div><!-- close tab-pane gallery-thumbs -->
                      <!-- thumbnail gallery section -->
    
                  </div><!-- close panel-body tab-content -->
              </div><!-- close panel -->
    
            </div><!-- close container -->
          </section>
    
          <?php
    
          if( !empty($matterport_iframe) ): ?>
            
            <section class="matterport" id="matterport">
              <div class="container"> 
                <h2 class="section-title">Matterport 3D Tour</h2>  
                <div class="row example">  
                  <div class="col-sm-12">
                    <div class="embed-responsive embed-responsive-16by9">
                    
                      <!-- iFrame-->
                      <?php echo $matterport_iframe; ?>
    
                    </div>
                  </div><!-- close col -->
    
                </div><!-- close row  -->
              </div><!-- close container -->
            </section>
    
          <?php endif; ?>
    
          <!-- custom map section -->
          <section id="map"> 
            <div class="map-responsive">
    
               <?php
                while ( have_posts() ) : the_post();
    
                  the_content();
    
                endwhile; // End of the loop.
                ?>
    
            </div>
          </section>
    
          <section class="about-area" id="area">
            <div class="container">
              <h2 class="section-title">About The Area</h2>
              <div class="row">
                <div class="col-sm-5 col-md-5">
    
                  <?php
    
                  if( !empty($area_image) ): ?>
                    
                    <img class="img-responsive img-circle img-thumbnail" src="<?php echo $area_image['url']; ?>" alt="<?php echo $area_image['alt']; ?>" />
    
                  <?php endif; ?>
    
                </div><!-- close col -->
    
                <div class=" col-sm-7  col-md-7">
                  <h3><?php echo $area_title; ?></h3>
                  <?php echo $area_description; ?>
    
                </div><!-- close col -->
              </div><!-- close row -->
            </div><!-- close container -->
          </section>
    
          <!-- contact info -->
    
         
    
          <?php
            //contact info
          $first_name = get_the_author_meta('first_name');
          $last_name = get_the_author_meta('last_name');
          $id = get_the_author_meta('ID');
          $author_id = "user_".$id;
          $agency = get_field('agency', $author_id );
          $website_url = get_field('website_url', $author_id);
          $email_address = get_field('email_address', $author_id);
          $phone_main = get_field('phone_main', $author_id);
          $cell_phone = get_field('cell_phone', $author_id);
          $fax_number = get_field('fax_number', $author_id);
          $street_address = get_field('street_address', $author_id);
          $address_line_2 = get_field('address_line_2', $author_id);
          $city = get_field('city', $author_id);
          $zipcode = get_field('zipcode', $author_id);
          $profile_pic = get_field('profile_pic', $author_id);
          $email_address = get_field('email_address', $author_id);
    
          ?>
    
          <section class="contact-block" id="contact-section">
            <div class="container">
              <div class="row" id="contact">
                
                <div class="col-sm-3 col-md-2  text-center profile-img">
                  <img class="img-responsive img-thumbnail img-rounded" src="<?php echo $profile_pic; ?>">
                  <p><?php echo $first_name." ".$last_name; ?></p>
                  <p><?php echo $agency;?></p>
                </div>
    
                <div class="col-sm-4 ">
                  
                  <div class="title">
                    <h3>Contact Info</h3>
                  </div>
                  <div class="address">
                    <ul class="contact-address">
                      <li>
                        <i class="fa fa-globe"></i>
                       <?php echo $website_url; ?>
                      </li>
                      <?php 
    
                      if($street_address && $city && $zipcode):
                      ?>
                        <li>
                          <i class="fa fa-map-marker"></i>
                          <?php echo $street_address;?><br>
                          
                          <?php
                          if($address_line_2): 
                            echo $address_line_2."<br>";
                            endif;
    
                           echo $city.", FL ".$zipcode; ?>
                        </li>
                      <?php endif; ?>
                     
                      <li>
                        <i class="fa fa-phone"></i>
                        p. <?php echo $phone_main; ?>
                      </li>
                      <li>
                        <i class="fa fa-fax"></i>
                        f. <?php echo $fax_number; ?>
                      </li>
                      <li>
                        <i class="fa fa-envelope"></i>
                        <?php echo $email_address; ?>
                      </li>
                    </ul>
                  </div>
                </div><!-- close col -->
    
                <div class="col-sm-6 col-md-5 col-md-offset-1 ">
                  <div class="title">
                    <h3>Contact Form</h3>
                  </div>
                  <form role="form" id="contactForm">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <input type="text" class="form-control" id="fName" name="fName" placeholder="First Name">
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <input type="text" class="form-control" id="lName" name="lName" placeholder="Last Name">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                    </div>
                    <div class="form-group">
                      <textarea id="description" name="description" class="form-control" rows="3" placeholder="Your Comments"></textarea>
                    </div>
                    <input type="hidden" name="realtor" id="realtor" value="<?php echo $first_name." ".$last_name; ?>">
                    <input type="hidden" name="authorEmail" id="authorEmail" value="<?php echo $email_address; ?>">
                    <input type="hidden" name="property" id="property" value="<?php echo $cf_property_address; ?>">
                    <input type="hidden" name="page" id="page" value="<?php echo get_permalink(); ?>">
    
                    
    
                    <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
                    <div class="g-recaptcha" data-sitekey="6LdMEEAUAAAAAMVWGRniq9FYwBpmHtQF6xWf3Het"></div>
    
                    
                    <div id="confirmation"></div>
                    <input type="submit" value="Submit" class="btn btn-info">
                  </form>
                </div><!-- close col -->
    
              </div><!-- close row -->
              <hr>
              <div class="row" id="social">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                  <h4>Share this listing on your favorite social media network</h4>
    
                  <div class="a2a_kit a2a_kit_size_32 a2a_default_style text-center">
    
                    <ul class="list-inline">
                      <li><a class="a2a_dd" href="https://www.addtoany.com/share"></a></li>
                      <li><a class="a2a_button_facebook"></a></li>
                      <li><a class="a2a_button_twitter"></a></li>
                      <li><a class="a2a_button_google_plus"></a></li>
                      <li><a class="a2a_button_pinterest"></a></li>
                      <li><a class="a2a_button_linkedin"></a></li>
                      <li><a class="a2a_button_google_gmail"></a></li>
                      <li><a class="a2a_button_facebook_messenger"></a></li>
                      <li><a class="a2a_button_houzz"></a></li>
                    </ul>
                  </div>
                  <script async src="https://static.addtoany.com/menu/page.js"></script>
    
                </div><!-- close col -->
              </div><!-- close row -->
    
            </div><!-- close container -->
           
          </section>
    
          <?php get_footer(); ?>
         <!--  ==================== -->
         <!--  end landing page section -->
         <!--  ==================== -->
    
     <?php
      }//end else
      ?>
    

    Here is the final page. If you click the flyer link on the nav bar it opens the printable flyer in a new window.
    http://941.media/1234-main-street-sarasota-florida-34231/

    Hope that helps