<?php
 /**
 * Template Name: Product Grid Page
 *
 * @package WordPress
*/

get_header(); 




?>
<section >
			<div class=" pt-5 pb-3">
	<div class="container">

				<div id="portfolio" class="portfolio row g-2">
<?php
global $query_string; 
query_posts($query_string . '&caller_get_posts=1&order=ASC');

$key = 0;

if (have_posts()) : while (have_posts()) : the_post();
	
	
	$image_thumb = '';
								
	if(has_post_thumbnail(get_the_ID(), 'swap-projects'))
	{
	    $image_id = get_post_thumbnail_id(get_the_ID());
	    $image_thumb = wp_get_attachment_image_src($image_id, 'swap-projects', true);
			    $image_full = wp_get_attachment_image_src($image_id, 'full', true);

	}
	$projects_ID = get_the_ID();
				 $projects_location = get_post_meta($projects_ID, 'location_name', true);


?>

					<article class="portfolio-item col-12 col-sm-6 col-md-4 col-lg-3 pf-media pf-icons">
						<div class="grid-inner">
							<div class="portfolio-image">
								<img src="<?php echo $image_thumb[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" class="rounded-5">
								<div class="bg-overlay">
									<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
			<a href="<?php echo $image_full[0]; ?>" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="image" ><i class="uil uil-plus"></i></a>

									</div>
									<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
								</div>
							</div>
							<div class="portfolio-desc">
								<h3><?php the_title(); ?> </h3>
								<span><?php echo $projects_location; ?></span>
							</div>
						</div>
					</article>

<?php $key++;  endwhile; endif; ?>

		


				</div>

				</div>
			
			</div><!-- .content-wrap end -->
		</section><!-- #content end -->
		<?php get_footer(); ?>