Galeriefunktion umbauen

Sargas · 16.05.2015

Hi Leute,

brauche mal wieder etwas Hilfe. Eine Wordpress Galerie sieht in HTML-Form etwa so aus:

HTML:

<div id='gallery-1' class='gallery galleryid-376909 gallery-columns-5 gallery-size-thumbnail'>
  <dl class='gallery-item'>
    <dt class='gallery-icon landscape'> <a href='#'><img src="#" class="attachment-thumbnail" alt="" /></a> </dt>
  </dl>
  <dl class='gallery-item'>
    <dt class='gallery-icon landscape'> <a href='#'><img src="#" class="attachment-thumbnail" alt="" /></a> </dt>
  </dl>
...
  <br style="clear: both" />
</div>

Ich brauche jetzt eine zusätzliche Klasse hier:

HTML:

<div id='gallery-1' class='MEINE-EIGENE-KLASSE gallery galleryid-376909 gallery-columns-5 gallery-size-thumbnail'>

Und hier

HTML:

 <dl class='NOCH-EINE-EIGENE-KLASSE gallery-item'>

Hab schon einiges gelesen aber noch keine Lösung gefunden, die passt. Würde das gerne über die functions.php lösen. Jemand eine Idee?

Danke euch und viele Grüße

sargas

Enigmon · 17.05.2015

Hallo,

wenn ich das richtig verstehe, sollen vorher festgelegte Elemente wie div und dl neue CSS-Klassen hinzubekommen.
Und die Funktion dazu soll in der functions.php stehen.
Ich hätte es über einen php Funktionsaufruf innerhalb der Klassenvergabe versucht.
In der Funktion wird dann (nach Prüfung auf Notwendigkeit) über den echo Befehl eine Klasse hinzugeschrieben. Habe es aber nicht getestet.

Ungefähr so:

Code:

<div id='gallery-1' class='<?php test();?> gallery galleryid-376909 gallery-columns-5 gallery-size-thumbnail'>

LG
Thomas

Sargas · 17.05.2015

Enigmon schrieb:
Hallo,

wenn ich das richtig verstehe, sollen vorher festgelegte Elemente wie div und dl neue CSS-Klassen hinzubekommen.
Und die Funktion dazu soll in der functions.php stehen.
Ich hätte es über einen php Funktionsaufruf innerhalb der Klassenvergabe versucht.
In der Funktion wird dann (nach Prüfung auf Notwendigkeit) über den echo Befehl eine Klasse hinzugeschrieben. Habe es aber nicht getestet.

Ungefähr so:

Code:

<div id='gallery-1' class='<?php test();?> gallery galleryid-376909 gallery-columns-5 gallery-size-thumbnail'>

LG
Thomas

Also meine Frage hast du richtig erkannt. Alles Weitere habe ich nicht verstanden...

ABER: Ich habe gerade eine Lösung gefunden und zwar:

Habe ich nach dieser Anleitung hier die Funktion für den gallery_shortcode deaktiviert und durch eine eigene ersetzt. Also im Grunde nur bis zu der Stelle, wo der erste Code drinsteht. Gestern ist es immer daran gescheitert, dass ich nicht genug rüberkopiert hatte, das komplette Ding, das man braucht gibt hier:

https://developer.wordpress.org/reference/functions/gallery_shortcode/

Bin nie auf der Seite gelandet vorher. Ab Zeile 987 könnte man die Tags ändern, Zeile 1082 IDs und Klassen des umschließenden divs und Zeile 1111 die gallery-items.

Werde das jetzt noch etwas weiter umbauen.

Danke trotzdem für die Mühe

Enigmon · 17.05.2015

Mein Vorschlag war eine stark vereinfachte Variante davon.

LG
Thomas

Sargas · 17.05.2015

Enigmon schrieb:
Mein Vorschlag war eine stark vereinfachte Variante davon.

Ja, das hatte ich mir fast schon gedacht

Bin mit PHP nicht so firm, ich kann zwar vieles, was ich sehe, nachvollziehen und abändern, dann hörts aber auch auf.

Stehe jetzt auch schon vor dem nächsten Problem. Ein einzelnes Wordpress-Galerie-Thumbnail ist etwa folgendermaßen eingepackt:

HTML:

<dl class='gallery-item'>
<dt class='gallery-icon portrait'>

<a href='#'><img width="150" height="150" src="#" class="attachment-thumbnail" alt="portrait_06" /></a>

</dt></dl>

Jetzt müsste ich noch eine eigene Klasse ins img Tag bekommen, also zusätzlich zu attachment-thumbnail. In meiner Galerie-Funktion hab ich bisher leider nichts gefunden...

Enigmon · 17.05.2015

Wie ich es vorhin geschreiben habe. Du schreibst deine Funktion in der function.php und inkludierst function.php.
Diese Funktion rufst du dann auf im Html Text auf:

Code:

<a href='#'><img width="150" height="150" src="#" class="attachment-thumbnail <?php klasseEinfuegen();?>" alt="portrait_06" /></a>
</dt></dl>

Funktion in der function.php

Code:

function klasseEinfuegen(){
     // Prüfung ob eingefügt werden muss durch z.B. if else oder switch
     // Wenn ja dann
     echo "derklassenname";[/INDENT]
}

So in etwa..
Es wird leider nicht ausbleiben, dass Du Dich mit PHP auseinandersetzen musst, wenn Du es nutzen möchtest.

LG
Thomas

Sargas · 17.05.2015

Ok, das verstehe ich. Aber wie kriege ich das <?php klasseEinfuegen();?> ins HTML? Wenn ich das <?php klasseEinfuegen();?> automtisch in jedes IMG-Tag kriege kann ich auch gleich die Klasse selbst einfügen lassen oder mache ich da einen Denkfehler?

An und für sich habe ich eine schöne Funktion, die mir die Klasse zu den IMGs packt:

PHP:

function neue-klasse( $html ){
  $classes = 'neue-klasse'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<img.*? class="/', $html) ) {
    $html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
  } else {
    $html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
  }
  // remove dimensions from images,, does not need it!
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;
}
add_filter( 'the_content','neue-klasse',10 );
add_filter( 'post_thumbnail_html', 'neue-klasse', 10 );

Nur leider wirkt sich das nicht auf die Galerie-Thumbnails aus...

Enigmon · 17.05.2015

Nach welchem Kriterium muss Du denn eine neue Klasse einsetzen?
Das sollte in der Funktion geprüft werden.

Ich bin derzeit nicht so firm bei den regulären Ausdrücken, aber Du solltest Dir auch mal die Variable $html anschauen, ob sie richtig nach der Umwandlung ist.

LG
Thomas

Pixelaner · 18.05.2015

Du könntest auch den ursprünglichen Shortcode durch folgenden ersetzen und anpassen:

PHP:

    /* Gallery Shortcode */
    remove_shortcode('gallery');
    add_shortcode('gallery', 'shortcode_gallery');
    function shortcode_gallery($atts){
        extract(shortcode_atts(array(
            'ids' => 'ids',
        ), $atts));
        $ids = explode(',', $ids);
       
        $attachments = get_posts(array(
            'include'   => $ids,
            'post_type' => 'attachment',
            'order'     => 'ASC',
            'orderby'   => 'post__in'
        ));
        $output = '<h2>Galerie</h2><ul class="gallery clearfix">';
        foreach($attachments as $attachment) :
            $output .= '<li><a href="' . wp_get_attachment_url($attachment->ID) . '">' . wp_get_attachment_image($attachment->ID, 'thumbnail') . '</a></li>';
        endforeach;
        $output .= '</ul>';
        return $output;
    }

Sargas · 18.05.2015

Pixelaner schrieb:
Du könntest auch den ursprünglichen Shortcode durch folgenden ersetzen und anpassen

Cool, danke. Das ist deutlich eleganter als meine Lösung. Gleich mal ausgetauscht. Und eine neue Klasse zu den <img>s habe ich auch hinbekommen:

