[de-de] Slimbox in Textpattern integrieren

Wanderer · 2009-02-06 14:03:51

Hallo,

nach einigen erfolglosen Versuchen mit dieser Beschreibung muss ich nun doch die älteren TXP-Semester um Hilfe bitte. :-)

Erster Schritt also: Bilder in Textpattern laden und mit vernünftigen Thumbnails, Bildunterschriften und Alternativtexten ergänzen.

Ich lade also von jedem Motiv ein kleines und ein großes Bild hoch?

Zweitens: Einen Artikel verfassen und die gerade hochgeladenen Bilder alle in einer komma-getrennten Liste als Artikelbilder eingeben. upm_img_popper hilft dabei sehr.

Wie komme ich zu dieser kommagetrennten Liste der Artikelbilder? Wie sieht die aus?

upm_img_popper (brauche ich das unbedingt?) fügt mir solche TXP-Tags in den Artikel ein:

<txp:upm_image type="image" image_id="8" class="slimbox_image" />
<txp:upm_image type="image" image_id="4" class="slimbox_image" /> 
<txp:upm_image type="image" image_id="6" class="slimbox_image" />

Die Bilder (klein) werden innerhalb eines <p></p> angezeigt, <txp:upm_article_image wraptag="ul" break="li" form="bild" class="gallery" /> bringt gar nichts, auch nicht im Quelltext. Ich hätte nämlich erwartet, dass die Vorschaubilder in einer Liste ausgegeben werden. Ist aber nicht so.

Den Baustein bild habe ich erstellt.

Die (beliebig wählbare) Kennung in den eckigen Klammern gruppiert alle Bilder zu dem Set, in dem der Betrachter mit Lightbox blättern kann.

Wo habe ich diese eckigen Klammern?

In meinem Fall sind alle Bilder eines Artikel natürlich in einem einzigen Set, eben [dings].

Was ist [dings] und wo finde ich es?

Für Artikellisten braucht man eine eindeutige Gruppierung pro Artikel, hier bietet sich die Artikel-ID an: <a rel=“lightbox[<txp:article_id />]”…

Wo und wie trage ich die Artikel-ID ein?

Die Javascript-Dateien und das Stylesheet kommen auf den Webserver und werden ganz herkömmlich in die Seitenvorlage eingebunden (aber das ist Geschmackssache, genau so gut kann das Stylesheet auch von Textpattern verwaltet werden).

In welches Verzeichnis? Kann ich die Pfade beliebig anpassen? … Ihr seht, ich stehe auf dem Schlauch. Vermutlich fehlen mir nur kleine Informationen, die jeder weiß, nur ich nicht. :-)

Das Plugin selbst funktioniert. Wenn ich den Link <a href="http://localhost/mytxp/images/7.jpg" rel="lightbox" title="Beautiful, isn't it?">Click here</a> anklicke, wird das Testbild geladen. Nur das Erstellen einer eigenen Liste will mir nicht gelingen, weil ich nicht weiß, was ich wie schreiben muss. Die vielen Fundstellen der Suche hier im Forum helfen mir wegen mangelnder Englischkenntnisse leider nicht weiter.

Vielen Dank.

Ein Wanderer zwischen den Welten

jakob · 2009-02-06 14:54:31

Ich habe slimbox mit Hilfe eine andere Plugin realisiert – mehr dazu unten, aber erst gehe ich auf deine Fragen ein:

Ich lade also von jedem Motiv ein kleines und ein großes Bild hoch?

Ja, Du musst deine Bilder erst in der “Bilder” Tab hochladen. Die Vorschaubilder/Thumbnails kannst Du in der Tab automatisch erzeugen lassen oder auch getrennt hochladen, wenn Du besondere Vorschaubilder eigens dafür vorbereitet hast.

Wie komme ich zu dieser kommagetrennten Liste der Artikelbilder? Wie sieht die aus? upm_img_popper (brauche ich das unbedingt?)

Wenn Du eine Galerie pro Artikel erzeugen möchtest, dann notierst Du dich die Bild-ID-Nummern in der “Bilder”-Tag, die in ein Artikel angezeigt werden sollen. Dann wechselt Du zu dein Artikel. In der “Verfassen”-Tab gibt es ein Feld “Artikelbild”. Hier gibst Du die Liste der Bild-ID-Nummern ein, getrennt durch Kommata, also bspw. 15,12,18,8 o.ä.. Du brauchst upm_image_popper dazu nicht.

Wo habe ich diese eckigen Klammern? Was ist [dings] und wo finde ich es?

Die [Gruppenname] in eckige Klammern (die findest Du auf dein Tastatur ;-) wird bei Lightbox verwendet um Bilder die zusammengeöhren sollen kennzuzeichnen, so dass man mit “vorherige” und “nächtes” von Bild zu Bild mit Lightbox wechseln kann ohne zu der Bildübersicht zurückkehren zu müssen (man kann dies wie eine Art Albumname vorstellen). Du kannst deine Gruppenname nennen wie Du möchtest (in wets Beispiel nennt er es deshalb “dings” stellvertretend für eine beliebige Name).

Wo und wie trage ich die Artikel-ID ein?

Jeder Gruppe muss natürlich eine eigene Name erhalten weshalb wet vorschlägt der Article-ID zu nehmen (an Stelle von “dings”). Der Tag wie wet es angibt bindet der jeweils aktive Artikelnummer ein. Wenn Du deine Bilder nicht pro Artikel sonder in Kategorien organisiert, kannst Du hier bspw. der Kategoriename verwendet werden.

In welches Verzeichnis? Kann ich die Pfade beliebig anpassen?

Für Lightbox oder Slimbox brauchst Du lightbox.js oder jquery.js und slimbox.js in der HEAD-Bereich deine Page-Template einbinden, ebenso die dazugehörige css-Dateien. Das kannst Du wie Du das immer machst in dein Page-Template anbinden. Ich habe das bspw. so:


<script src="<txp:site_url />js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="<txp:site_url />js/slimbox2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<txp:site_url />css/slimbox2.css" media="screen" />

und habe mein js Dateien in der Ordner /js und css-Dateien in der Ordner /css. Möglicherweise hast Du dies schon richtig gemacht, wenn dein Test funktioniert hat.

jakob · 2009-02-06 15:24:57

Es gibt mehrere plugins mit dem Du dies direkt machen kannst, bspw. smd_limbox oder auch der alles-könner smd_gallery.

Ich habe immer nur smd_gallery verwendet, also beschreibe ich das. Auch meine Nutzungsszenario ist leicht anders. Ich habe mir für ein Presse-Bereich ein Bild-Kategorie “Press” eingerichtet (als Bildkategorie in der Kategorien-tab) und dann einige Unterkategorien für die verschiedene ‘Bilder-alben’ eingerichtet, bspw. die Event-namen (in der Kategorien-Tab als Bildkategorie, dann bearbeiten und dann “Press” als Elternelement zugewiesen).

In der HEAD-Bereich der Seitenvorlage, habe ich wie oben die js- und css-Dateien eingebunden:

<script src="<txp:site_url />js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="<txp:site_url />js/slimbox2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<txp:site_url />css/slimbox2.css" media="screen" />

Dann an der Stelle wo die Galerie erzeugt werden soll habe ich folgende Tag verwendet.

<txp:smd_gallery
     category="press" sublevel="all"
     form="galerie"
     wraptag="ul" break="li"
     onchange="category_title"
     onchangewraptag="h3"
     sort="category desc" />

und in der Form namens galerie (type = misc) habe ich:

{onchange:category_title}

<a rel="lightbox-{category}" href="{url}" alt="{alt}"
     title="{title}" height="{height}"
     width="{width}">
 <txp:thumbnail id="{id}" />
</a>

Das Ergebnis ist eine Reihe Bildergalerien jeweils mit ein h3-Überschrift mit der Galerie-Titel.

– - – - –

Wenn Du statt Kategorien, die Artikelbilder verwenden willst, verwende id="?article_image" anstatt Kategorien. Da nur ein Galerie gezeigt wird, kannst Du auch auf die “onchange” verzichten, die ja nur zutrifft wenn eine Galerie wechselt:

<txp:smd_gallery
     id="?article_image"
     form="artikelbild_galerie"
     wraptag="ul" break="li"
     />

und in der Form namens artikeldbild_galerie (type = misc) habe ich:

