CleanBlogg Thema und Bildplatzierung mit der Gallery

Diese Seiten fassen Installierung und  Änderungen zusammen, die André Winter für und am Blog Destination Balades 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 originale 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 im die Bilder, der nicht wegkonfigurier ist.

Die Basis ist WordPress 4.8 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

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 );

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' ),
 ) );
}

Änderungen an der Gallery

Es werden nur zwei Bilder nebeneinander in Betracht gezogen. Derzeit ist das Resultat mit der Bündigkeit rechts noch nicht perfekt. Komischerweise passen sich zu grosse Bilder richtig ein, passgenaue werden abr von der Breite 392px auf 387px geschrupft.

Statt 392+10+392=794 ergibt das 387+15+387+5=794. 

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, darin den Bereich #{$selector} .gallery-item. Hier die Anweisung:

 float: {$float};
 margin-top: 10px;
 text-align: center;
 width: {$itemwidth}%;

gegen diese tauschen, es wird der Abstand von oben nach unten gelegt:

 float: {$float};
 margin-bottom: 10px;
 text-align: center;
 width: {$itemwidth}%;

Gleich darunter folgt dieser Block:

#{$selector} img {
  border: 2px solid #cfcfcf;
}

Dieser ist gehen Folgenden zu tauschen, es wird so der graue Rahmen entfernt und die Bolder rücken auseinander:

#{$selector} dl:first-child img {
  border-right: 5px solid white;
 }
 #{$selector} dl:nth-child(2) img {
  border-left: 5px solid white;
 }

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;
 }

No Comments

Leave a Comment