Skip to content

Instantly share code, notes, and snippets.

@PaulGwamanda
Created February 27, 2019 09:53
Show Gist options
  • Save PaulGwamanda/fdb5a6e8b59deb3930007a21d671a2d8 to your computer and use it in GitHub Desktop.
Save PaulGwamanda/fdb5a6e8b59deb3930007a21d671a2d8 to your computer and use it in GitHub Desktop.
This is an Umbraco 7 pagination script for blog posts/articles, uses bootstrap to paginate at the bottom of articles
<div class="articles-list mb-5">
<div class="row">
@{
int pageSize = 2; // How many items per page
int page; // The page we are viewing
/* Set up parameters */
if (!int.TryParse(Request.QueryString["page"], out page))
{
page = 1;
}
/* This is your basic query to select the nodes you want */
int totalNodes = selection.Count();
int totalPages = (int)Math.Ceiling((double)totalNodes / (double)pageSize);
/* Bounds checking */
if (page > totalPages)
{
page = totalPages;
}
else if (page < 1)
{
page = 1;
}
}
@foreach (var item in selection.Skip((page - 1) * pageSize).Take(pageSize))
{
i++;
k++;
string imageUrl = item.GetPropertyValue<IPublishedContent>("articleImage").Url;
IPublishedContent author = item.GetPropertyValue<IPublishedContent>("author");
ArchetypeModel video = item.GetPropertyValue<ArchetypeModel>("video");
var date = item.GetPropertyValue<DateTime>("publishDate");
{
<div class="col-lg-3 col-md-4 col-sm-6 wow fadeIn">
<div class="caption-container mb-4">
<a href="@item.Url">
<div class="caption"
style="background: url(@imageUrl) no-repeat left top / cover;">
@{
foreach (ArchetypeFieldsetModel fieldset in video)
{
if (fieldset.GetValue("webM") != null |
fieldset.GetValue("mp4") != null |
fieldset.GetValue("videoPoster") != null)
{
<div class="">
<img src="~/images/elements/icon-video.png" alt="Play icon" class="icon-video">
</div>
}
}
}
<div class="caption-info"></div>
</div>
</a>
<div class="caption-info">
<p class="title">
<a href="@item.Url" class="">@item.Name</a>
</p>
<p class="description">
@item.GetPropertyValue("articleIntro")
<a href="@item.Url"> Read more</a>
</p>
<p class="post-info">
@{
if (author != null)
{
@date.ToString("MM.yyyy") @:| @author.Name
}
else
{
@date.ToString("MM.yyyy") @:| Staff Writer
}
}
</p>
</div>
</div>
</div>
}
}
</div>
@{
if (totalPages > 1)
{
<!-- Pagination -->
<nav aria-label="Bottom page navigation">
<ul class="pagination justify-content-center">
@if (page > 1)
{
<li class="page-item">
<a class="page-link" href="?page=@(page-1)" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
}
@for (int p = 1; p < totalPages + 1; p++)
{
<li class="page-item @(p == page ? "active" : string.Empty)">
<a class="page-link" href="?page=@p">@p</a>
</li>
}
@if (page < totalPages)
{
<li class="page-item">
<a class="page-link" href="?page=@(page+1)" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
}
</ul>
</nav>
}
}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment