Inspire Blog Templates

1 inspire.group index.html

{embed="_layouts/blog"
	blog_title="Inspire"
	blog_slug="inspire"
	blog_category_id="125"
	blog_description="Design & Interaction"
	blog_description_more="our three hundred foot view. Primarily written by/for UX designers, visual designers, and front-end developers."
	meta_description="Viget’s Inspire blog: discussing all things design & interaction including wireframing, typography, Photoshop tips and techniques, CSS, HTML5, and jQuery."
	rss="{gv_inspire_feed}"
}

2 _layouts.group blog.html

{embed="_layouts/index"}
{preload_replace:channel="blog"}
{preload_replace:limit="5"}

{exp:stash:set_value name="body_page" value="blog"}

{!-- Get the jobs related to the blog --}
{exp:stash:set name="careers" parse_tags="yes"}
	{exp:channel:entries
		channel="career"
		{gv_channel_disable_all}
		dynamic="off"
		category="{embed:blog_category_id}"
	}
		<li><a href="/about/careers/{url_title}">{title}</a></li>
	{/exp:channel:entries}
{/exp:stash:set}

{exp:stash:set name="sidebar"}
	<section class="section-blog-navigation section-blog-module section">
		<header class="section-header header">
			<h1>{embed:blog_title} is&hellip;</h1>
			<a href="{embed:rss}" class="light-rss-button rss-button button ir" rel="alternate" type="application/rss+xml" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if},RSS">RSS</a>
		</header>
		<div class="section-content section">
			<p class="blog-description">A <b>{embed:blog_description}</b> blog&mdash;{embed:blog_description_more}</p>
			
			{exp:low_search:form
				collection="blog"
				search_mode="all"
				result_page="{embed:blog_slug}/search"
				form_class="search-form form"
				form_id="search-form"
				loose_ends="yes"
			}
				<ul>
					<li>
						<label for="keywords">Search</label>
						<input type="text" class="text-field" name="keywords" id="keywords">
					</li>
					<li>
						<input type="hidden" name="category[]" value="{embed:blog_category_id}">
						<button type="submit" class="ir">Submit</button>
					</li>
				</ul>
			{/exp:low_search:form}
		</div>
	</section>

	<hr class="chevrons">

	<section class="section-contributors section-blog-module section">
		<header class="section-header header">
			<h1>Contributors</h1>
		</header>
		<div class="section-content section">
			<ul class="grouping-blog-links grouping">
				{exp:viget:blog_authors
					category_id="{embed:blog_category_id}"
				}
					<li><a href="/about/team/{author_url_title}" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if},Contributors Click,{exp:viget:ga_encode}{author_name}{/exp:viget:ga_encode}">{author_name}</a></li>
				{/exp:viget:blog_authors}
			</ul>
		</div>
	</section>

	<hr class="chevrons">

	{if segment_2 == ""}
		<section class="section-contact section-blog-module section">
			<header class="section-header header">
				<h1>Say &ldquo;Hey!&rdquo;</h1>
			</header>
			<div class="section-content section">
				<p>Have any questions, comments, ideas, or secrets to share? Let us know.</p>
				{exp:freeform:form
					required="name|email"
					form:class="contact-form form"
					form:data-track-form="{embed:blog_title} Hub,Contact Submission"
					form:id="contact-viget-form"
					template="blog_contact"
					send_user_email="yes"
					user_email_template="blog_contact_response"
					notify="{gv_send_to}"
					return="/{embed:blog_slug}"
					reply_to="yes"
				}
					<ul>
						<li class="row">
							<div class="col-1 col">
								<label for="name">Name</label>
							</div>
							<div class="col-3 col">
								<input type="text" class="text-field required" name="name" id="name">
							</div>
						</li>
						<li class="row">
							<div class="col-1 col">
								<label for="email">Email</label>
							</div>
							<div class="col-3 col">
								<input type="email" class="text-field required email" name="email" id="email">
							</div>
						</li>
						<li class="row">
							<div class="col-1 col">
								<label for="note">Note</label>
							</div>
							<div class="col-3 col">
								<textarea class="text-field" name="note" id="note"></textarea>
							</div>
						</li>
						<li class="hidden">
							<div class="col-1 col">
								<label for="honeepot">Don&rsquo;t put anything here</label>
							</div>
							<div class="col-3 col">
								<input type="text" class="text-field" name="honeepot" id="honeepot" tabindex="9999" />
								<input type="hidden" name="which_blog" value="{embed:blog_title} - {embed:blog_description}" />
								<input type="hidden" name="website" value="{gv_current_url}" />
							</div>
						</li>
						<li class="row">
							<div class="col-3 col-offset-1 col">
								<button class="submit-button diminished-button button left" type="submit">Submit</button>
							</div>
						</li>
					</ul>
				{/exp:freeform:form}

			</div>
		</section>
	
		<hr class="chevrons">
	{/if}

	<section class="section-more-blogs section-blog-module section">
		<header class="section-header header">
			<h1>More Viget Blogs</h1>
		</header>
		<div class="section-content section">
			<ul class="grouping-blog-links grouping">
				<li><a href="/advance" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if}, More Viget Blogs Click,Advance"><img src="/assets/images/content/blogs-advance/logo-dark.png" alt="Advance: Strategy &amp; Process"></a></li>
				<li><a href="/extend" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if}, More Viget Blogs Click,Extend"><img src="/assets/images/content/blogs-extend/logo-dark.png" alt="Extend: Code &amp; Technology"></a></li>
				<li><a href="/flourish" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if}, More Viget Blogs Click,Flourish"><img src="/assets/images/content/blogs-flourish/logo-dark.png" alt="Flourish: Viget News &amp; Culture"></a></li>
				<li><a href="/inspire" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if}, More Viget Blogs Click,Inspire"><img src="/assets/images/content/blogs-inspire/logo-dark.png" alt="Inspire: Design &amp; Interactive"></a></li>
			</ul>
		</div>
	</section>
	
	{if {exp:stash:not_empty name="careers"}}
		<hr class="chevrons">

		<section class="section-hiring section-blog-module section">
			<header class="section-header header">
				<h1>We&rsquo;re Hiring</h1>
			</header>
			<div class="section-content section">
				<p>Check out <a href="http://www.teamviget.com/" data-track-event="{embed:blog_title} {if segment_2}Post{if:else}Hub{/if},Team Viget Click">Team Viget</a> to see the stellar adventures of our Lab Rats and tell a friend about these open positions:</p>
				<ul class="grouping-blog-links grouping">
					{exp:stash:get name="careers"}
				</ul>
			</div>
		</section>
	{/if}
	
