Diese Seiten fassen Installierung und Änderungen zusammen, die André Winter für und am Blog Destination Balades und diesen hier mit dem Thema CleanBlogg vorgenommen hat. Im Gegensatz zur aufwändigen Lösung zwei oder drei Bilder nebeneinander zu platzieren, die sich auf schmalen Bildschirmen untereinander schlichten (siehe CleanBlogg Thema und Adaptierungen für Bildplatzierung), wird hier ursprüngliche Gallery beibehalten aber leicht modifiziert.
Die mitgelieferte Galerie hat zwei Hauptprobleme:
- Im Quellcode ist sie extrem mühsam, viel ist unter
/wp-includes/media.phphart im php-Code. So schreibt dieser für jeden Gallery-Block einen eigenen Stylesheet-Block mitten im HTML-Teil heraus. Einige andere Angaben befinden sich unter/wp-content/themes/[thema]/styles.css. - Auch das optisches Erscheinungsbild ist ungut: links und rechts eingerückt, keine regelmässigen Abstände nach oben und unten, sowie ein grauer Rahmen um die Bilder, der nicht wegkonfigurierbar ist. Zudem gibt es keine passenden Bildformate für die verschiedenen Gallery-Arten.
Versionen
- WordPress jedenfalls 4.7 und/bis 6.4.1
- CleanBlogg jedenfalls 1.2.6 und/bis 1.6.6
Neue Bildgrössen ohne Plugin
Ich brauche folgende zusätzliche Formate:
db-large, 794x0px, als breite Bilder im Text, mit Wasserzeichendb-deux, 392x0px, für zwei Bilder nebeneinander im Text, mit Wasserzeichendb-trois, 258x0px, für drei Bilder nebeneinander im Text, mit Wasserzeichen
Unter WordPress 4.7 hatte ich das Plugin Custom Image Sizes 1.1.2 im Einsatz, aber die Version 1.2 des Plugins läuft nicht unter WordPress 4.8. Man kann aber auch im Code eingreifen und das selbe Ziel erreichen. Man verwendet dazu WordPress-eigene Anweisungen, die man überall einsetzen könnte, ich betrachte sie aber als dem Thema zugehörig, daher füge ich den Code hier ein (kann man auch unter Design/Editor direkt ergänzen) /wp-content/themes/cleanblogg/functions.php
Man fügt die Bildforme hinzu, dadurch werden die Bilder grundsätzlich generiert:
add_image_size( 'db-large',794, 0, false ); add_image_size( 'db-deux',392, 0, false ); add_image_size( 'db-trois',258, 0, false );
Damit sie auch von der Mediathek aus zugänglich sind, muss man noch einen lesbaren Namen definieren:
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'db-large' => __( 'DB Toute la largeur' ),
'db-deux' => __( 'DB Deux côte à côte' ),
'db-trois' => __( 'DB Trois côte à côte' ),
) );
}
Änderungen an der Gallery
Mit der unten vorgeschlagenen Lösung werden die Bilder sauber ausgerichtet.
Als offenes Problem bleibt die html5-Kompatibilität, die hier nicht berücksichtigt wird.
Standardwerte setzen
Das geht unter /wp-includes/media.php, ist aber noch nicht astrein, weil der Wert zum Link nicht immer übernommen wird (der Link geht vom Bild in der Galerie auf die Bildvorschau-Seite). Der Block wird ganz unten in die Datei geschrieben:
function theme_gallery_defaults( $settings ) {
$settings['galleryDefaults']['columns'] = 2;
$settings['galleryDefaults']['size'] = 'db-deux';
$settings['galleryDefaults']['link'] = 'none';
return $settings;
}
add_filter( 'media_view_settings', 'theme_gallery_defaults' );
Bilder seitenbündig und Abstände anpassen
Der Hauptteil ist hart in /wp-includes/media.php geschrieben und dort zu ändern. In der Funktion function gallery_shortcode() nach cfcfcf (Farbcode hellgrau) suchen. In diesem Code-Bereich die ganze if-Anweisung löschen:
if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) { [...] }
Darunter in der foreach-Schleife folgenden Block löschen:
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon {$orientation}'>
$image_output
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption' id='$selector-$id'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
und gegen diesen Block tauschen:
$captiontag = "p";
$capt = "";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$capt .= "
<{$captiontag} class='wp-caption-text' id='$selector-$id'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "<div class='gallery".$columns."div$i $orientation'>$image_output$capt</div>";
Man muss auch in die Datei /wp-content/themes/cleanblogg/styles.css gehen und hier dies:
.gallery dl.gallery-item dt{ margin: 10px; }
zu folgendem abändern, damit die Bilder wirklich bündig mit dem sonstigen Inhalt der Seite abschliessen:
.gallery dl.gallery-item dt{ margin: 0px; }
Ganz unten folgt diese weitere Ergänzung. Es wird zuerst die Gallery auf die Maximalbreite eingeschränkt. Bei gewissen Bildschirmbreiten rutschen die Gallery nämlich unverständlicherweise nach rechts während Fliesstext hübsch links bleibt. Die fette Schrift der Bildbeschreibung wird normalisiert.
Darunter wird die Ausrichtung der Bilder in den 2er- und 3-er-Galerien geregelt. Die Breite wird als Hälfte oder Drittel abzüglich der anteiligen Abstände zwischen den Bildern in Pixel fixiert. Dadurch bleibt bei Skalierung der Seite der Abstand gleich während die Bilder schrumpfen können. Unten werden für die jeweiligen Bilder rechts 10 Pixel Abstand hinzugefügt.
/*GALLERY MODIFICATION*/ .gallery { max-width: 794px; /* GALLERY: AVOID OVERSIZE AT SOMME SMALLER SCREENS WITHOUT SIDEBAR */ margin-bottom: 10px; } p.wp-caption-text{ /* IMAGE CAPTION CORRECTION */ font-weight: normal !important; text-align: left !important; } .gallery2div0, .gallery2div1{ /* GALLERY 2 COL */ width: calc(50% - 5px); float: left; } .gallery3div0, .gallery3div1, .gallery3div2{ /* GALLERY 3 COL */ width: calc(100% / 3 - 6.666666666px); float: left; } .gallery2div0, .gallery3div0, .gallery3div1{ /* GALLERY ALL CELLS EXECPT RIGHT ONE */ margin-right: 10px; } .gallery2div1, .gallery3div2{ /* GALLERY RIGHT CELL WITHOUT MARGIN */ margin: 0px; }
Fehlende icons von Font-Awsome im Header nach updates
Manchmal, aber nicht immer fehlen die Icons (Mail, Facebook etc.) in der schwarzen Leiste oben. Da hilft auch bei der Version 1.6.6 nur das einfügen in der Datei functions. php rund um die Zeile 70:
wp_enqueue_style( 'Font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); /*Font-awesome*/
Seite des Codex Regius der Alten Edda
No Comments