<a rel="lightbox-{category}" href="{url}" alt="{alt}"
     title="{title}" height="{height}"
     width="{width}">
 <txp:thumbnail id="{id}" />
</a>

Last edited by jakob (2009-02-06 15:27:43)

Wanderer · 2009-02-06 20:32:02

Herzlichen Dank für deine überaus detaillierten Erklärungen. Nun sind meinerseits doch einige Missverständnisse, z.B. bezüglich des Begriffes „Liste“ oder „Thumbnail“, ausgeräumt. Die Vorschaubilder wie auch die Vergrößerungen werden nun angezeigt. Was noch fehlt, ist die Möglichkeit, zwischen den einzelnen Bildern zu blättern. In dem Zusammenhang ist mir eines immer noch nicht klar:

jakob schrieb:

Du kannst deine Gruppenname nennen wie Du möchtest (in wets Beispiel nennt er es deshalb “dings” stellvertretend für eine beliebige Name).

Und wo trage ich diesen Gruppennamen oder auch die Artikel-Id ein?

PS: Deine zweite Beschreibung gefällt mir auch und ich werde sie bei Gelegenheit mal ausprobieren.

jakob · 2009-02-06 21:26:58

Auf Christoph Beyl’s Seite zu Slimbox2 schreibt er, dass eckige Klammern nicht mehr notwendig sind:

I don’t recommend using square brackets “[ ]” around group names in the rel attribute like the original Lightbox script does because these characters are invalid for XHTML and XML attributes, meaning that your web page would not validate against the latest standards.

Du kannst also ganz einfach ein Bindestrich hinter lightbox verwenden und dein Artikel-ID einbinden, d.h. in dein form (Bild hast du es in dein Beispiel genannt) der die Links erzeugt musst Du rel="lightbox-<txp:article_id />" einbauen an statt nur lightbox. Wenn dein Beispiel entspricht der von wets Artikel, dann wäre das wie folgt:

<a rel="lightbox-<txp:article_id />" href="<txp:upm_img_full_url />"
 title="<txp:upm_img_alt escape="html" />">
<img src="<txp:upm_img_thumb_url />"
  width="<txp:upm_img_thumb_width />" 
  height="<txp:upm_img_thumb_height />"
  alt="<txp:upm_img_alt escape="html" />" />
</a>

Das ergibt eine Reihe Links in der Art:

<a rel="lightbox-45" href="http://localhost/mytxp/images/7.jpg" title="Schön, nicht wahr"><img src="http://localhost/mytxp/images/7t.jpg" width="100" height="100" alt="Schön, nicht wahr" /></a>
<a rel="lightbox-45" href="http://localhost/mytxp/images/8.jpg" title="Noch schöner"><img src="http://localhost/mytxp/images/8t.jpg" width="100" height="100" alt="Noch schöner" /></a>
<a rel="lightbox-45" href="http://localhost/mytxp/images/9.jpg" title="Am schönsten"><img src="http://localhost/mytxp/images/9t.jpg" width="100" height="100" alt="Am schönsten" /></a>

Du musst natürlich mehr als ein Bild-ID in dein Feld “Artikelbild” eingetragen haben, damit sie miteinander verlinkt werden. In der Beispiel oben, wurde das Feld “Artikelbild” 7,8,9 enthalten (die Artikel-ID ‘45’ sowie Werte für height, width und Alt sind hier Beispiele).

Wanderer · 2009-02-06 22:26:35

jakob schrieb:

d.h. … musst Du rel="lightbox-<txp:article_id />" einbauen an statt nur lightbox.

Danke Jakob, s’löppt. :-)

Textpattern CMS

Textpattern CMS support forum

#1 2009-02-06 14:03:51

[de-de] Slimbox in Textpattern integrieren

#2 2009-02-06 14:54:31

Re: [de-de] Slimbox in Textpattern integrieren

#3 2009-02-06 15:24:57

Re: [de-de] Slimbox in Textpattern integrieren

#4 2009-02-06 20:32:02

Re: [de-de] Slimbox in Textpattern integrieren

#5 2009-02-06 21:26:58

Re: [de-de] Slimbox in Textpattern integrieren

#6 2009-02-06 22:26:35

Re: [de-de] Slimbox in Textpattern integrieren

Board footer