Creating an article list with IBM WCM 8.0 listings

article_list.css

/*Styling for the article list and detail views (bootstrap-based)*/

.articleList article:not(:first-child), .articleList .pager {
    border-top: 4px solid #f5f5f5;    
}

.articleList .pagination li {
	border: none;
	padding: 0;
}

.inlineAuthoring a:not(:first-child) {
	margin-left: 8px;
}

.articleMetadata {
	margin-bottom: 12px;
}

.articleMetadata  div{
	padding-left: 0;
}

.articleFooter a {
	padding: 5px;
}

article_list_listing_1.html

<!-- Article detail Presentation Template -->

[Component name="article-list-design/article list/css - article list"]
<div class="articleList">
	<div class="row">  
		<div class="col-md-12">			
			<article>
				<h2>[Element context="current" type="content" key="Title"]</h2>
				[Component name="article-list-design/article list/atools - article edit"]
				<!-- article metadata-->
				<div class="row articleMetadata">                                                       
					<div class="col-sm-12 col-md-12">
						<span class="glyphicon glyphicon-pencil"></span>&nbsp;[Element context="current" type="content" key="Author"]                                
					</div>
					<div class=" col-sm-12 col-md-12">
						<span class="glyphicon glyphicon-time"></span>&nbsp;[Property context="current" type="content" format="DATE_MEDIUM" field="publishdate"]
					</div>
				</div>   
				
				<!--Title image-->			
				<img src='[Element context="current" type="content" key="Image" format="url"]' class='img-responsive' alt='[Element context="current" type="content" key="Image" format="alt"]'>
				
				<br/>

				<!--Lead paragraph-->
				<p class="lead">
				 [Element context="current" type="content" key="Article lead"]  
				</p>

				<!-- Article body/snippet -->
				[Element context="current" type="content" key="Article body"]

				<!-- Article footer containing social links etc-->                      
				<div class="articleFooter pull-right">  	  
					<a href="#" data-media="twitter" data-via="MySite" data-title='[Element context="current" type="content" key="Title"]' data-hashtags="sample1,sample2" class="share-popup"><span class="fa fa-twitter fa-2x"></span></a>
					<a href="#" data-media="facebook" data-title='[Element context="current" type="content" key="Title"]' class="share-popup"><span class="fa fa-facebook fa-2x"></span></a>
					<a href="#" data-media="linkedin" data-title='[Element context="current" type="content" key="Title"]' class="share-popup"><span class="fa fa-linkedin fa-2x"></span></a>
			   </div>			   			  
			</article>                                   
		</div>
	</div>          
</div>

article_list_listing_2.html

<!--Pagination component -->

<!-- Header -->
<div class="row pager"><ul class='pagination'><li><span>

<!-- Footer -->
</span></li></ul></div>

<!-- Separator -->
</span></li>
<li><span>

<!-- Previous control active and inactive design (<<) -->
&laquo;

<!-- Next control active and inactive design (>>) -->
&raquo;

<!-- Continuation design when there's more pages than the # rendered by this component -->
...

<!-- This renders out a link like this: -->
<div class="row pager"><ul class='pagination'><li><span>
<!-- for links,like pages: -->
<a href="?">text</a>
<!-- For text, e.g. current page or inactive element -->
1

<!--If there are more elements -->
</span></li>
<li><span>

<!-- at the end -->
</span></li></ul></div>

article_list_listing_3.html

<!-- Paginator for bootstrap style fix -->

<!-- To fix the styling of a bootstrap pagination component that was created by a Pagination Component,
you need to manually apply the bootstrap 'active' class to the current page's list item.
Firstly, in the Pagination component, let it render out the input box to "jump to page", including prefilling it with the current page number.
Then, with the script below, hide that input form, grab the current page number from the input and use it to search for and apply the bootstrap styling
to the correct list item.
-->
<script>
(function applyBootstrapSelectorToCurrentPage() {
	$('.pagination > li > span > form').parent().parent().hide();
	var currentPageNumber = $('.pagination > li > span > form input').val();
	var selectorToCurrentPageSpan = '.pagination > li > span:contains("' + currentPageNumber + '")';
	$(selectorToCurrentPageSpan).parent().addClass('active');
}());
</script>

article_list_listing_4.html

<!-- List presentation -->

<!-- Header -->
[Component name="article-list-design/article list/atools - new article"]
<div class='articleList'>
<div class='row'>  
<div class='col-md-12'>

<!-- Result design 1 -->
<article>
	<!-- The ahref is the link to the content item being rendered by the menu component, and will get broadcasted to the detail page -->
	<h2><a href='[Placeholder tag="href"]'>[Element context="autofill" type="content" key="Title"]</a></h2>
	[Component  name="article-list-design/article list/atools - article edit" compute="always"]
	<!-- article metadata-->
	<div class="row articleMetadata">                                                       
		<div class="col-sm-12 col-md-12">
			<span class="glyphicon glyphicon-pencil"></span>&nbsp;[Element context="autofill" type="content" key="Author"]                                
		</div>
		<div class=" col-sm-12 col-md-12">
			<span class="glyphicon glyphicon-time"></span>&nbsp;[Property context="autofill" type="content" format="DATE_MEDIUM" field="publishdate"]
		</div>
	</div>  
	
	<!--Title image-->
	<a href='[Placeholder tag="href"]'>
		<img src='[Element context="autofill" type="content" key="Image" format="url"]' class='img-responsive' alt='[Element context="autofill" type="content" key="Image" format="alt"]'>
	</a>

	<br/>

	<!--Lead paragraph-->
	<p class='lead'>[Element context="autofill" type="content" key="Article lead"]</p>
	
	<!-- Link/s -->
	<div class='row articleMetadata'>
		<a href="[Placeholder tag="href"]" class="btn btn-secondary pull-right">Read more</a>
	</div>
	  
</article>      


<!-- Footer -->
</div>
</div>
<!-- Page navigation component -->
[Component name="article-list-design/article list/pagenav - pagination"]

<!-- No result design -->
<div class='articleList'>
	<div class='row'>
		<div class='col-md-12'>
			<div class="alert alert-warning">No articles are available yet.</div>
		</div>
	</div>
</div>     

article_list_listing_5.html

<!-- New Article authoring tools markup -->

<!-- New action design -->
<a class="btn btn-sm btn-secondary" role="button" href="[Placeholder tag="href"]">New Article</a>

<!-- Header -->
<div class="pull-right">

<!-- Footer -->
</div>

article_list_listing_6.html

<!-- Edit article authoring tools markup -->

<!-- Edit action design -->
<a class="btn btn-sm btn-secondary" role="button" href="[Placeholder tag="href"]">Edit</a>

<!-- Delete action design -->
<a class="btn btn-sm btn-secondary" role="button" href="[Placeholder tag="href"]">Delete</a>

<!-- Presentation Options -->
<!-- Header -->
<div class='inlineAuthoring articleMetadata'>

<!-- Footer -->
</div>

article_list_listing_7.html

<!-- Component presentation template renders out a component and css only, with no extra markup -->

[Component name="article-list-design/article list/css - article list"]  
[Element context="current" type="content" key="Component to render"]