Work Index Template

gistfile1.html

{embed="_layouts/index"}
{preload_replace:channel="work"}

{exp:switchee variable="{segment_2}" parse="inward"}
	
	{!-- Work listing --}
	{case value=""}
		{exp:stash:set_value name="title" value="Our Work | Viget"}
		{exp:stash:set_value name="body_class" value="page-work page-primary page"}
		{exp:stash:set_value name="body_page" value="work"}
		{exp:stash:set_value name="meta_description" value="Viget offers strategy, design, and development services to craft remarkable digital products and platforms for start-ups and big brands alike."}
		{exp:stash:set name="nav_secondary"}
			<li class="nav-item-portfolio nav-item"><a href="#portfolio" data-track-event="Sub Nav,Work,Portfolio">Portfolio</a></li>
			<li class="nav-item-services nav-item"><a href="#services" data-track-event="Sub Nav,Work,Services">Services</a></li>
			<li class="nav-item-hire-viget nav-item"><a href="#inquire" data-track-event="Sub Nav,Work,Inquire">Inquire</a></li>
		{/exp:stash:set}
		
		{!-- Get work items --}
		{exp:channel:entries
			channel="{channel}"
			{gv_channel_disable_basic}
		}
			
			{!-- Get ALL the work items --}
			{exp:stash:append name="work_listing"}
				<li class="project" data-id="{count}" data-category="{categories show_group='20' backspace='1'}{category_url_title} {/categories}">
					<a href="/work/{url_title}" data-track-event="Work,Portfolio Click,{exp:viget:ga_encode}{title}{/exp:viget:ga_encode}">
						{exp:ce_img:pair
							src="{work_thumbnail}"
							height="160"
							width="290"
						}
							<figure class="photo-frame">
								<img src="{made}" alt="" class="photo">
							</figure>
						{/exp:ce_img:pair}
						<span>{title}</span>
					</a>
				</li>
			{/exp:stash:append}
			
			{!-- Get the case stories only too --}
			{exp:stash:append name="case_story_listing" match="#Yes#" against="{work_is_case_story}"}
				<div class="case-story">
					<a href="/work/{url_title}" data-track-event="Work,Featured Client Click,{exp:viget:ga_encode}{title}{/exp:viget:ga_encode}">
						{exp:ce_img:pair
							src="{work_carousel_thumbnail}"
							height="190"
							width="300"
						}
							<img src="{made}" alt="{title}" class="photo">
						{/exp:ce_img:pair}
						<div class="clear">
							{related_entries id="work_client"}
								{exp:ce_img:pair
									src="{client_logo}"
									height="130"
									width="220"
								}
									<span class="logo"><img src="{made}" alt="{title}"></span>
								{/exp:ce_img:pair}
							{/related_entries}
							<p>{work_homepage_summary}</p>
						</div>
					</a>
				</div>
			{/exp:stash:append}

		{/exp:channel:entries}
		
		
		{!-- Get clients --}
		{exp:channel:entries
			channel="client"
			{gv_channel_disable_most}
			orderby="client_sort_order"
			sort="asc"
			limit="12"
		}

			{exp:stash:append name="featured_clients"}
				<li>
					{exp:ce_img:pair
						src="{client_logo}"
						height="130"
						width="220"
					}
						<img src="{made}" alt="{title}"  />
					{/exp:ce_img:pair}
				</li>
			{/exp:stash:append}

		{/exp:channel:entries}
		
		
		{exp:stash:set name="content"}
			
			<section class="content-primary content" id="case-stories">
				<div class="wrapper">
					<header class="content-primary-header header" id="work">
						<h1>Our Work</h1>
					</header>

					<section class="section-featured-projects section">
						<div class="section-content">
							<div class="case-stories clear" id="case-story-gallery">
								<div class="wrapper">
									{exp:stash:get name="case_story_listing"}
								</div>
							</div>
							<nav class="case-stories-navigation navigation">
								<ul class="clear">
									<li><a href="#" class="ir arrow-prev arrow" id="case-story-gallery-prev" rel="prev" data-track-event="Work,Featured Client Scroll,Scroll">Previous</a></li>
									<li><a href="#" class="ir arrow-next arrow" id="case-story-gallery-next" rel="next" data-track-event="Work,Featured Client Scroll,Scroll">Next</a></li>
								</ul>
							</nav>
						</div>
					</section>

					<hr class="chevrons">

					<section class="section-clients section">
						<div class="section-content-intro">
							<p>For <b>big brands &amp; inspiring startups</b> alike, we make remarkable <b>digital products &amp; platforms</b> that <b>connect</b>, <b>inform</b>, and <b>influence</b>. Our full-service <b>strategy, design, &amp; development</b> teams deliver from <b>ideas</b> to <b>execution</b>.</p>
						</div>
						<div class="section-content">
							<ul class="client-logo-list clear">
								{exp:stash:get name="featured_clients"}
							</ul>
						</div>
					</section>

					<hr class="chevrons">

					<section class="section-projects section row" id="portfolio">
						<header class="section-header header col-2 col">
							<h1>Portfolio</h1>

							<nav class="filters-nav nav">
								<h2>View</h2>
								<ul>
									<li class="nav-item-current nav-item"><a href="#recent" data-filter-type="order" data-track-event="Work,Portfolio Sort,Most Recent">Most Recent</a></li>
									<li class="nav-item"><a href="#alpha" data-filter-type="order"data-track-event="Work,Portfolio Sort,A to Z">A to Z</a></li>
									
									{exp:channel:categories
										channel="{channel}"
										category_group="20"
										style="linear"
										disable="category_fields"
									}
										<li class="nav-item"><a href="#{category_url_title}" data-filter-type="category"data-track-event="Work,Portfolio Sort,{exp:viget:ga_encode}{category_name}{/exp:viget:ga_encode}">{category_name}</a></li>
									{/exp:channel:categories}
								</ul>
							</nav>
						</header>
						
						<div class="section-content col-10 col">
							<ul class="grouping-projects grouping clear">
								{exp:stash:get name="work_listing"}
							</ul>
						</div>
										</div>
			</section>
			
		{/exp:stash:set}
	{/case}

{/exp:switchee}