uiu-sobe/single-faculty.php

<?php

/**
 * The template for displaying all single faculty posts
 *
 * @package UIU_DEPARTMENTAL
 */
get_header(); ?>


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

	$auth_token = get_field('auth_token', 'option');
	$client_id = get_field('client_id', 'option');
	$employee_info_api = get_field('employee_info_api', 'option');
	$journal_api = get_field('journal_api', 'option');
	$conference_api = get_field('conference_api', 'option');

	$login_id_e = "";

	if (function_exists('get_field')) {
		$pid_content = get_post();
		if (has_blocks($pid_content)) {
			$blocks = parse_blocks($pid_content->post_content);
			foreach ($blocks as $block) {
				if ($block["blockName"] == "acf/faculty-member") {
					$login_id_e = $block["attrs"]["data"]["login_id"];
				}
			}
		}
	}

	$response_employeeInfo = wp_remote_post(
		$employee_info_api,
		array(
			'body' => array(
				'user_login_id' => $client_id,
				'login_id' => $login_id_e,
				'auth_token' => $auth_token
			)
		)
	);
	$employeeInfo = json_decode(wp_remote_retrieve_body($response_employeeInfo), true);

	$response_employeeJournal = wp_remote_post(
		$journal_api,
		array(
			'body' => array(
				'employee_id' => $login_id_e,
				"year"  => "",
				'user_login_id' => $client_id,
				'auth_token' => $auth_token
				// 'page' => 1,
				// 'limit' => 1
			)

		)
	);
	$employeeJournal = json_decode(wp_remote_retrieve_body($response_employeeJournal), true);

	$response_employeeConference = wp_remote_post(
		$conference_api,
		array(
			'body' => array(
				'employee_id' => $login_id_e,
				"year"  => "",
				'user_login_id' => $client_id,
				'auth_token' => $auth_token
				// 'page' => 1,
				// 'limit' => 1
			)

		)
	);
	$employeeConference = json_decode(wp_remote_retrieve_body($response_employeeConference), true);

