Testfoto im Format 800 x 600px

NextGen –Einzelbilddarstellung mit Bildunterschrift per Template

NACHTRAG:

Ab NextGen Version 2.0 funzt die Lösung nicht mehr. Siehe NextGen2 -Einzelbild einfügen


Einzelne Bilder werden bei Verwendung des Plugins per folgendem Code in dem Text eingebunden:

[ singlepic id=155 w=320 h=240 float=left ]

Dabei wird mit den Parametern id, w, h und float das Format und die Positionierung festgelegt. Leider ist als Standard keine Darstellung des Einzelbildes zusammen mit der Bildbeschreibung möglich.

NextGen unterstützt aber zusätzlich die Template Funktion, welche auch für die geforderte Aufgabe die passende Lösung ist.

Beispielbild:

Ab NextGen Version 2.0 funzt die Lösung nicht mehr:

Testfoto im Format 800 x 600px
Testfoto im Format 800 x 600px

Was ist zu tun?

1. Im Pfad des Themes muss der Ordner nggalery angelegt werden

2. In diesen Ordner werden die Templates abgelegt. Der Vorteil dabei ist, dass bei einem update von NextGen diese Dateien nicht überschrieben werden

3. Für unsere Anwendung der Einzelbilddarstellung muss nun die Datei singlepic-caption.php angelegt werden. Wichtig dabei ist, dass der Name der Funktion in unserem Beispiel singlepic per Bindestrich mit dem Namen des Template verbunden ist.

4. Der Code für diese php Datei kann beliebig angepasst werden. Für das Beispiel Einzelbild mit Bildbeschreibung verwende ich folgenden Code:

ERGÄNZUNG vom 28.8.2011

Damit auch Bilder im Hoch- und Querformat richtig dargestellt werden, muss das Seitenverhältnis des Originalbild ausgewertet werden. Der dazu notwendige Code:

<?php
$absurl = ABSPATH.$image->path."/".$image->filename;
list($width, $height, $type, $attr) = getimagesize("$absurl");
$breite1 =  $image->width;
$breite2 =  round($image->height*$width/$height, 0);
if ($breite1<$breite2) {
$breite = $image->width;
}else {
$breite = $breite2;
}
?>

ÄNDERUNG: Die so ermittelte Breite ist nun in den Code (Zeile 2) einzusetzten, dazu wurde $image->width +10 durch $breite +10 ersetzt.

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>
<div class="<?php echo $image->classname ?>" style="width:<?php echo $breite +10 /* Anpassung an Bildbreite plus img padding:5px */?>px">
     <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->linktitle ?>" <?php echo $image->thumbcode ?> >
	    <img  src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" title="<?php echo $image->alttext ?>" />
     </a>
     <p class="wp-caption-text"><?php if (!empty ($image->description)) : ?><?php echo $image->description ?><?php endif; ?>
     </p>
<?php endif; ?>
</div>

5. Nun kann das Bild per folgendem ShortCode aufgerufen werden

[ singlepic id=155 w=320 h=240 float=left template=caption ]

6. Um die Darstellung mit Rahmen und Text richtig zu Formatieren ist es noch Notwendig im Stylesheet die Klassen zu definieren. Dazu hier meine verwendeten css Ergänzungen für den Text der Beschreibung:

p.wp-caption-text {
   font-style: italic;
   font-size: 0.9em;
   line-height: 17px;
   padding: 0 5px;
   margin: 0 0 5px 0;
   text-align: center;
   }

und das Einzelbild

.ngg-singlepic {
   border: 1px solid #ddd;
   background-color: #f3f3f3;
   margin: 5px;
   }

und img mit padding versehen

.img {
    padding: 5px ;
    }

ACHTUNG: Blank im ShortCode entfernen

8 Gedanken zu „NextGen –Einzelbilddarstellung mit Bildunterschrift per Template“

  1. Hallo,
    tolle Anleitung! Funktioniert bei mir so weit auch ganz gut. Ich habe eine Frage zu 6.) Welche Stylesheet-Datei muß ich bearbeiten? Ich würde gerne die Größe des Textes anpassen.
    Danke Sascha

    1. Das Style Sheet nggallery.css von NextGen, liegt im Pfad unter css.
      Ich habe dies kopiert und in mein Themes verlagert. Dort Link von style.css des Themes zu diesem NextGen Style
      @import „name_deines_styles.css“;Nun noch in NextGen Optionen Style Sheet deaktivieren.
      Vorteil ist, dass nicht bei jedem Update das css geändert werden muss

  2. Danke für die tolle Anleitung. Funktioniert soweit sehr gut. Bei Punkt 6 ist mir nur

    „und img mit padding versehen

    .img {
    padding: 5px ;
    }“

    nicht klar. Wo mache ich das?

    2.Problem derzeit ist noch, dass im singlepic der rechte Rand neben dem Bild größer ist als der linke. Wie kann das noch korrigiert werden?

    Danke für eine kurze Hilfe!

      1. Hallo,

        .img ist definitiv nicht in der Style.css bzw. ist so benannt, dass ich es als mittlerer Anfänger nicht als das identifiziere. Konnte das zweite Problem aber umständlich lösen, indem ich im .ngg-singlepic padding mit unterschiedlichen Maßen eingefügt habe. Jetzt passt es. Ursache also nicht behoben, aber Mittel dagegen gefunden und der User merkt nichts.

        Theme ist übrigens Twenty Eleven.

        Gruß, Doreen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*