uiu-sobe/page-template/page-archive-event.php

<?php

/**
 * The template for displaying Event archive page
 *
 * Template Name: Archive - Event
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package UIU_DEPARTMENTAL
 */

get_header();
?>

<main id="primary" class="site-main">

	<section id="archive-hero">

		<div class="container">

			<!-- breadcrumb -->
			<nav aria-label="breadcrumb">
				<ul>
					<li><a href="/">Home</a></li>
					<li>Events</li>
				</ul>
			</nav>

			<div class="content">

				<!-- left content -->
				<div class="left-content">

					<div class="main-title">Events</div>

					<div class="short-details">
						Here you will have access to all United International University Events.
					</div>

					<div class="links">

						<!-- message -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
						</a>

						<!-- printer -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
						</a>

						<!-- facebook -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/facebook-f.svg" alt="">
						</a>

						<!-- twitter -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/twitter.svg" alt="">
						</a>

						<!-- linkedin -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/linkedin-in.svg" alt="">
						</a>

					</div>

				</div>

				<!-- right content -->
				<div class="right-content">
					<img src="<?php echo (get_template_directory_uri()) ?>/img/campus_07.jpg" alt="">
				</div>

			</div>
		</div>



	</section>

	<div class="sections">

		<section id="all-events" class="container">
			<!-- <hr> -->
			<div class="parent-grid">

				<?php
				$args = array(
					'post_type'      => 'event',
					'meta_query' => array(
						'relation'      => 'OR',
						array(
							'key'       => 'related_institutes',
							'value'     => 'BBA',
							'compare'   => 'LIKE'
						),
						array(
							'key'       => 'related_institutes',
							'value'     => 'sobe',
							'compare'   => 'LIKE'
						),
						array(
							'key'       => 'related_institutes',
							'value'     => 'all_departments',
							'compare'   => 'LIKE'
						),
						array(
							'key'       => 'related_institutes',
							'value'     => 'all_sites',
							'compare'   => 'LIKE'
						)
					),
					'posts_per_page' => 6,
					'orderby'        => 'date',
					'order'          => 'DESC',
				);

				$query = new WP_Query($args);

				if ($query->have_posts()) :
					while ($query->have_posts()) :
						$query->the_post(); ?>
						<div class="stub grid-sub-item">

							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
							</div>
							<a href="<?php echo get_permalink(); ?>">
								<h3><?php echo get_the_title(); ?></h3>
							</a>
							<span class="events-date">Venue: <?php the_field('event_venue'); ?></span>
							<span class="events-date"><?php the_field('event_date_start'); ?> --- <?php the_field('event_date_end'); ?></span>

						</div>

					<?php endwhile; ?>

					<?php the_posts_navigation(); ?>

				<?php
				else :

					get_template_part('template-parts/content', 'none');

				endif;
				?>
			</div>
		</section>
	</div>
</main><!-- #main -->

<style>
	@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap");
	@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
	@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);

	header {
		height: 100px !important;
	}

	#all-events {
		display: flex;
		flex-direction: column;
	}

	#all-events h2 {
		color: #000 !important;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	#all-events .stub {
		margin: 30px auto;
	}

	#all-events .stub-img-holder {
		height: 200px;
		overflow: hidden;
	}

	#all-events .stub-img-holder img {
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center;
		object-position: center;
	}

	#all-events .events-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
		margin: 10px 0px !important;
	}

	#all-events h3 {
		height: 50px;
		font-size: 18px;
		line-height: 22px;
		font-family: "Open Sans", sans-serif;
		color: #2F4858 !important;
		margin: 20px auto;
	}

	/*# sourceMappingURL=archive-events.css.map */
</style>
<?php
get_footer();