CleanBlogg Thema und Bildplatzierung mit der Gallery

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.php hart 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 wegkonfigurier ist. Zudem gibt es keine passenden Bildformate für die verschiedenen Gallery-Arten.

Die Basis ist WordPress 4.8.3 und das Layout CleanBlogg 1.4.8.

Neue Bildgrössen ohne Plugin

Ich brauche folgende zusätzliche Formate:

  • db-large, 794x0px, als breite Bilder im Text, mit Wasserzeichen
  • db-deux, 392x0px, für zwei Bilder nebeneinander im Text, mit Wasserzeichen
  • db-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 Bildvorschauseite). 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;
}

Seite des Codex Regius der Alten Edda

Seite des Codex Regius der Alten Edda

No Comments

Leave a Comment