?>
	<section class="static-banner">
		<div class="static-banner-underlay">
			<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
		</div>
		<div class="static-banner-overlay"></div>
	</section>

	<main>
		<section class="profile-header">


			<div class="profile-main">
				<div class="container">

					<div class="top-row">
						<div class="profile-img-container">
							<img src="<?php the_field('profile_photo'); ?>" alt="">
						</div>

						<div class="profile-header-text">
							<!-- <h3 class="sub-title">Faculty profile</h3> -->
							<h1 class="profile-name">
								<?php echo $employeeInfo[0]['Title'];
								echo " " . $employeeInfo[0]['FullName'];
								?>

								<!-- <span class="degree"><?php //if ($employeeInfo[0]['Title'] == "Dr.") {
															//echo ', PhD';}
															//
															?>
								</span> -->
							</h1>
							<h2 class="profile-des">
								<?php echo $employeeInfo[0]['Designation'];
								echo ", " . $employeeInfo[0]['Office'];
								?>
							</h2>
							<span class="contact-dets"><?php echo "ROOM: " . $employeeInfo[0]['Room']; ?></span>
							<span class="contact-dets"><?php echo "PABX: " . $employeeInfo[0]['PABX']; ?></span>
							<br />

							<span class="contact-dets"><?php echo $employeeInfo[0]['Phone']; ?></span>
							<span class="contact-dets"><?php echo $employeeInfo[0]['Email']; ?></span>

							<?php if (have_rows('contact_details')) : ?>
								<?php while (have_rows('contact_details')) : the_row(); ?>
									<span class="contact-dets"><?php the_sub_field('contact_info'); ?></span>
								<?php endwhile; ?>
							<?php endif; ?>

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

		</section>


		<section class="profile-body primary-c">
			<div class="container">
				<div class="profile-second-row">
					<div class="left-col">
						<ul class="profile-choices">

						</ul>

					</div>

					<div class="profile-main-description">


						<?php if (have_rows('main_information')) : ?>

							<?php while (have_rows('main_information')) : the_row(); ?>

								<span class="contact-dets"></span>
								<div class="bio desc-block">
									<h2 class="m-text"><?php the_sub_field('title'); ?></h2>
									<p class="m-text">
										<?php the_sub_field('contents'); ?>
									</p>
								</div>

							<?php endwhile; ?>

						<?php endif; ?>

						<?php if ($employeeJournal || $employeeConference) : ?>

							<div class="bio desc-block">
								<h2 class="m-text">Publication</h2>
								<p class="m-text">
								<h3 class="paper-type">Journal Papers</h3>

								<?php
								foreach ($employeeJournal as $item) {
									// Access individual elements of each response
									echo "<div class='paper-details'>";
									echo "<span class='paper-year'>{$item['Year']}</span>";

									// Iterate over the JournalList array within each item
									foreach ($item['JournalList'] as $journal) {
										// Access individual elements of each journal
										echo "<a href='{$journal['JournalLink']}'>";
										echo "<h2 class='paper-title'>{$journal['PaperTitle']}</h2>";
										echo "</a>";
										echo "<p class='paper-tags'>";
										// $journalKeyword = $journal['KeyWords'];
										foreach ($journal['KeyWords'] as $keyword) {
											if ($keyword) {
												echo "<span class='tag'>{$keyword}</span>";
											}
										}
										echo "</p>";
										echo "<p class='paper-event'>Publication:  {$journal['JournalTitle']}</p>";
										echo "<p class='paper-contributors'>";
										echo "Author List: ";
										// Iterate over the Author array within each journal
										foreach ($journal['Author'] as $author) {
											// Access individual elements of each author
											$authorName = $author['AuthorName'];
											// Process or output the values as needed
											echo " $authorName,";
										}
										echo "</p>";
									}
									echo "</div>";
								}
								?>

								<h3 class="paper-type">Conference Papers</h3>

								<?php
								foreach ($employeeConference as $item) {
									// Access individual elements of each response
									$item_count = "single";
									if (count($item['ConferenceList']) > 1) {
										$item_count = "multiple";
									}
									echo "<div class='paper-details {$item_count}'>";
									echo "<span class='paper-year'>{$item['Year']}</span>";

									// Iterate over the JournalList array within each item
									foreach ($item['ConferenceList'] as $conference) {
										// Access individual elements of each journal
										echo "<a href='{$conference['Link']}'>";
										echo "<h2 class='paper-title'>{$conference['PaperTitle']}</h2>";
										echo "</a>";
										echo "<p class='paper-tags'>";
										// $conferenceKeyword = $conference['KeyWords'];
										foreach ($conference['KeyWords'] as $keyword) {
											if ($keyword) {
												echo "<span class='tag'>{$keyword}</span>";
											}
										}
										echo "</p>";
										echo "<p class='paper-event'>Conference:  {$conference['ConferenceName']}</p>";
										echo "<p class='paper-contributors'>";
										echo "Author List: ";
										// Iterate over the Author array within each journal
										foreach ($conference['Author'] as $author) {
											// Process or output the values as needed
											echo " {$author['AuthorName']},";
										}
										echo "</p>";
									}
									echo "</div>";
								}
								?>
							</div>
						<?php endif; ?>
					</div>
				</div>
			</div>
		</section>
	</main>
	<!-- #main -->

<?php endwhile; // end of the loop.
?>
<div class="pickers">
	<span class="color-picker"></span>
	<span class="color-picker2"></span>
	<span class="color-picker3"></span>
	<span class="color-picker4"></span>
</div>

