custom loop with popup
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');



Comments