uiu-sobe/single-campus-life.php

<?php

/**
 * The template for displaying all single campus life posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package UIU_DEPARTMENTAL
 */

get_header(); ?>
<?php while (have_posts()) : the_post(); ?>



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



		<section id="campus-life-banner">

			<div class="top-banner">
				<div class="uiu-banner-overlay"></div>
				<div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>)"></div>

				<div class="esential-links">

					<div class="container">

						<!-- breadcrumb -->
						<nav class="breadcrumb" aria-label="breadcrumb">
							<ul>
								<li><a href="<?php echo get_site_url(); ?>">Home</a></li>
								<li><a href="<?php echo get_site_url(); ?>/campus-life">Campus Life</a></li>
							</ul>
						</nav>

						<div class="links">

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

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

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

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

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

						</div>

					</div>

				</div>
			</div>

			<div class="container">
				<div class="content">
					<div class="publish-date">
						<span class="title">Publish Date : </span>
						<span class="date"><?php echo get_the_date(); ?></span>
					</div>

					<!-- main title -->
					<div class="main-title">
						<?php echo get_the_title(); ?>
					</div>
					<hr>
				</div>
			</div>
		</section>


		<div class="container">
			<section id="main-container">
				<!-- main component -->
				<div class="main-comp">
					<?php echo get_the_content(); ?>
				</div>
			</section>


			<section id="related-campus-life">
				<div class="section-title">
					Related Campus Life
				</div>
				<div class="items">

					<?php

					$post_cat_names = get_the_category(get_the_ID());
					$current_cat_name = $category_names[0]->slug;
					$args = array(
						'post_type'      => 'campus-life',
						'posts_per_page' => 6,
						'category_name'  => $current_cat_name,
						'post__not_in' => array(get_the_ID()),
						'orderby'        => 'date',
						'order'          => 'DESC',
					);

					$query = new WP_Query($args);

					if ($query->have_posts()) :
						while ($query->have_posts()) :
							$query->the_post(); ?>

							<div class="single-item">
								<div class="image-container">
									<img src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
								</div>
								<a class="detail" href="<?php echo get_permalink(); ?>">
									<div class="date-container">
										<img class="icon" src="<?php echo (get_template_directory_uri()) ?>/img/calendar-days-regular.svg" alt="">
										<span class="date">
											<?php echo get_the_date(); ?>
										</span>
									</div>

									<div class="title">
										<?php echo get_the_title(); ?>
									</div>
								</a>
							</div>

					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No related posts has found! </div>';
					endif; ?>
				</div>
			</section>
		</div>
	</main>


<?php endwhile; ?>
<style>
	#campus-life-banner {
		padding: 3rem 0 3rem;
	}

	#campus-life-banner .uiu-banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #0d2d62;
		opacity: 0.7;
		z-index: 1;
		background-image: linear-gradient(to right top, transparent 33%, #000 33%, #000 66%, transparent 66%);
		background-size: 3px 3px;
		background-repeat: repeat;
	}

	#campus-life-banner .top-banner {
		margin-bottom: 3rem;
		height: 60vh;
		max-height: 600px;
		position: relative;
	}

	#campus-life-banner .top-banner .bg-img {
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	#campus-life-banner hr {
		margin-top: 1rem;
		border-color: #000;
	}

	#campus-life-banner .esential-links {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 2;
		padding: 0.75rem 0;
	}

	#campus-life-banner .esential-links .container {
		display: flex;
		justify-content: space-between;
	}

	#campus-life-banner .esential-links a {
		opacity: 1;
	}

	#campus-life-banner .breadcrumb {
		margin-top: 0 !important;
		z-index: 2;
		color: #fff !important;
	}

	#campus-life-banner .breadcrumb li {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 0.8rem;
	}

	#campus-life-banner .breadcrumb li a {
		color: #fff;
		opacity: 1;
		font-weight: 500;
	}

	#campus-life-banner .breadcrumb li a::after {
		color: #fff;
	}

	#campus-life-banner .content {
		display: block;
	}

	#campus-life-banner .main-title {
		margin-top: 0.5rem;
		font-size: 1.7rem;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 1.4 !important;
		color: #333 !important;
		text-transform: capitalize;
		font-family: "DM Serif Text", serif;
	}

	#campus-life-banner .publish-date {
		margin-top: 0.75rem;
		font-size: 0.8rem;
	}

	#campus-life-banner .title {
		font-weight: bold;
	}

	#campus-life-banner .date {
		margin-left: 0.25rem;
		font-weight: 600;
	}

	#campus-life-banner .links {
		display: flex;
		gap: 1.5rem;
	}

	#campus-life-banner .links a {
		height: 1.2rem;
	}

	#campus-life-banner .links a:hover {
		transform: scale(1.2);
		opacity: 1 !important;
	}

	#campus-life-banner .links a img {
		height: 100%;
	}

	#campus-life-banner a {
		transition: all 0.25s ease-in-out;
		opacity: 0.65;
		text-decoration: none;
	}

	#main-container {
		margin: 0.5rem 0;
		display: block;
		font-family: "DM Serif Text", serif;
	}

	#main-container img {
		width: 100%;
	}

	#main-container .main-comp {
		padding: 0 0.75rem 1rem 0;
	}

	#main-container .main-comp .feature-image-holder {
		width: 100%;
		margin-bottom: 2rem;
		width: 100%;
	}

	#main-container .main-comp .campus-life {
		margin-top: 1rem;
		width: 100%;
		margin-bottom: 2rem;
	}

	#related-campus-life .section-title {
		color: rgb(0, 0, 0);
		font-weight: 600;
		font-size: 1.8rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #333;
	}

	#related-campus-life .items {
		margin-top: 2rem;
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
	}

	#related-campus-life .items .single-item {
		width: calc(33.3333% - 1.5rem);
		overflow: hidden;
		border-radius: 5px;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	@media (max-width: 1000px) {
		#related-campus-life .items .single-item {
			width: calc(50% - 1.5rem);
		}
	}

	@media (max-width: 768px) {
		#related-campus-life .items .single-item {
			width: 100%;
		}
	}

	#related-campus-life .items .single-item .image-container {
		width: 100%;
		overflow: hidden;
	}

	#related-campus-life .items .single-item .image-container img {
		transition: 4s ease-in-out;
	}

	#related-campus-life .items .single-item:hover .image-container img {
		transform: scale(1.4);
	}

	#related-campus-life .items .single-item .detail {
		padding: 0.5rem 0.75rem 0.75rem;
		background-color: #fff;
		display: block;
	}

	#related-campus-life .items .single-item .detail:hover {
		opacity: unset;
	}

	#related-campus-life .items .single-item .detail .date-container {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		justify-content: start;
		margin: 0.25rem 0 0.75rem;
	}

	#related-campus-life .items .single-item .detail .date-container .icon {
		height: 0.9rem;
	}

	#related-campus-life .items .single-item .detail .date-container .date {
		font-size: 0.7rem;
		font-weight: 700;
	}

	#related-campus-life .items .single-item .detail .title {
		font-size: 0.7rem;
		font-weight: 600;
		color: #0f465e;
		line-height: 1.7 !important;
	}

	@media print {

		head,
		header,
		footer {
			display: none;
		}

		main {
			padding-top: 0 !important;
			margin-top: 0 !important;
		}

		#archive-hero {
			margin: 0;
		}

		#notice-container {
			padding: 0;
		}
	}
</style>
<?php get_footer(); ?>