Responsive Gallery Page Template

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Boilerplate
 * @since Boilerplate 1.0
 */

get_header(); ?>


	<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	<?php $image_id = get_post_thumbnail_id(); ?>
	<?php $image_url = wp_get_attachment_image_src($image_id,'full');   ?>
		<div style="background-image: url(<?php echo $image_url[0]; ?>)" id="portbg">
		</div>
		<div id="overlay"></div>

			<div class="wrap">
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

					<div id="top">

						<div id="breadcrumbs">

							<a href="<?php bloginfo('url'); ?>/?page_id=78" class="home">home</a>
							<?php $category = get_the_category();
								if($category[0]){
								echo '<a href="#" class="current">'.$category[0]->cat_name.'</a>';
								}
								?>
							</a>

						</div>

						<div id="share">
							<p>share this
								<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fbshare.png"></a>
								<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/twshare.png"></a>
							</p>
						</div>

						<h2><?php the_title(); ?></h2>

						<h3><?php the_field('producing_company'); ?></h3>

					</div>

					<div id="mobtop">

						<div id="mobportbg">
								<img src="<?php echo $image_url[0]; ?>" id="background">


							<div id="breadcrumbs">

								<a href="#" class="home">home</a>
								<?php $category = get_the_category();
									if($category[0]){
									echo '<a href="#" class="current">'.$category[0]->cat_name.'</a>';
									}
									?>

							</div>

							<div id="share">
								<p>share this
									<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/fbshare.png"></a>
									<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/twshare.png"></a>
								</p>
							</div>

							<div id="mobshowtitle">

								<h2><?php the_title(); ?></h2>

								<h3><?php the_field('producing_company'); ?></h3>

							</div>

						</div>

					</div>

					<div id="intro"><?php the_field('intro/seo_text'); ?></div>

<!--	'View Photos Link'	<a href="#" class="button" id="view_port">view photos</a> -->

							<?php if(get_field('gallery')): ?>

								<ul id="fullport">

									<?php while(the_repeater_field('gallery')): ?>

										<?php $image = wp_get_attachment_image_src(get_sub_field('port_image'), 'full'); ?>

										<?php $thumb = wp_get_attachment_image_src(get_sub_field('port_image'), 'thumbnail'); ?>

											<li class="fullgallery">

												<a href="<?php echo $image[0]; ?>" rel="lightbox[groupName]"><img src="<?php echo $thumb[0]; ?>" /></a>

											</li>

									<?php endwhile; ?>

							<?php endif; ?>

							<?php if( get_field('reviews-file') ): ?>

								<?php while( has_sub_field('reviews-file') ): ?>

									<li>

										<a href="<?php the_sub_field('review_(.pdf)'); ?>" target="_blank">

											<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumb-pdf.png">

										</a>

									</li>

								<?php endwhile; ?>

							<?php endif; ?>

							<?php if( get_field('reviews-_from_external_site') ): ?>

								<?php while( has_sub_field('reviews-_from_external_site') ): ?>

									<li>

										<a href="<?php the_sub_field('site_url'); ?>" target="_blank">

											<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumb-www.png">

										</a>

									</li>

								<?php endwhile; ?>

							<?php endif; ?>

							<?php if( get_field('videos') ): ?>

								<?php while( has_sub_field('videos') ): ?>

									<li>

										<a href="<?php the_sub_field('video_url'); ?>" rel="lightbox[groupName]">

											<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumb-video.png">

										</a>

									</li>

								<?php endwhile; ?>

							<?php endif; ?>

						</ul>


							<?php if(get_field('gallery')): ?>

								<ul id="port">

									<?php while(the_repeater_field('gallery')): ?>

										<?php $image = wp_get_attachment_image_src(get_sub_field('port_image'), 'full'); ?>

										<?php $thumb = wp_get_attachment_image_src(get_sub_field('port_image'), 'thumbnail'); ?>

											<li  class="gallery">

												<a href="<?php echo $image[0]; ?>"><img src="<?php echo $thumb[0]; ?>" /></a>

											</li>

									<?php endwhile; ?>

							<?php endif; ?>

							<?php if( get_field('reviews-file') ): ?>

								<?php while( has_sub_field('reviews-file') ): ?>

									<li>

										<a href="<?php the_sub_field('review_(.pdf)'); ?>" target="_blank">

											<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumb-pdf.png">

										</a>

									</li>

								<?php endwhile; ?>

							<?php endif; ?>

							<?php if( get_field('reviews-_from_external_site') ): ?>

								<?php while( has_sub_field('reviews-_from_external_site') ): ?>

									<li>

										<a href="<?php the_sub_field('site_url'); ?>" target="_blank">

											<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumb-www.png">

										</a>

									</li>

								<?php endwhile; ?>

							<?php endif; ?>

							<?php if( get_field('videos') ): ?>

								<?php while( has_sub_field('videos') ): ?>

									<li>

										<a href="<?php the_sub_field('video_url'); ?>" data-ob="lightbox">

											<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumb-video.png">

										</a>

									</li>

								<?php endwhile; ?>

							<?php endif; ?>

						</ul>

						<div id="breadcrumbsbottom">

								<a href="#" class="home">home</a>

								<?php $category = get_the_category();
									if($category[0]){
									echo '<a href="#" class="current">'.$category[0]->cat_name.'</a>';
									}
									?>

						</div>

				</article><!-- #post-## -->


	<?php endwhile; // end of the loop. ?>

<?php get_footer(); ?>