contact

page-contact-us.php

@@ -0,0 +1,16 @@
+<?php 
+$context = Timber::get_context();
+$post = new TimberPost();
+
+$query = array(
+ 'post_type' => 'instructor',
+ 'orderby' => 'title',
+ 'order' => 'ASC'
+);
+query_posts($query);
+$context['instructors'] = Timber::get_posts();
+$context['post'] = $post;
+Timber::render( array( 'page-' . $post->post_name . '.twig', 'page.twig' ), $context );
+
+
+

templates/page-contact-us.twig

@@ -0,0 +1,52 @@
+{% extends "base.twig" %}
+
+{% block content %}
+
+<main class="u-container">	
+		{% set colors = ['red', 'orange', 'yellow', 'green', 'blue'] %}
+		{% for instructor in instructors %}
+		<div class="contactCard__outer">
+			<a href="#{{instructor.slug}}" class="contactCard contactCard--{{colors[loop.index0 % 5]}}" id="{{instructor.slug}}-card">
+				<figure class="contactCard__top">
+					<img src="{{instructor.thumbnail.src}}" alt="{{instructor.title}}">
+					<figcaption>
+						<h3>{{instructor.get_field('wpcf-first-name')}} {{instructor.get_field('wpcf-last-name')}}</h3>
+						<h3>{{ instructor.get_field('wpcf-position') }}</h3>
+					</figcaption>
+				</figure>
+				<figure class="contactCard__bottom">
+					<div class="contactCard__bottomInner">
+						<h4>{{ instructor.get_field('wpcf-email') }}</h4>
+						<h4>{{ instructor.get_field('wpcf-concentration') }}</h4>
+					</div>
+					<hr>
+				</figure>
+			</a>
+		</div>
+		<div class="contactModal contactModal--{{colors[loop.index0 % 5]}}" id="{{instructor.slug}}">
+			<div class="contactModal__inner">
+				<header class="contactModal__header">
+						<h1>{{instructor.get_field('wpcf-first-name')}} {{instructor.get_field('wpcf-last-name')}}</h1>
+						<h3>{{ instructor.get_field('wpcf-position') }}</h3>
+				</header>
+				<section class="contactModal__body">
+					<figure class="contactModal__bodyInfo">
+						<img src="{{ instructor.thumbnail.src }}" alt="{{ instructor.slug }}" class="contactModal__profilePicture">
+						<figcaption>
+							<a href="mailto:{{ instructor.get_field('wpcf-email') }}">{{ instructor.get_field('wpcf-email') }}</a>
+							<p>{{ instructor.get_field('wpcf-phone-number') }}</p>
+							<p>{{ instructor.get_field('wpcf-address') }}</p>
+						</figcaption>
+					</figure>
+					<p>{{ instructor.content }}</p>
+				</section>
+				<footer class="contactModal__footer">
+					<a href="#all">Close</a>
+				</footer>
+			</div>
+		</div>
+		<a href="#all" class="contactModal__cover"></a>
+		{% endfor %}
+</main>
+
+{% endblock %}