essay.lens

<koken:include file="inc/header.html" />

<!-- Load this template's source data (essay) -->
<koken:load>

	<!-- Add Facebook Open Graph and Twitter Cards metadata for nicer sharing -->
	<koken:head>
		<meta property="og:site_name" content="{{ site.title }}" />
		<meta property="og:title" content="{{ essay.title strip_html='true' }}" />
		<meta property="og:description" content="{{ essay.excerpt strip_html='true' }}" />
		<meta property="og:url" content="{{ essay.url }}" />
		<meta property="og:type" content="website" />
		<koken:featured_image>
		<meta property="og:image" content="{{ content.presets.medium_large.url }}" />
		<meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
		<meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
		</koken:featured_image>
		<meta name="medium" content="article" />
		<koken:not empty="profile.twitter">
			<koken:featured_image>
			<meta name="twitter:card" content="summary_large_image" />
			<meta name="twitter:site" content="@{{ profile.twitter }}" />
			<meta name="twitter:creator" content="@{{ profile.twitter }}" />
			<meta name="twitter:image" content="{{ content.presets.medium_large.url }}" />
			</koken:featured_image>
		</koken:not>
	</koken:head>

	<div class="lcol">

		<!-- Display breadcrumb navigation -->
		<nav id="bread">

			<!-- Pagination to view neighboring essays -->
			<div id="content-pag">

				<koken:next>
					<koken:link title="Read {{ essay.title }}" bind_to_key="left">&larr; {{ essay.title }}</koken:link>&nbsp;&nbsp;
				</koken:next>

				<koken:previous>
					&nbsp;&nbsp;<koken:link title="Read {{ essay.title }}" bind_to_key="right">{{ essay.title }} &rarr; </koken:link>
				</koken:previous>

			</div>

			<koken:breadcrumbs />

		</nav>

		<article>

			<header>

				<h2>{{ essay.title }}</h2>

			</header>

			<!-- Display body of the essay -->
			{{ essay.content }}

			<footer>

				<ul class="blank">

					<!-- Publishes the link for this essay -->
					<li>
						<strong>Permalink:</strong>
						<koken:link title="{{ essay.title }}">Link</koken:link>
					</li>

					<!-- Publish the essay's categories. Links to archive.essays.lens -->
					<koken:categories>
						<li>
							<strong>Category:</strong>
							<koken:loop separator=", ">
								<koken:link title="View all {{ labels.essay.plural case='lower' }} in {{ category.title }}">
									{{ category.title }}
								</koken:link>
							</koken:loop>
						</li>
					</koken:categories>

					<!-- Publish the essays' tags. Links to archive.essays.lens -->
					<koken:tags>
						<li>
							<strong>Tags:</strong>
								<koken:loop separator=", ">
								<koken:link title="View all {{ labels.essay.plural case='lower' }} in {{ tag.title }}">
									{{ tag.title }}
								</koken:link>
							</koken:loop>
						</li>
					</koken:tags>

					<!-- Display social share links -->
					<li>
						<strong>Share:</strong>
						<koken:link share="twitter">Twitter</koken:link>
						<koken:link share="facebook">Facebook</koken:link>
						<koken:link share="pinterest">Pinterest</koken:link>
						<koken:link share="tumblr">Tumblr</koken:link>
						<koken:link share="google-plus">Google+</koken:link>
					</li>

					<!-- Display image and info about album assigned as essay topic -->
					<koken:topics>
						<li>
						<strong>Related content:</strong>
						<br>
						<koken:loop>
							<koken:link title="View {{ album.title }}">
								<koken:img preset="small" />
							</koken:link>
							<br>
							<koken:link title="View {{ album.title }}">
								{{ album.title }}
							</koken:link>
							({{ album.counts.total }} images)
						</koken:loop>
						</li>
					</koken:topics>

				</ul>

			</footer>

			<!-- Display discussions or other data if enabled via a plugin (eg, our Disqus plugin) -->
			<koken:discussion>

				<h5>Comments</h5>

				{{ discussion }}

			</koken:discussion>

		</article>

	</div> <!-- close .lcol -->

	<div class="rcol">

		<aside>

			<!-- Display links to other essays in this category -->
			<koken:categories>
				<koken:loop>
					<section>
						<h5>Other {{ labels.essay.plural case="lower" }} in {{ category.title }}</h5>
						<koken:load source="essays" filter:category="{{ category.id }}">
							<koken:loop>
								<koken:link title="Read {{ essay.title }}">
									{{ essay.title }}
								</koken:link>
								<br>
							</koken:loop>
						</koken:load>
					</section>
				</koken:loop>
			</koken:categories>

			<section>
				<!-- Links to view essays by publish date in archive.essays.lens -->
				<h5>View {{ labels.essay.plural case="lower" }} by date</h5>
				<koken:dates limit_to="essays">
					<koken:select label="Select month" />
				</koken:dates>
			</section>

			<section>
				<!-- Links to view essays by category in archive.essays.lens -->
				<koken:categories limit_to="essays" order_by="essay_count">
					<h5>View {{ labels.essay.plural case="lower" }} by {{ labels.category.singular case="lower" }}</h5>
					<koken:loop>
						<koken:link title="title="View all {{ labels.essay.plural case='lower' }} in {{ category.title }}"">
							{{ category.title }} ({{ category.counts.total }})
						</koken:link>
						<br>
					</koken:loop>
				</koken:categories>
			</section>

			<section>
				<!-- Links to view essays by tag in archive.essays.lens -->
				<koken:tags limit_to="essays" order_by="essay_count">
					<h5>View {{ labels.essay.plural case="lower" }} by {{ labels.tag.singular case="lower" }}</h5>
					<koken:loop>
						<koken:link title="View all {{ labels.essay.plural case='lower' }} in {{ tag.title }}">
							{{ tag.title }} ({{ tag.counts.total }})
						</koken:link>
						<br>
					</koken:loop>
				</koken:tags>
			</section>

		</aside>

	</div> <!-- close .rcol -->

	<!-- Fallback content if no data was loaded by koken:load -->
	<koken:else>

		<!-- Display fallback message in Site editor only -->
		<koken:note>
			No essay found. Create one in Text.
		</koken:note>

</koken:load>

<koken:include file="inc/footer.html" />