custom loop with popup

PHOTO EMBED

Mon May 01 2023 13:20:23 GMT+0000 (Coordinated Universal Time)

Saved by @hamzahanif192

function firstStory_loop()
{
	$arg = array(
	'post_type' => 'story',
	'posts_per_page' => -1,
	'tax_query' => array(
        array(
            'taxonomy' => 'story_category',
            'field'    => 'slug',
            'terms'    => 'first-story',
        ),
  ));
    $storyPost = new WP_Query($arg); ?>
	<div id="firstStory">
	<?php if ($storyPost->have_posts()) : ?>
	<?php 	$i = 1;
			while ($storyPost->have_posts()) :  ?>
			<?php $storyPost->the_post();  
			$i++;
			$url = wp_get_attachment_url(get_post_thumbnail_id($storyPost->ID)); 
			$innerImg = get_field('popup_feature_image');
		
			?>
			 <!--star here popup-->
		    <div class="modal storyModal fade" id="story<?= get_the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					          <img src="<?php bloginfo( 'template_url' ); ?>/images/close.png">
					        </button>
				  <div class="modal-dialog" role="document"  style="background-color:<?php the_field('primary_color'); ?>;    height: 100%;">
				    <div class="modal-content" style="background-color:<?php the_field('primary_color'); ?> !important;">
					      <div class="modal-header">
					       
					      </div>
				      <div class="modal-body">
					        <img src="<?= $innerImg ?>"> 
					        <h2><?php the_title(); ?></h2>
					        <div class="innerContent">
					        	<?php the_content(); ?>
					        </div>
					        <?php if( get_field('button_text') ): ?>
					        	<a href="<?php the_field('button_link') ?>"><img  class="btnArrow" src="<?php bloginfo( 'template_url' ); ?>/images/box-arrow.png"><?php the_field('button_text') ?></a>
					        <?php endif; ?>
				      </div>
				    </div>
				  </div>
			</div>
		     <!--end here popup-->
			<div class="single-story boxCount<?= $i ?>">
				
					<div class="single-story-inner" style=""  >
						<a class="innerAnchor " type="button" data-toggle="modal" data-target="#story<?= get_the_ID(); ?>">
							<img src="<?= $url ?>"> 
							<?php if( get_field('video') ): ?>
								<video autoplay muted loop id="storyVideo">
									  <source src="<?php the_field('video') ?>" type="video/mp4">
								</video>
							<?php endif; ?>
							<div class="inner-single-story">
								<h2><?php the_title(); ?></h2>
								<button><img src="<?php bloginfo( 'template_url' ); ?>/images/box-arrow.png"></button>
							</div>
					</a>			   
					</div>
				
			</div>   
		   
	<?php ?>
	<?php endwhile; ?>
    <?php endif; ?>
</div>
<?php
	wp_reset_postdata();

}
add_shortcode('first_story-grid', 'firstStory_loop');
content_copyCOPY