Mura CMS Training : ZeroFour : Custom files used for Front End Developer training.

dsp_latest_blog.cfm

<cfscript>
	sectionFilename = 'blog';

	// feed setup
	feed = $.getBean('feed').setMaxItems(3).setSortBy('releaseDate').setSortDiretion('desc');
	// pull only from the desired section
	cBean = $.getBean('content').loadBy(filename=sectionFilename);
	if ( !cBean.getIsNew() ) {
		feed.addParam(
			relationship='AND'
			, field='tcontent.parentID'
			, dataType='varchar'
			, criteria=cBean.getContentID()
		);
	}
	// the iterator!
	it = feed.getIterator();
</cfscript>
<section class="box-article-list">
	<h2 class="icon icon-news">From the blog</h2>
	<cfif not cBean.getIsNew() and it.hasNext()>
		<cfoutput>
			<cfloop condition="#it.hasNext()#">
				<cfset item = it.next() />
				<cfset img = $.getURLForImage(fileid=item.getValue('fileid'), size='custom', width=180, height=167) />
				<article class="box-excerpt">
					<cfif Len(img)> 
						<a href="#item.getValue('url')#" class="image image-left"><img src="#img#" alt="#HTMLEditFormat(item.getValue('menuTitle'))#" /></a>
					</cfif>
					<div>
						<header>
							<span class="date">#LSDateFormat(item.getValue('releasedate'), 'mmmm dd, yyyy')#</span>
							<h3><a href="#item.getValue('url')#">#HTMLEditFormat(item.getValue('menutitle'))#</a></h3>
						</header>
						#item.getSummary()#
					</div>
				</article>
			</cfloop>
		</cfoutput>
	<cfelse>
		<h3>The Blog doesn't have any entries yet.</h3>
	</cfif>
</section>

dsp_spotlight.cfm

<cfscript>
	sectionFilename = 'news';

	// feed setup
	feed = $.getBean('feed').setMaxItems(1).setSortBy('releaseDate').setSortDiretion('desc');
	// pull only from the desired section
	cBean = $.getBean('content').loadBy(filename=sectionFilename);
	if ( !cBean.getIsNew() ) {
		feed.addParam(
			relationship='AND'
			, field='tcontent.parentID'
			, dataType='varchar'
			, criteria=cBean.getContentID()
		);
	}
	// the iterator!
	it = feed.getIterator();
</cfscript>
<section class="box-spotlight">
	<h2 class="icon icon-paper">Spotlight</h2>
	<cfif not cBean.getIsNew() and it.hasNext()>
		<cfoutput>
			<cfloop condition="#it.hasNext()#">
				<cfset item = it.next() />
				<cfset img = $.getURLForImage(fileid=item.getValue('fileid'), size='custom', width=364, height=168) />

				<article>
					<cfif Len(img)> 
						<a href="#item.getValue('url')#" class="image image-full"><img src="#img#" alt="#HTMLEditFormat(item.getValue('menuTitle'))#" /></a>
					</cfif>
					<header>
						<!--- <span class="date">#LSDateFormat(item.getValue('releasedate'), 'mmmm dd, yyyy')#</span> --->
						<h3><a href="#item.getValue('url')#">#HTMLEditFormat(item.getValue('menutitle'))#</a></h3>
						<cfif Len(item.getValue('credits'))>
							<span class="byline">#HTMLEditFormat(item.getValue('credits'))#</span>
						</cfif>
					</header>
					#item.getSummary()#
					<footer>
						<a href="#item.getValue('url')#" class="button button-alt button-icon button-icon-paper">Continue Reading</a>
					</footer>
				</article>
			</cfloop>
		</cfoutput>
	<cfelse>
		<h3>The Blog doesn't have any entries yet.</h3>
	</cfif>
</section>

extended.css

ol.linenums {
	list-style-type: decimal;
}

nav ul ul {
	margin-left: 1em;
	margin-bottom: 0;
}

ul.pagination li {
	display: inline-block;
	padding: 0.25em;
}

ul.pagination li a.current {
	color: black;
	text-decoration: none;
}