Customizing pagination HTML

You can control pagination in Dead Simple Gallery on two levels.

First you can decide which pagination components will be used and their order (e.g. next page & previous page links, numeric page links, first page & last page links, etc). You can also add any wrapping tags or classes that you need. This is done using $dsg_pagination_pattern variable.

Then on the second level you can customize HTML of each pagination component in both normal and disabled states. Disabled state is used when a component is unable to display a link to a certain page — for example if we are using last page component, and we are already on the last page, its link would usually be disabled.

# Main pagination structure

With $dsg_pagination_pattern you can customize which pagination components will be used, their order, and any additional tags that the pagination should be wrapped in.

Default value for $dsg_pagination_pattern:

$dsg_pagination_pattern = '<nav><ul class="pagination">{FIRST_PAGE}{PREV_PAGE}{PAGES}{NEXT_PAGE}{LAST_PAGE}</ul></nav>';

You can use several placeholders in the main pagination pattern that will trigger different "components".

# Example: Simple prev / next pagination buttons

Here's an example of using {PREV_PAGE} & {NEXT_PAGE} placeholders.

Let's imagine we're on the first page of our paginated gallery and set the $dsg_pagination_pattern as shown below:

$dsg_pagination_pattern = '<nav><ul class="pagination">{PREV_PAGE}{NEXT_PAGE}</ul></nav>';

As you can see, link to the previous page generated by {PREV_PAGE} placeholder is disabled. It's because we are on the first page and there is no previous page. Both {PREV_PAGE} and {NEXT_PAGE} detect when they should provide a disabled link.

For controlling HTML outputted by {PREV_PAGE} placeholder we have two variables: $dsg_prev_page_pattern and $dsg_prev_page_disabled_pattern that hold HTML for both normal and disabled versions of the link Previous page link. The same goes for {NEXT_PAGE} placeholder which we can control with $dsg_next_page_pattern and $dsg_next_page_disabled_pattern.

Let's say we simply want to have textual links consisting of angle brackets "<" and ">" for our navigation (without any paragraphs or list tags, simply wrapped in a NAV tag). The following PHP code would provide that:

$dsg_pagination_pattern = '<nav>{PREV_PAGE}{NEXT_PAGE}</nav>';

// let's set up previous link variables, both normal and disabled versions
$dsg_prev_page_pattern = '<a href="{PAGE_URL}">&lt;</a>';

// disabled version will be used if there is no "previous page"
$dsg_prev_page_disabled_pattern = '&lt;';

// and now the same for next link variables normal and disabled
$dsg_next_page_pattern = '<a href="{PAGE_URL}">&gt;</a>';

// disabled version of next page link will be used if there is no "next page"
$dsg_next_page_disabled_pattern = '&gt;';

# Example: Displaying current page number and total pages count

You can show the current page number and total number of pages by using the following example:

$dsg_pagination_pattern = '<nav><span class="page-count">Page {CURRENT_PAGE_NUM} of {TOTAL_PAGES_NUM}</span>
<ul class="pagination">{FIRST_PAGE}{PREV_PAGE}{PAGES}{NEXT_PAGE}{LAST_PAGE}</ul></nav>';

Please note that the above example will require some additional styling of the paragraph with page-count class when you want to show it in same line as pagination links. Something similar to the following:

.page-count {
  float: left;
  width: 150px;
  padding: 5px 10px;

# Pagination components

Below is a list of placeholders for showing different components of pagination navigation. Additionally pagination also supports general placeholders - {SELFCLOSE} and {NEWLINE}.

# {first_page}

This placeholder contains HTML for First Page component, that will print pagination link to the first page. Its content can be controlled through two variables.  $dsg_first_page_pattern:

$dsg_first_page_pattern = '<li class="first"><a href="{PAGE_URL}" title="First page" >First</a></li>{NEWLINE}';

and $dsg_first_page_disabled_pattern (which is used when we are on the first page):

$dsg_first_page_disabled_pattern = '<li class="first disabled"><span>First</span></li>{NEWLINE}';

# {prev_page}

Placeholder containing HTML output of pagination link to the previous page. Its content can be controlled through $dsg_prev_page_pattern :

$dsg_prev_page_pattern = '<li class="prev"><a href="{PAGE_URL}" title="Previous page" >Previous</a></li>{NEWLINE}';

and $dsg_prev_page_disabled_pattern:

$dsg_prev_page_disabled_pattern = '<li class="prev disabled"><span>Previous</span></li>{NEWLINE}';

# {pages}

Placeholder containing HTML output of pagination links for each page (1, …, N). Its contents can be controlled with $dsg_page_pattern and $dsg_current_page_pattern. You can also configure number of items shown before and after currently selected page - see Number of pagination links section.

Can be controlled via $dsg_page_pattern variable:

$dsg_page_pattern = '<li><a href="{PAGE_URL}" title="Page {PAGE_NUMBER}">{PAGE_NUMBER}</a></li>{NEWLINE}';

Link for the currently visible page is controlled via $dsg_current_page_pattern:

$dsg_current_page_pattern = '<li class="active"><span>{PAGE_NUMBER}</span></li>{NEWLINE}';

# {next_page}

Placeholder containing HTML output of pagination link to the next page. Its content can be controlled through $dsg_next_page_pattern:

$dsg_next_page_pattern = '<li class="next"><a href="{PAGE_URL}" title="Next page" >Next</a></li>{NEWLINE}';

and $dsg_next_page_disabled_pattern. (it's used when we are on the last page and there is no next page):

$dsg_next_page_disabled_pattern = '<li class="next disabled"><span>Next</span></li>{NEWLINE}';

# {last_page}

Placeholder containing HTML output of pagination link to the last page. Its content can be controlled through $dsg_last_page_pattern:

$dsg_last_page_pattern = '<li class="last"><a href="{PAGE_URL}" title="Last page">Last</a></li>{NEWLINE}';

and $dsg_last_page_disabled_pattern. (used when we're on the last page):

$dsg_last_page_disabled_pattern = '<li class="last disabled"><span>Last</span></li>{NEWLINE}';

# {current_page_num}

Number indicating current page. For example usage see XXXXXX

# {total_pages_num}

Total number of pages.

See also

General placeholders

# Inner placeholders

Following placeholders work only inside individual pagination components.

# {page_number}

Prints number of the page for the appropriate link. For example when we have 5 pages:

  $dsg_page_pattern = '{PAGE_NUMBER}{NEWLINE}';
<?php include 'dsg.php'; ?>

This placeholder is not available for $dsg_prev_page_disabled_pattern and $dsg_next_page_disabled_patternvariables.

# {page_url}

Relative URL for specified page. It will attach current page number with parameter name specified in the $dsg_pagination_parameter.

When page parameter equals to 'dsg_page' and we set $dsg_page_pattern to contain only the page URL, then for 5 pages it will output:

  $dsg_page_parameter = 'dsg_page';
  $dsg_page_pattern = '{PAGE_URL}{NEWLINE}';
<?php include 'dsg.php'; ?>

The pagination parameter is added to the current query string (or replaced when it already exists), so for example when user goes to the following URL: index.php?page=some_page 
the output URL will look like: index.php?page=some_page&dsg_page=2 

When integrating gallery with another script, make sure that the $dsg_pagination_parameter does not conflict with any other query parameters in your script.

# Spacer customization

The spacer is displayed when there are more pages on the left or right of the current page than specified in Number of pagination links section ($dsg_pagination_num_links variable). By default it will show an ellipsis character.

$dsg_pagination_spacer_pattern = '<li class="spacer disabled"><span>&hellip;</span></li>{NEWLINE}';