Drupal CMS: Pager anpassen für schmalen Textbody

Teaser: Wenn Sie den Pager vom Drupal CMS benutzen, werden Sie feststellen, daß er bei einem schmalen Bodytext oft zu breit dargestellt wird. Wir verraten Ihnen in diesem Artikel einige Tricks (incl. Code-Beispiele), wie Sie den Pager in Drupal individuell gestalten können.

Drupal 5.x

Für deutsche Seiten mit schmalem Contentbereich ist der Drupal-default-pager oft zu breit. Er wird dann zweizeilig, wie Sie in dem folgenden Bild sehen können.

Im englischen stehen im pager nur die Worte:

« first ‹ previous ...  8  9  10  11  12  13  14  15  16 ... next › last »

Das ist erheblich kürzer und somit für so gut wie jede Contentbreite geeignet. Im Folgenden zeige ich Ihnen drei Möglichkeiten, wie Sie den pager verschmälern können. Je nach Bedarf können Sie eine der drei Möglichkeiten wählen oder alle drei kombinieren.

Kürzere Wörter verwenden

Das Wort 'Seite' muß nicht überall stehen. Zweimal genügt auch:

« erste ‹ vorherige Seite ...  8  9  10  11  12  13  14  15  16 ... nächste › letzte Seite »

Sie können diese Zeichen in Drupal auf folgender Seite ändern, indem Sie nach den übersetzten Wörtern suchen.

http://www.example.com/admin/settings/locale/string/search

Alternativ können Sie eine .po-Datei -> hier herunterladen und nach dem Entpacken über

http://www.example.com/admin/settings/locale/language/import

importieren. Lassen Sie die Einstellung "Zeichenketten in der hochgeladenen Datei ersetzen bereits Vorhandene; Neue werden hinzugefügt." ausgewählt, dann werden die vorhandenen Zeichenketten überschrieben und Sie erhalten die oben aufgeführten Wörter im pager.

Sie können sich auch die .po-Datei herunterladen und selbst nach belieben ändern. Achten Sie dabei darauf, daß Sie ein Programm verwenden, das die Zeichenkodierung automatisch erkennt, denn die kleinen Pfeile sind mit UTF-8 kodiert (Notepad++ tut dies bspw.)

Der pager von Drupal ist so programmiert, daß er überschrieben werden kann. In der Datei includes/pager.inc wird der pager in der Funktion theme_pager() erzeugt. Für folgendes müssen Sie die Template Engine PHPTemplate verwenden.

In Ihre template.php fügen Sie die folgende Funktion ein. Achten Sie bitte auch hier darauf, daß Sie ein Programm verwenden, das eine Zeichenkodierung automatisch erkennt (wie bspw. Notepad++). Die kleinen Pfeile sind kodiert und bei falscher Kodierung erhalten Sie dann so seltsame Zeichen wie oder.

Die Funktion ist mit Zeilenumbrüchen dargestellt. Lesbarer und ohne Zeilenumbrüche ist die Funktion -> hier dargestellt. Sie ist mit UTF-8 kodiert. Im Browser werden Sie deshalb wahrscheinlich UTF-8-Zeichen sehen. Diese Zeichen werden in einer UTF-8-kodierten Datei wieder lesbar.

Falls Sie keine template.php haben, können Sie diese Seite als Vorlage verwenden und als template.php abspeichern. Ansonsten kopieren Sie sich bitte den Code aus der Textdatei.

<?php
/**
* custom pager
**/

function template_pager($tags = array(), $limit = 10, $element = 0,
$parameters = array()) {
  global $pager_total;
  $output = '';
  if ($pager_total[$element] > 1) {
    $output .= '<div class="pager">';
    $output .= theme('pager_first', ($tags[0] ? $tags[0] : t('« first')),
$limit, $element, $parameters);
    $output .= theme('pager_previous', ($tags[1] ? $tags[1] :
t('‹ previous')), $limit, $element, 1, $parameters);
    $output .= theme('pager_list', $limit, $element, ($tags[2] ? $tags[2]
: 5 ), '', $parameters);
    $output .= theme('pager_next', ($tags[3] ? $tags[3] : t('next ›')),
$limit, $element, 1, $parameters);
    $output .= theme('pager_last', ($tags[4] ? $tags[4] : t('last »')),
$limit, $element, $parameters);
    $output .= '</div>';
    return $output;
  }
}

'<?php' übernehmen Sie nur, wenn Sie die Datei neu anlegen. In einer vorhandenen Datei steht dies bereits am Anfang der Datei. (Ein abschließendes '?>' wird in diese Datei nicht eingefügt.)

Für das Wort 'template' in template_pager tragen Sie den Namen ihres Templates ein. Über die Zahl 5 legen Sie die Anzahl der angezeigten Links als Zahlen fest.

Der pager sieht jetzt so aus:

« erste ‹ vorherige Seite ...  10  11  12  13  14  ... nächste › letzte Seite »

CSS verändern

Ist der pager jetzt immer noch ein paar Millimeter zu breit, dann können Sie dies über das CSS ändern. In der von Drupal mitgelieferten system.css-Datei sind Angaben zum pager wie folgt enthalten:

.pager a, .pager strong.pager-current {
  padding: 0.5em;
}

Wenn Sie den horizontalen Abstand ein klein wenig verringern, dann wird der pager noch einmal ca. 1cm schmaler. Hierfür fügen Sie folgendes CSS in Ihre CSS-Datei ein:

.pager a, .pager strong.pager-current {
  padding: 0.5em 0.4em;
}

Der pager sieht danach so aus:

Live können Sie das Ergebnis hier sehen: Gärtner Schobners Gartentipps - News

Alle drei Möglichkeiten wurden auf der Gartenseite angewendet.

Viel Spaß beim individuellen Gestalten des Drupal Pagers!

25.04.2014 © seit 01.2008 Petra Sütterlin  

Gesamtstatistik der Bewertungen

  4.0 Gesamtbewertung

  4.0 Thema
  4.0 Information
  4.0 Verständlichkeit

Stimmen: 1

Legende

5 Sterne: super!
4 Sterne: gut gelungen!
3 Sterne: O.K.
2 Sterne: geht so
1 Stern: erträglich

diesen Ratgeber: Bewerten

Kommentare

Keine Kommentare vorhanden.


NACH OBEN