PHP:

 remove_shortcode('gallery');
    add_shortcode('gallery', 'shortcode_gallery');
    function shortcode_gallery($atts){
        extract(shortcode_atts(array(
            'ids' => 'ids',
        ), $atts));
        $ids = explode(',', $ids);
      
        $attachments = get_posts(array(
            'include'   => $ids,
            'post_type' => 'attachment',
            'order'     => 'ASC',
            'orderby'   => 'post__in'
        ));
        $output = '<div class="gallery clearfix">';
        foreach($attachments as $attachment) :
            $output .= '<div class="meine-eigene-klasse"><a href="' . wp_get_attachment_url($attachment->ID) . '">' . wp_get_attachment_image($attachment->ID, 'thumbnail', false, $default_attr = array(
        'class'    => "attachment-$size noch-eine-eigene-klasse",)). '</a></div>';
        endforeach;
        $output .= '</div>';
        return $output;
    }

Einzig das $size wird nicht ausgegeben, steht nur "attachment- noch-eine-eigene-klasse".

Als nächstes werd ich mich mal ausführlich mit PHP befassen.

Danke euch für die Hilfe.

Pixelaner · 18.05.2015

$size ist dort auch nirgendwo definiert...möchtest du individuelle größen mit übergeben? oder was haste da vor

Sargas · 18.05.2015

Pixelaner schrieb:
$size ist dort auch nirgendwo definiert...möchtest du individuelle größen mit übergeben? oder was haste da vor

Nee, ich war grade der Meinung das hätte das anders ausgegeben bevor ich meine Klasse ergänzt habe. War aber ein Irrtum, hab es rausgemüllt.

Pixelaner · 18.05.2015

Oki. Ansonsten alles zu deiner Zufriedenheit oder brauchste noch was ?

Sargas · 18.05.2015

Pixelaner schrieb:
Oki. Ansonsten alles zu deiner Zufriedenheit oder brauchste noch was ?

Vielleicht etwas mehr Verständnis für das ganze Zeug aber daran arbeite ich

Danke nochmal.

Pixelaner · 19.05.2015

Moin,

kommt Zeit kommt Rat

Gerne

Sargas · 19.05.2015

Jetzt musste ich doch mal den Titel abändern, damit ich nicht gleich das nächste Thema aufmachen muss.

Und zwar wollte ich jetzt eine Lightbox einbauen ohne auf ein Plugin zurückgreifen zu müssen. Die hier habe ich eingebaut

Funktioniert auch echt super, nur in der Galerie mal wieder nicht.

Die zwei Bilder oben habe ich testweise in die index.php geschrieben, wenn man die aufmacht und weiterklickt sieht man auch, dass das Skript eigentlich das nächste Bild zeigen will...

Jemand eine Idee?

Update: Konnte das Problem lösen. Da war ein Leerzeichen im <a>, das dem Skript nicht gepasst hat... :confused:

Sargas · 21.06.2015

Hallo nochmal,

jetzt muss ich das Thema doch nochmal ausgraben. Das Lightbox-Script gibt als Bildunterschrift den Inhalt des "title" im <a> Tag aus. Da würde ich jetzt gerne automatisch den Alternativ-Text oder die Bildunterschrift ausgeben lassen.

Leider weiß ich gar nicht so recht wo ich da im Codex anfangen soll zu suchen. Jemand einen Tipp?

Enigmon · 21.06.2015

Jetzt verstehe ich das Problem nicht. Warum schreibst du deinen Alternativtext nicht in das title-Attribut?

Gruß
Thomas

Sargas · 21.06.2015

Wenn ich den da fix reinschreibe steht ja unter jedem Bild das Gleiche.

Enigmon · 21.06.2015

Es müsste in etwa so bei dir in den HTML-Code eingefügt werden:
(laut der )

HTML:

<!-- Hier ist das erste Bild -->
<a href="image_large.jpg" title="This is an image title">
      <img src="image_thumb.jpg" alt="" />
</a>
<!-- Hier ist das zweite Bild -->
<a href="image2_large.jpg" title="This is an image title">
      <img src="image2_thumb.jpg" alt="" />
</a>
            <!-- usw. -->

und da hat doch jedes Bild seinen eigenen Titel...