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">×</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
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!