{/exp:stash:set}

{exp:stash:set name="blog_header"}
	<header class="content-primary-header header">
		<h1><span class="left">Your friends at Viget present</span> <a href="/{embed:blog_slug}"><span class="visuallyhidden">{embed:blog_title},</span></a> <span class="right">a {embed:blog_description} Blog</span></h1>
	</header>
{/exp:stash:set}

{exp:switchee variable="{segment_2}" parse="inward"}
	
	{!-- Listing page and pagination --}
	{case value="#^P(\d+)$#|''"}
		{exp:stash:set_value name="body_class" value="page-blog-{embed:blog_slug} page-blog-listing page-blog page-secondary page"}
		{exp:stash:set_value name="title" value="{embed:blog_title} | {embed:blog_description} Blog | Viget"}
		{exp:stash:set_value name="meta_description" value="{embed:meta_description}"}
		{exp:stash:set name="content"}
			<section class="content-primary content">
				<div class="wrapper">
					{exp:stash:get name="blog_header"}

					<section class="section-blog-wrapper section row">
						<div class="col-8 col">
							{exp:channel:entries
								channel="{channel}"
								{gv_channel_disable}
								limit="{limit}"
								category="{embed:blog_category_id}"
							}
							
								{sn_blog_listing_item}
							
							{/exp:channel:entries}
						</div>
						<aside class="aside col-4 col">
							{exp:stash:get name="sidebar"}
						</aside>
					</section>
				</div>
			</section>
		{/exp:stash:set}
	
	{/case}
	
	{!-- Individual view --}
	{case default="Yes"}
		
		{!-- Set previous and next --}
		{exp:stash:set_value name="prev_next_base" value="/{embed:blog_slug}/"}
		
		{exp:channel:prev_entry
			channel="{channel}"
			category="{embed:blog_category_id}"
		}
			{exp:stash:set_value name="next_entry" value="{url_title}"}
			{exp:stash:set_value name="next_entry_title" value="{title}"}
			{exp:stash:set_value name="next_tracking" value="{embed:blog_title} Post,Next Post"}
		{/exp:channel:prev_entry}
		
		{exp:channel:next_entry
			channel="{channel}"
			category="{embed:blog_category_id}"
		}
			{exp:stash:set_value name="prev_entry" value="{url_title}"}
			{exp:stash:set_value name="prev_tracking" value="{embed:blog_title} Post,Previous Post"}
		{/exp:channel:next_entry}
		
		{!-- Get the actual blog post --}
		{exp:channel:entries
			channel="{channel}"
			{gv_channel_disable_basic}
			limit="1"
			require_entry="yes"
			category="{embed:blog_category_id}"
			status="open|preview"
			show_future_entries="yes"
			track_views="one"
		}
			{if switchee_no_results}
				{redirect="404"}
			{/if}
			
			{exp:stash:set_value name="title" value="{title} | Viget"}
			{exp:stash:set_value name="body_class" value="page-blog-{embed:blog_slug} page-blog-post page-blog page-tertiary page"}
			
			{exp:stash:set name="content"}
				<section class="content-primary content">
					<div class="wrapper">
						{exp:stash:get name="blog_header"}
						
						<section class="section-blog-wrapper section row">
							<div class="col-10 col">
								<article class="article-blog-post article hentry row">
									<div class="article-blog-post-wrapper wrapper col-8 col right">
										<header class="header-blog-post header">
											<h1 class="entry-title"><a href="/{embed:blog_slug}/{url_title}" rel="bookmark">{title}</a></h1>
											<div class="blog-post-meta clear">
												<span class="breadcrumbs">
													<a href="/{embed:blog_slug}">{embed:blog_title}</a> // 
												</span>
												<time class="published" datetime="{entry_date format='%Y-%m-%dT%G:%i:%s%Q'}" pubdate>{entry_date format="{gv_date_format}"}</time>
												<a href="/{embed:blog_slug}/{url_title}#disqus_thread" class="comment-count" data-disqus-identifier="{entry_id}">Comments</a>
											</div>
										</header>
										<div class="entry-content wysiwyg">
											{switchee variable="{markdown}" parse="inward"}
												{case value="Yes"}
													{!--
														weird stuff was happening when putting line breaks between
														the plugin call and the fields
													--}
													{exp:smartdown}{body}{extended}{/exp:smartdown}
												{/case}

												{case default="Yes"}
													{body}
													{extended}
												{/case}
											{/switchee}
										</div>
										
										<div class="entry-comments">
											<div id="disqus_thread"></div>
											<script type="text/javascript">
											    var disqus_shortname = 'viget',
													disqus_identifier = '{entry_id}';

											    /* * * DON'T EDIT BELOW THIS LINE * * */
											    (function() {
											        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
											        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
											        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
											    })();
											</script>
											<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
										</div>
										
									</div>
									<aside class="aside-blog-post aside col-2 col">
										{exp:viget:user_info
											author_id="{author_id}"
											parse="inward"
										}
											<section class="section-author section author vcard clear">
												{if author_status == 'open'}
													{exp:ce_img:pair
														src="{thumbnail}"
														height="130"
														width="130"
													}
														<figure class="photo-frame-no-border photo-frame encircle">
															<img src="{made}" alt="{author}" class="photo">
														</figure>
													{/exp:ce_img:pair}
												{if:else}
													<figure class="photo-frame-no-border photo-frame encircle">
														<img src="/assets/images/content/alumni.jpg" alt="{author}" class="photo">
													</figure>
												{/if}
												<div class="author-meta">
													<span class="fn">{author}</span>
													{if author_status == 'open'}
														<span class="role">{job_title}</span>
														<ul class="grouping-blog-links grouping">
															<li><a href="/about/team/{username}" data-track-event="{embed:blog_title} Post,Profile Click,{exp:viget:ga_encode}{author}{/exp:viget:ga_encode}">{first_name_possessive} profile</a></li>
														</ul>
													{/if}
												</div>
											</section>
										{/exp:viget:user_info}
										
										<hr class="chevrons">
										
										{if {exp:stash:not_empty name="prev_entry"} || {exp:stash:not_empty name="next_entry"}}
											<nav class="quick-pagination navigation">
												<ul class="clear">
													{if {exp:stash:not_empty name="prev_entry"}}
														<li><a href="/{embed:blog_slug}/{exp:stash:get name='prev_entry'}" class="ir arrow-prev arrow" rel="prev"{if {exp:stash:not_empty name="prev_tracking"}} data-track-event="{exp:stash:get name="prev_tracking"}"{/if}>Previous</a></li>
													{/if}
													{if {exp:stash:not_empty name="next_entry"}}
														<li><a href="/{embed:blog_slug}/{exp:stash:get name='next_entry'}" class="ir arrow-next arrow" rel="next"{if {exp:stash:not_empty name="next_tracking"}} data-track-event="{exp:stash:get name="next_tracking"}"{/if}>Next</a></li>
													{/if}
												</ul>
												{if {exp:stash:not_empty name="next_entry"}}
													<p><b>Next Post</b> <a href="/{embed:blog_slug}/{exp:stash:get name='next_entry'}"{if {exp:stash:not_empty name="next_tracking"}} data-track-event="{exp:stash:get name="next_tracking"}"{/if}>{exp:stash:get name="next_entry_title"}</a></p>
												{/if}
											</nav>
										{/if}
										
										<hr class="chevrons">
										
										{sn_social_sharing_widget}
										
									</aside>
								</article>
							</div>
							<aside class="aside col-2 col">
								{exp:stash:get name="sidebar"}
							</aside>
						</section>

					</div>
				</section>
			{/exp:stash:set}
		
			{exp:stash:set name="extra_js"}
				<script>
					_gaq.push(['_trackEvent', 'Date', '{entry_date}',,,true]);
					
					VIGET.common.ga.bindSocialButtons();
					
					window.disqus_config = function () { 
						this.callbacks.onNewComment = [function(comment){
							//Track event
							VIGET.common.ga.eventTrack('{embed:blog_title} Post,Comment');
							
							//Send author email
							$.ajax({
								type : "POST",
								data : comment,
								url : "/_functions/comment-notification/{entry_id}"
							});
						}];
					};
				</script>
			{/exp:stash:set}
			
		{/exp:channel:entries}
	{/case}
	
	{!-- Search results --}
	{case value="search"}
		{exp:stash:set_value name="body_class" value="page-blog-{embed:blog_slug} page-blog-listing page-blog page-secondary page"}
		{exp:stash:set_value name="title" value="Search | {embed:blog_title} | Viget"}
		
		{!-- Get the search results --}
		{exp:stash:set name="search_results" parse_tags="yes"}
			{exp:low_search:results
				query="{segment_3}"
				limit="{limit}"
				require_all="category"
			}
				{sn_blog_listing_item}
			{/exp:low_search:results}
		{/exp:stash:set}
		
		{exp:stash:set name="content"}
			<section class="content-primary content">
				<div class="wrapper">
					{exp:stash:get name="blog_header"}

					<section class="section-blog-wrapper section row">
						<div class="col-8 col">
							{if {exp:stash:not_empty name="search_results"}}
								{exp:stash:get name="search_results"}
							{if:else}
								Sorry, no results were found. Give the search another try.
							{/if}
						</div>
						<aside class="aside col-4 col">
							{exp:stash:get name="sidebar"}
						</aside>
					</section>
				</div>
			</section>
		{/exp:stash:set}
	{/case}
	
{/exp:switchee}