WordPress Probleme (Teil 2) – Gallerie

WordPress bietet von Haus aus eine gute und praktische Lösung um kleinere Galerien in einem Artikel einzubinden. Ok.. mal abgesehen davon das man nur eine Galerie pro Artikel erfassen kann und WordPress kein gültiges HTML ausgibt und das ganze noch mit Inline-CSS schmückt… ist es ganz ok und hat eine aureichende Funktionalität :)

Was mich jedoch noch fast mehr gestört hat, ist das es zwar sehr einfach ist ein Lightbox Script wie zb. Fancybox einzubauen aber die Galeriebilder nicht mittels einem rel-Tag gruppiert werden können. Eine Gruppierung der Bilder ist jedoch notwenig wenn man dem Besucher ermöglichen möchte mit der Tastatur oder per Maus sich durch die Galerie zu navigieren.

Ich wäre aber kein so grosser WordPress Fan wenn man diese Probleme nicht einfach mit ein paar Zeilen PHP lösen könnte.

Also.. die 2 Probleme die es zu lösen gibt sind folgende:

1. Inline-CSS aus Performance Gründen entfernen
2. rel-Tag für die Gruppierung hinzufügen

Problem 1 – Inline-CSS entfernen

WordPress erstellt für jede eingefügte Galerie einen CSS-Block mit einem Inhalt der aussieht wie dieser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#gallery-1 {
	margin: auto;
}
#gallery-1 .gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 25%;			
}
#gallery-1 img {
	border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
	margin-left: 0;
}

Um diesen CSS-Block zu entfernen kopiere folgenden PHP Code in deine functions.php Datei ein:

1

add_filter('gallery_style', create_function('$a', 'return "<div class=\"gallery\">";'));

Diese Zeile entfernt das Inline-CSS einer eingefügten Galerie und erstellt eine Div mit der CSS Klasse “gallery” rund um die Galerie. Dieser erstelle Div ist nötig damit man die Galerie in Zukunft mit CSS vernünftig stylen kann.

Kopiere nun folgendens CSS in die Stylesheet Datei deines Themes damit jede Galerie gleich aussieht.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#gallery {
	margin: auto;
}
#gallery .gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 25%;			
}
#gallery img {
	border: 2px solid #cfcfcf;
}
#gallery .gallery-caption {
	margin-left: 0;
}

Die 25% Breite treffen nur zu wenn du die Galerie 4-Spaltig anzeigst. Falls du deine Bilder 2-Spaltig anzeigen willst ändere die 25% auf 50% usw.

So.. das erste Problem ist somit gelöst. Easy oder?

Problem 2 – rel-Tag hinzufügen

WordPress generiert für den Link zu einem Bild folgenden Code:

1

<a href='http://blog.robocode.ch/wp-content/media/2010/01/1.jpg' title='bild 1'

Was aber von den meisten Lightbox Scripts erwartet wird um Bilder zu gruppieren ist folgendes:

1

<a rel='group1' href='http://blog.robocode.ch/wp-content/media/2010/01/1.jpg' title='1'

Um diesen rel-Tag automatisch in die Attachementlinks hinzuzufügen musst du folgenden Code in die functions.php Datei kopieren:

add_filter( 'wp_get_attachment_link' , 'add_gallery_rel' );
function add_gallery_rel( $attachment_link ) {
	global $post;
	$attachment_link = str_replace("<a", "<a rel='group".$post->ID."'", $attachment_link);
	return $attachment_link;
}

Dieser PHP Code fügt der Funktion welche den Link zur Datei und das Markup erstellt einen Funktion hinzu welche dem generierten Link einen rel-Tag hinzufügt welcher alle Bilder der Galerie gruppiert für das Lightbox Script.

Bitte beachte das dieser Code für das Fancybox Script gilt. Andere Lightbox Scripts erwarten zb. einen rel-Tag der so aussieht:

1

rel='group[1]'

Um dies zu bewerkstelligen musst du blos diese Zeile:

1

$attachment_link = str_replace("<a", "<a rel='group".$post->ID."'", $attachment_link);

in sowas abändern:

1

$attachment_link = str_replace("<a", "<a rel='group[".$post->ID."]'", $attachment_link);

Wenn du nun alles richtig gemacht hast, sieht deine Galerie so aus wie zb. hier oder hier.

Übrigens: Wenn du wie ich das Fancybox Script verwendest, kannst du dieses Javascript-Schnippsel in deine Datei mit den Javascript Funktionen kopieren damit die “Galerie-Funktion” bei alles Galerien automatisch zur Verfügung steht.

1
2
3

$(document).ready(function() {
	 $("dt.gallery-icon a").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false });
});