<style>
	main {
		margin-top: 390px;
		min-height: calc(100vh - 400px);
		position: relative;
		padding: 0px !important;
		background: rgb(56, 32, 23);
		background: linear-gradient(180deg, rgb(48, 18, 7) 0%, rgb(40, 21, 13) 22%, rgb(5, 0, 6) 100%);
		height: 100%;
	}

	h1 {
		font-family: "DM Serif Text", serif;
		font-size: 40px !important;
		letter-spacing: 2px !important;
		line-height: 110%;
		color: #fff;
		width: 100%;
		margin: 20px auto !important;
		text-align: left;
	}

	h2 {
		font-family: "DM Serif Text", serif;
		font-size: 40px;
		line-height: 45px;
		color: #ffc3c3;
		width: 100%;
		margin: 20px auto;
		text-align: left;
	}

	p {
		max-width: 1200px;
		font-size: 18px;
		color: #ffc3c3;
		/* margin: 50px 15px !important; */
	}

	.desc-block ul>li {
		list-style: none;
		font-size: 16px;
		line-height: 20px;
		font-size: 18px;
		color: #ffc3c3;
	}

	.static-banner {
		position: relative;
	}

	.static-banner .static-banner-underlay {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0px;
	}

	.static-banner .static-banner-underlay img {
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: bottom;
		object-position: bottom;
	}

	.static-banner .static-banner-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #0b1419;
		opacity: 0.8;
	}

	.profile-header {
		position: absolute;
		top: -300px;
		width: 100%;
	}

	.top-row {
		display: flex;
		flex-direction: row;
		margin-top: 50px;
	}

	@media screen and (max-width: 600px) {
		.top-row {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: -10px;
		}
	}

	.profile-img-container {
		flex-basis: 200px;
		height: 200px;
		border-radius: 50%;
		border: 2px solid #F68B1F;
		overflow: hidden;
	}

	.profile-img-container img {
		height: 100%;
		width: 100%;
		-o-object-position: top;
		object-position: top;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.profile-body td,
	.profile-body th {
		color: antiquewhite;
	}

	section.profile-body .container {
		padding: 100px 30px;
	}

	@media screen and (max-width: 600px) {
		.profile-img-container {
			flex-basis: 100px;
			width: 100px !important;
			height: 100px !important;
			border-radius: 50%;
			border: 2px solid #F68B1F;
			overflow: hidden;
		}
	}

	.profile-header-text {
		margin: 20px 0px 0px 50px !important;
	}

	@media screen and (max-width: 600px) {
		.profile-header-text {
			margin: 20px 0px !important;
		}
	}

	.profile-header-text h1 {
		font-size: 40px !important;
		margin: 5px 0px !important;
	}

	.profile-header-text h2 {
		font-size: 20px !important;
		line-height: 24px !important;
		color: #fff;
		letter-spacing: 2px;
		font-weight: normal;
		margin: 5px 0px !important;
	}

	.profile-header-text .contact-dets {
		display: inline-block;
		font-size: 12px;
		margin-top: 15px !important;
		margin-right: 20px !important;
		font-weight: lighter;
		color: #fff;
		letter-spacing: 2px;
	}

	.profile-header-text h3 {
		font-size: 14px !important;
		text-transform: uppercase;
		text-decoration: none !important;
		font-family: "Open Sans", sans-serif;
		letter-spacing: 2px;
		text-align: center !important;
		font-weight: normal;
		margin: 5px 0px 0px 0px !important;
		text-align: left !important;
	}

	@media screen and (max-width: 700px) {
		.profile-header-text {
			text-align: center;
		}

		.profile-header-text h1 {
			font-size: 20px !important;
			margin: 5px 0px 0px 0px !important;
			text-align: center;
		}

		.profile-header-text h2 {
			font-size: 14px !important;
			line-height: 16px !important;
			color: #fff;
			letter-spacing: 2px;
			font-weight: normal;
			margin: 5px 0px 10px 0px !important;
			text-align: center;
		}

		.profile-header-text h3 {
			font-size: 14px !important;
			text-transform: uppercase;
			text-decoration: none !important;
			font-family: "Open Sans", sans-serif;
			letter-spacing: 2px;
			text-align: center !important;
			font-weight: normal;
			margin: 5px 0px 0px 0px !important;
			text-align: center;
		}

		.profile-header-text .contact-dets {
			display: block;
			font-size: 12px;
			margin-top: 5px !important;
			font-weight: lighter;
			color: #fff;
			letter-spacing: 1px;
		}
	}

	.profile-second-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.left-col {
		margin-right: 30px;
		width: 400px;
	}

	@media screen and (max-width: 650px) {
		.left-col {
			display: none;
		}
	}

	ul.profile-choices>li {
		list-style: none;
		border-radius: 5px;
		overflow: hidden;
		height: 50px;
	}

	ul.profile-choices>li a {
		padding: 5px 10px;
		font-size: 20px;
		line-height: 40px;
		font-weight: lighter;
		color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		transition-duration: 0.5s;
		height: 50px !important;
	}

	ul.profile-choices>li a:after {
		content: "chevron_right";
		font-family: "Material Icons";
		font-size: 20px;
		margin-right: 10px;
	}

	ul.profile-choices>li a:hover {
		color: #000;
		text-decoration: none;
		background-color: rgba(255, 255, 255, 0.2039215686);
	}

	.pickr {
		display: inline-block;
		margin-right: 6px !important;
	}

	.profile-des {
		font-family: "Open Sans", sans-serif;
		font-size: 25px;
		font-weight: normal;
		margin: 5px 0px;
		color: #fff;
	}

	details {
		margin-left: 0px !important;
	}

	.accordions {
		margin-top: 100px;
	}

	.sub-title {
		font-family: "Open Sans", sans-serif !important;
		font-size: 14px;
		letter-spacing: 5px;
	}

	b {
		font-weight: 500 !important;
		font-size: 22px !important;
	}

	i {
		font-size: 14px;
		margin-bottom: 130px !important;
		border-bottom: 1px solid #fff;
	}

	/* ul {
		margin-top: 20px !important;
		margin-bottom: 50px !important;
	} */

	ul>li {
		list-style: none;
		font-size: 16px;
		line-height: 20px;
	}

	h2.m-text {
		font-size: 30px;
		margin-left: 0px;
		font-weight: normal;
	}

	.desc-block {
		opacity: 1;
		transition-duration: 0.4s;
		overflow: none;
	}

	.desc-block-hidden {
		display: none;
	}

	.desc-active {
		text-decoration: none;
		background-color: rgba(255, 255, 255, 0.2039215686);
	}

	.desc-active a {
		color: #000;
	}

	ul.m-text {
		margin-top: 10px !important;
	}

	/* The Overlay (background) */
	.overlay {
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 0%;
		width: 100%;
		position: fixed;
		/* Stay in place */
		z-index: 1100;
		/* Sit on top */
		left: 0;
		top: 0;
		background-color: rgb(0, 0, 0);
		/* Black fallback color */
		background-color: rgba(0, 0, 0, 0.9);
		/* Black w/opacity */
		overflow-x: hidden;
		/* Disable horizontal scroll */
		transition: 0.5s;
		/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	/* Position the content inside the overlay */
	.overlay-content {

		position: relative;
		height: 100%;
		top: 25%;
		/* 25% from the top */
		width: 100%;
		/* 100% width */

		text-align: center;
		/* Centered text/links */
		margin-top: 30px;
		/* 30px top margin to avoid conflict with the close button on smaller screens */
	}

	/* The navigation links inside the overlay */
	.overlay a {
		padding: 8px;
		text-decoration: none;
		font-size: 18px;
		color: white;
		display: block;
		/* Display block instead of inline */
		transition: 0.3s;
		/* Transition effects on hover (color) */
	}

	.overlay h1 {
		color: white;
		font-size: 20px;
		font-weight: lighter;
		margin-bottom: 10px;
		text-decoration: underline;
	}

	/* When you mouse over the navigation links, change their color */
	.overlay a:hover,
	.overlay a:focus {
		color: #f1f1f1;

	}

	/* Position the close button (top right corner) */
	.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}

	/* added by rousnay */
	.profile-header-text h2 {
		margin: 5px 0px 10px !important;
	}

	.profile-header-text .contact-dets {
		margin-top: 0px !important;
		margin-right: 10px !important;
	}

	h3.paper-type {
		margin: 40px 0 0;
		text-decoration: underline;
		color: antiquewhite;
		font-family: "DM Serif Text", serif;
		letter-spacing: 1px;
		font-size: 1.4em;
	}

	.paper-details {
		padding: 30px 0px;
		border-bottom: 1px solid rgba(51, 51, 51, 0.1764705882);
	}

	.paper-details .paper-year {
		font-size: 14px;
		display: block;
		color: antiquewhite;
	}

	.paper-details a {
		text-decoration: none;
	}

	.paper-details p {
		line-height: 1.8em !important;
	}

	.paper-details .paper-title {
		font-size: 18px;
		margin: 10px 0px;
		font-family: "Open Sans", sans-serif;
		line-height: 1.7em;
		letter-spacing: 0.5px;
		color: antiquewhite;
	}

	.paper-details .paper-tags {
		/* margin: 20px 0px; */
	}

	.paper-details .paper-tags .tag {
		font-size: 14px;
		border: 1px solid rgba(17, 124, 247, 0.431372549);
		padding: 3px 8px;
		border-radius: 10px;
	}

	.paper-details p {
		margin: 5px;
		font-size: 14px;
	}

	.paper-details .paper-contributors {
		/* color: #222222; */
	}

	.paper-details.multiple .paper-contributors {
		margin-bottom: 45px;
	}
</style>
<?php get_footer(); ?>