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