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

<?php

/**
 * The template for displaying news media archive page
 *
 * Template Name: Archive - UIU in Media
 *
 * @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>Media Archive</li>
				</ul>
			</nav>

			<div class="content">

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

					<div class="main-title">UIU in Media</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>

	<section id="archive-media">

		<div class="gallery-section">
			<div class="container">
				<div class="row g-4">



					<?php
					$args = array(
						'post_type'      => 'uiu_in_media',
						'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="col-12 col-md-6 col-lg-4 ">
								<div class="gallery-item">
									<div class="image-container">
										<img src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
									</div>
									<div class="gallery-details">
										<span class="create-date"><?php the_field('publication_date'); ?></span>
										<a class="news-title" href="<?php the_field('news_url'); ?>" target="_blank">
											<?php echo get_the_title(); ?>
										</a>
										<span class="media-provider"><?php the_field('news_provider'); ?></span>
									</div>
								</div>
							</div>

					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No news media has found! </div>';
					endif; ?>


				</div>
			</div>
		</div>

	</section>
</main><!-- #main -->

<style>
	#archive-media {
		padding: 2.5rem 0;
	}

	#archive-media .gallery-section {
		padding: 2rem 0;
	}

	#archive-media .gallery-item {
		position: relative;
		height: 350px;
		overflow: hidden;
		border-radius: 2px;
		border-bottom: 4px solid #F68B1F;
		border-radius: 3px;
	}

	#archive-media .gallery-item:hover .image-container img {
		transform: scale(1.2);
	}

	#archive-media .image-container {
		height: 100%;
		width: 100%;
		position: relative;
	}

	#archive-media .image-container::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	#archive-media .image-container img {
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center;
		object-position: center;
		transition-duration: 5s;
	}

	#archive-media .gallery-details {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 1rem;
		display: flex;
		gap: 0.5rem;
		flex-direction: column;
		justify-content: end;
		align-items: center;
		z-index: 2;
	}

	#archive-media .gallery-details .create-date {
		color: #fff;
		font-size: 0.7rem;
		transition: 0.35s;
	}

	#archive-media .gallery-details .news-title {
		color: #fff;
		font-size: 1.2rem;
		font-weight: 600;
		font-family: "Open Sans", sans-serif;
	}

	#archive-media .gallery-details .news-title span {
		color: inherit;
	}

	#archive-media .gallery-details .media-provider {
		background: #000;
		border-radius: 20px;
		padding: 0.15rem 0.75rem;
		color: #fff;
		font-size: 0.7rem;
		font-weight: 600;
	}

	#archive-media .gallery-details .media-provider {
		color: #fff;
	}

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