South-City-College-dynamic/single-event.php

<?php get_header(); ?>
<section class="section-top">
    <div class="container">
        <div class="col-lg-10 offset-lg-1 text-center">
            <div class="section-top-title">
                <h1>Event Detail</h1>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li class="ms-1"> / Event Detail</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<section id="trending_causes_main">
  <div class="container">
    <div class="row" id="counter">
     <?php if (have_posts()) : while (have_posts()) : the_post(); 
                $event_date = strtoupper(get_the_date('j M, Y'));
                $event_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
                $event_time = function_exists('get_field') ? get_field('event_time') : '';
                $event_location = function_exists('get_field') ? get_field('event_location') : '';
                $email = function_exists('get_field') ? get_field('event_mail') : '';
                $phone = function_exists('get_field') ? get_field('phone') : '';
                $event_title = get_the_title();
                $event_desc = get_the_content();
                $event_images = function_exists('get_field') ? get_field('event_photos') : '';
                $google_map = function_exists('get_field') ? get_field('google_map') : '';
            ?>
      <!-- Left Content -->
      <div class="col-lg-8 left-side">
        <div class="details_wrapper_area">
        
          <div class="details_big_img">
            <img
              src="<?= esc_url($event_image); ?>"
              alt="chess competition"
            >
          </div>

          <div class="details_text_wrapper">
            <hr>
            <h2><?= esc_html($event_title); ?></h2>
            <hr>
            <p>
         <?php the_content(); ?>
            </p>

            <div class="row">
                <?php 
                                if (is_array($event_images)&& !empty($event_images)): 
                                    $count = 0; 
                                    foreach ($event_images as $image):
                                         if ($count<2): 
                                    ?>
              <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="details_small_img">
                  <img
                    src="<?php echo esc_url($image); ?>"
                    alt=""
                  >
                </div>
              </div>
                 <?php $count++; else: break; endif; 
                                    endforeach; 
                                endif;?>
            
            </div>
          </div>

        </div>
      </div>

      <!-- Right Sidebar -->
      <div class="col-lg-4">
        <div class="sidebar_first">

          <!-- Event Details -->
          <div class="sidebar_boxed">
            <div class="sidebar_heading_main">
              <h3>Event Details</h3>
            </div>

            <div class="event_details_list">
              <ul>
                <li>
                  <i class="fa-solid fa-location-dot"></i>
                  Location:
                  <span><?= esc_html($event_location); ?></span>
                </li>

                <li>
                  <i class="fa-solid fa-calendar-days"></i>
                  Date:
                  <span><?= esc_html($event_date); ?></span>
                </li>

                <li>
                  <i class="fa-solid fa-envelope"></i>
                  Mail:
                  <span><?= esc_html($email); ?></span>
                </li>

                <li>
                  <i class="fa-solid fa-phone"></i>
                  Phone:
                  <span><?= esc_html($phone); ?></span>
                </li>
              </ul>

              <div class="register_now_details">
                <a
                  href="#"
                  class="view-events-btn"
                  data-bs-toggle="modal"
                  data-bs-target="#registerModal"
                >
                  REGISTER NOW
                </a>
              </div>
            </div>
          </div>

          <!-- Upcoming Events -->
          <div class="project_recentdonet_wrapper sidebar_boxed">
            <div class="sidebar_heading_main">
              <h3>Upcoming Events</h3>
            </div>
              <?php	
                            $args = array('posts_per_page' => 3, 'post_type' => 'event');
                            $related_events = new WP_Query($args);
                            if ($related_events->have_posts()) : 
                                while ($related_events->have_posts()) : $related_events->the_post();
                                    $related_event_location = function_exists('get_field') ? get_field('event_location') : '';
                            ?>
            <div class="recent_donet_item recent_donet_text1">
              <div class="recent_donet_img">
                <a href="<?php the_permalink();?>">
                  <img
                    src="<?= get_the_post_thumbnail_url(get_the_ID(),'full'); ?>"
                  >
                </a>
              </div>

              <div class="recent_donet_text">
                <p>
                  <i class="fa-regular fa-clock"></i>
                  <span><?php echo get_the_date('M d, y'); ?></span>
                </p>
                <p>
                  <i class="fa-solid fa-location-dot"></i>
                  <span><?= esc_html($related_event_location); ?></span>
                </p>
                <h4>
                  <a href="<?php the_permalink();?>">
                 <?php the_title(); ?>
                  </a>
                </h4>
              </div>
            </div>
             <?php endwhile; endif; wp_reset_postdata(); ?>
        
          </div>

          <!-- Event Location Map -->
           	<?php if ($google_map): ?>
          <div class="share_causes_wrapper sidebar_boxed">
            <iframe
              src="<?php echo esc_url($google_map); ?>"
              height="350"
              style="border:0; width:100%;"
              allowfullscreen
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade">
            </iframe>
          </div>
              	<?php endif; ?>

          <!-- Share Causes -->
          <div class="share_causes_wrapper sidebar_boxed">
            <div class="sidebar_heading_main">
              <h3>Share Causes</h3>
            </div>

            <div class="social_icon_sidebar">
              <ul>
                <li><a href="#"><i class="bi bi-facebook"></i></a></li>
                <li><a href="#"><i class="bi bi-instagram"></i></a></li>
                <li><a href="#"><i class="bi bi-twitter"></i></a></li>
                <li><a href="#"><i class="bi bi-linkedin"></i></a></li>
              </ul>
            </div>
          </div>

        </div>
      </div>
          <?php endwhile; endif; ?>
    </div>
  </div>
</section>
<?php get_footer(); ?>