Created
February 27, 2019 09:53
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">«</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">»</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