Drupal Pager ändern - Views pager ändern

Hier möchte ich einen Weg zeigen wie man den Standart Pager überschreiben kann. Was ich erreichen möchte ist die Pager Pfeile durch eine Grafik zu ersetzen.

Das ganze sieht im Moment so aus: 

Drupal Pager

Und soll am Ende so aussehen:

Drupal angepasster Pager

Zuerst muss man herausfinden wie der Pager erzeugt wird. Alles was irgendwie zu Überschreiben geht findet man unter http://api.drupal.org/api/functions. Dort sucht man sich den entsprechenden Code und kopiert diesen in seine Template Datei (sites/all/themes/myTheme/template.php).

Den entsprechenden Code für unser Vorhaben findet man hier: http://api.drupal.org/api/function/theme_pager

Das alles kopiere man nun in die template.php.

Wichtig ist der Funktion einen neuen Namen zu geben. Konsequenterweise dem des Themes. Also aus folgender Zeile:

function theme_pager($tags = array(), $limit = 10, $element = 0, $parameters = array(), $quantity = 9){/syntaxhighlighter}</p><p>wird:</p> <p>function mytheme_pager($tags = array(), $limit = 10, $element = 0, $parameters = array(), $quantity = 9)</p> <p>Der relevante Teil des Codes für das Ändern des Aussehens vom Pager ist:</p> <p><span style="font-family: monospace;"><em>&nbsp;</em></span></p><p>{syntaxhighlighter brush: php;light: true; fontsize: 100; first-line: 1; }$li_first = theme('pager_first', (isset($tags[0]) ? $tags[0] : t('« first')), $limit, $element, $parameters); 
$li_previous = theme('pager_previous', (isset($tags[1]) ? $tags[1] : t('‹ previous')), $limit, $element, 1, $parameters);
$li_next = theme('pager_next', (isset($tags[3]) ? $tags[3] : t('next ›')), $limit, $element, 1, $parameters);
$li_last = theme('pager_last', (isset($tags[4]) ? $tags[4] : t('last »')), $limit, $element, $parameters);


 

Hier entferne ich nun die "«"  

<cite class="php">"t('« first')</cite>" wird dann zu "t('first')".

Der Rest ist dann einfach noch ein bisschen CSS.

.pager-next a {
background: url(../images/next_arrow.png) no-repeat right center;
padding-right: 18px;
}
.pager-previous a {
background: url(../images/prev_arrow.png) no-repeat left center;
padding-left: 18px;
}
.pager-last a {
background: url(../images/last_arrow.png) no-repeat right center;
padding-right: 28px;
}
.pager-first a {
background: url(../images/first_arrow.png) no-repeat left center;
padding-left: 28px;
}

Will man allerdings den Pager einer View verändern klappt das ganze leider nicht da View einen eigenen Pager verwendet.

Mit folgendem Code in der "template.php" kann aber auch dieser überschrieben werden.

function mytheme_views_mini_pager($tags = array(), $limit = 10, $element = 0, $parameters = array(), $quantity = 9) {
global $pager_page_array, $pager_total;

  // Calculate various markers within this pager piece:
  // Middle is used to "center" pages around the current page.
  $pager_middle = ceil($quantity / 2);
  // current is the page we are currently paged to
  $pager_current = $pager_page_array[$element] + 1;
  // max is the maximum page number
  $pager_max = $pager_total[$element];
  // End of marker calculations.

$li_previous = theme('pager_previous', (isset($tags[1]) ? $tags[1] : t(' ')), $limit, $element, 1, $parameters);
  if (empty($li_previous)) {
    $li_previous = " ";
  }

  $li_next = theme('pager_next', (isset($tags[3]) ? $tags[3] : t(' ')), $limit, $element, 1, $parameters);
  if (empty($li_next)) {
    $li_next = " ";
  }
 
  if ($pager_total[$element] &gt; 1) {
    $items[] = array(
      'class' =&gt; 'pager-previous',
      'data' =&gt; $li_previous,
    );

    $items[] = array(
      'class' =&gt; 'pager-current',
      'data' =&gt; t('@current of @max', array('@current' =&gt; $pager_current, '@max' =&gt; $pager_max)),
    );

    $items[] = array(
      'class' =&gt; 'pager-next',
      'data' =&gt; $li_next,
    );
    return theme('item_list', $items, NULL, 'ul', array('class' =&gt; 'pager'));
  }
}

Add new comment