album.lens

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

<!-- Load this template's source data (album) and limit for pagination -->
<koken:load limit="50">

	<!-- 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="{{ album.title strip_html="true" }}" />
		<meta property="og:description" content="{{ album.summary | album.description strip_html="true" }}" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="{{ album.url }}" />
		<koken:covers><koken:shift>
		<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:shift></koken:covers>
		<koken:not empty="profile.twitter">
			<meta name="twitter:card" content="gallery" />
			<meta name="twitter:site" content="@{{ profile.twitter }}" />
			<meta name="twitter:creator" content="@{{ profile.twitter }}" />
			<koken:covers minimum="4" limit="4">
				<koken:loop>
					<meta name="twitter:image{{ index }}" content="{{ content.presets.medium_large.cropped.url }}">
				</koken:loop>
			</koken:covers>
		</koken:not>
	</koken:head>

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

		<!-- Displays links to neighbor albums plus link back to albums index -->
		<!-- Only show if the album is public, not unlisted -->
		<koken:if true="album.public">
			<div id="content-pag">
				<koken:previous>
					<koken:link title="View {{ album.title }}">&larr; {{ album.title }}</koken:link>
					&nbsp;&nbsp;
				</koken:previous>
				<koken:next>
					<koken:link title="View {{ album.title }}">{{ album.title }} &rarr;</koken:link>
				</koken:next>
			</div>
		</koken:if>

		<koken:breadcrumbs />

	</nav>

	<section>

		<header>

			<!-- If album's visibility is unlisted, show message -->
			<koken:unlisted>
				<p class="unlisted">
					This album is unlisted. Please don't share a link to it.
				</p>
			</koken:unlisted>

			<h2>
				<!-- Display the album's title -->
				{{ album.title }}
				<!-- Display number of items plus link to full album if user arrives at this page from a filtered url. See koken:event_album_update in timeline.lens for link example. -->
				<koken:filtered>
					({{ filter.count }} of {{ album.counts.total }}) / <koken:link title="View {{ album.title }}">View all</koken:link>
				</koken:filtered>
			</h2>

		</header>

		<!-- Display the album's description -->
		{{ album.description paragraphs="true" }}

		<footer>

			<ul class="blank">

				<li>
					<!-- Display timestamp -->
					<strong>Published:</strong>
					<!-- Link to archive.albums.lens to view all albums published the same momth -->
					<koken:link to="archive">
						<koken:time />
					</koken:link>
				</li>

				<!-- Display link to the full screen lightbox viewer -->
				<li>
					<strong>Lightbox:</strong>
					<koken:link lightbox="true" class="button" bind_to_key="l" title="View in lightbox">View in lightbox</koken:link>
				</li>

				<!-- Display essays/pages written about this album -->
				<koken:topics>
					<li>
						<strong>Related content:</strong>
						<koken:loop separator=", ">
							<koken:link title="Read {{ title }}">
								{{ title }}
							</koken:link>
						</koken:loop>
					</li>
				</koken:topics>

				<!-- Display the album's categories -->
				<koken:categories>
					<li>
						<strong>Categories:</strong>
						<koken:loop separator=", ">
							<koken:link title="View all {{ labels.album.plural case='lower' }} in {{ category.title }}">
								{{ category.title }}
							</koken:link>
						</koken:loop>
					</li>
				</koken:categories>

				<!-- Display the album's tags -->
				<koken:tags>
					<li>
						<strong>Tags:</strong>
						<koken:loop separator=" ">
							<koken:link title="View all {{ labels.album.plural case='lower' }} in #{{ tag.title }}">
								#{{ tag.title }}
							</koken:link>
						</koken:loop>
					</li>
				</koken:tags>

				<!-- If album is part of a set, display link to it -->
				<koken:parent>
					<li>
						<strong>From the set:</strong> <koken:link title="View {{ album.title }}">
						{{ album.title }}</koken:link>
					</li>
					<li>
						<!-- Display links to other albums part of the same set -->
						<strong>Other albums in this set:</strong>
						<koken:loop separator=",">
							<koken:link title="View {{ album.title }}">{{ album.title }}</koken:link>
						</koken:loop>
					</li>
				</koken:parent>

				<!-- Display social share links if album has public visibility -->
				<koken:public>
					<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>
				</koken:public>

				<!-- Display a link to this album's RSS feed -->
				<li>
					<strong>RSS:</strong>
					<a href="{{ album.rss }}">Subscribe</a>
				</li>

			</ul>

		</footer>

		<br>

		<!-- Loop over all the items the album contains. Dislay photo, title and caption and link each to content.lens -->
		<koken:loop>

			<!-- wrapper used for keyboard navigation targetting -->
			<section class="item">

				<!-- Displayed if the asset is an image -->
				<koken:content_image>
					<koken:link title="View {{ content.title | content.filename }}">
						<koken:img />
					</koken:link>
				</koken:content_image>
				<!-- Displayed if the asset is a video -->
				<koken:content_video>
					<koken:video />
				</koken:content_video>

				<h3><koken:link title="View {{ content.title | content.filename }}">{{ content.title | content.filename }}</koken:link></h3>

				{{ content.caption paragraphs="true" }}

			</section>

		</koken:loop>

		<!-- Display number of items plus link to full album if user arrives at this page from a filtered url. See koken:event_album_update in timeline.lens for link example. -->
		<koken:filtered>
			<p>
				{{ filter.count }} of {{ album.counts.total }} / <koken:link title="View {{ album.title }}">View all</koken:link>
			</p>
		</koken:filtered>

		<!-- Display pagination links -->
		<koken:include file="inc/pagination.html" />

	</section>

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

		<!-- Display fallback message in Site editor only -->
		<koken:note>
			No album loaded
		</koken:note>

</koken:load>

<!-- Turn on keyboard scrolling (left/right arrow keys) for items -->
<koken:keyboard_scroll element=".item" />

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