Page 1 of 1

Einfügen mehrerer Bilder

Posted: Sat May 08, 2010 8:04 pm
by lukey
Hi,

ich weiß, dass dieses Thema schon behandelt wurde, aber ich konnte bisher noch keine gute Lösung finden.

Ich blogge öfter von Internet-Cafes in anderen Länden aus, die nicht unbedingt flott angebunden sind. Der Upload der Bilder geht ja noch halbwegs schnell - falls ich das mit dem ZIP-Upload auch noch hinbekomme, ist das Thema sogar ganz erledigt.

Allerdings muss ich aktuell für jedes Bild die Mediendatenbank öffnen und jedes Bild einzeln einfügen. Bei einer entsprechend üblen Anbindung dauert dieser Prozess pro Bild bis zu 3 Minuten! Füge ich 20-30 Bilder ein, bin ich Ewigkeiten beschäftigt.

Ich möchte meine Bilder gerne teils links, teils rechts und teilweise auch zwischen den Absätzen positionieren. Deshalb ist das automatische Einfügen einer Galerie durch das image-selector-Plugin nichts für mich.

Ein "optimales" Verfahren zum Einbetten der Bilder sähe für mich so aus: Ich öffne die Mediendatenbank, klicke alle Bilder an, die ich im Artikel haben möchte und sage "Einfügen", woraufhin die Bilder im Artikel "verteilt" werden.

Da dieses Verteilen, das ich z.B. bei globalzoo.de gesehen habe, nicht so einfach zu bewerkstelligen ist, würde mir auch schon folgendes sehr helfen:

1. Ich markiere in der Mediendatenbank alle Bilder, die ich im Artikel haben will.
2. Ich klicke auf einen Button "Alle einfügen"
3. Das übliche Formular "Sie haben sich für Bild xxxx.jpg entschieden" erscheint. Allerdings erscheint das Formular mehrmals untereinander, für jedes Bild, das ich ausgewählt habe.
4. Ich nehme bei jedem Bild die Einstellungen vor, die ich haben will (links, rechts, zentriert, Thumbnail etc.)
5. Ich klicke auf "Fertig" und der HTML-Code wird mir unterhalb des Artikels oder an der aktuellen Cursorposition eingefügt.
6. Dann kann ich die Bilder entsprechend im Text verteilen.

Ich habe mir die Plugin-Api mal angesehen und mich gefragt, ob sich so etwas ähnliches damit bewerkstelligen ließe. Vielleicht hat jemand hier eine Idee bzw. einen Hint, wo ich ansetzen könnte?

Vielen Dank!
Jens

Re: Einfügen mehrerer Bilder

Posted: Sun May 09, 2010 7:40 pm
by garvinhicking
Hi!

Wenn Du Medien hinzufügst gibt es doch den Menüpunkt "Mediendaten hinzufügen". Direkt dort kannst du auf "Mehr Bilder hinzufügen" klicken und dann direkt noch eine Datei auswählen, und alle in einem Schwung hochladen.

Dann kannst du die hochgeladenen Bilder über die Mediendatenbank komfortabel an die gewünschte Stelle einfügen, die zuletzt hochgeladenen Bilder werden ja auch direkt auf der ersten Seite angezeigt.

Die Idee des Punktes "Alle einfügen" ist sicherlich eine gute, leider ist sie technisch aber doch recht aufwändig zu implementieren. Bis das jemand übernehmen könnte würde ich daher obige Lösung empfehlen... :)

Wenn Du dich mit PHP auskennst, könnte ich aber gerne ein paar Tipps geben in welchen Dateien Du per Plugin-API ansetzen könntest. Das ist aber wirklich eher etwas für fittere Leute -- Serendipity-Kenntnisse braucht man nicht zwangsweise, aber mit JS/HTML/PHP müsste man gut umgehen können?

Grüße,
GArvin

Re: Einfügen mehrerer Bilder

Posted: Sun May 09, 2010 10:34 pm
by lukey
Hi Garvin,

danke für deine Antwort.
garvinhicking wrote: du auf "Mehr Bilder hinzufügen" klicken und dann direkt noch eine Datei auswählen, und alle in einem Schwung hochladen.
Ja, das Hochladen ist nicht das Problem. Wenn ich den ZIP-Upload im imageselectorplus-Plugin noch zum Laufen kriege, bin ich voll zufrieden. Vermutlich muss ich auf meinem Hosting-Server PHP 5 aktivieren.

Dann kannst du die hochgeladenen Bilder über die Mediendatenbank komfortabel an die gewünschte Stelle einfügen, die zuletzt hochgeladenen Bilder werden ja auch direkt auf der ersten Seite angezeigt.
Ja, wie gesagt ist dies der normale Weg und auch ok, wenn ich an einem ordentlich schnellen Rechner mit einer ordentlich schnellen Internetleitung arbeite.

Ich war allerdings schon oft in Asien in Internet-Buden, wo es schon mal bis zu 1 Minute dauerte, bis nur die Mediendatenbank geöffnet wurde. Der vollständige Prozess kann durchaus mehrere Minuten dauern. Das für jedes Bild zu tun ist leider manchmal sehr nervig.

Ich habe deshalb ab und zu "einfach" den eingefügten HTML-Code kopiert und verändert. Aber da ich Bilder gerne aussagekräftig benenne (und ihnen nicht nur Nummern gebe), muss ich dann auch jedes Mal den Dateinamen anpassen. Also auch keine performante Lösung.

Am liebsten hätte ich eine Art Batchlösung des aktuellen Prozesses. Also nicht nur ein Bild, für das man die Optionen angeben kann (Kommentar und Position sind sehr wichtig), sondern alle ausgewählten übersichtlich untereinander.
Wenn Du dich mit PHP auskennst, könnte ich aber gerne ein paar Tipps geben in welchen Dateien Du per Plugin-API ansetzen könntest. Das ist aber wirklich eher etwas für fittere Leute -- Serendipity-Kenntnisse braucht man nicht zwangsweise, aber mit JS/HTML/PHP müsste man gut umgehen können?
Ich bin sehr fit mit PHP/JS/HTML, aber habe noch nie ein Serendipity-Plugin geschrieben. Leider habe ich auch noch kein Howto gefunden oder ein minimales Beispiel-"Skeleton"-Plugin, das man erweitern könnte.

Ich habe mal testweise imageselectorplus kopiert, alle Funktionen rausgeworfen und nur eine Configvariable reingenommen. Leider weiß ich nicht, wie ich das Plugin installieren kann. Im Plugins-Ordner habe ich es drin (mit entsprechendem Namen), die Variablen und Bezeichner im Code habe ich angepasst. Wenn ich aber "Hier klicken um Ereignisplugins zu installieren" auswähle, kriege ich nur die Liste mit den im Internet verfügbaren.

Vielleicht kannst du mir dafür kurz einen Tip geben?

Um die beschriebene "Batch"-Lösung irgendwo hinzukriegen, habe ich mir folgenden Weg überlegt:

1. In der Mediendatenbank eine Checkbox bei jedem Bild und ein Button für "alle markierten Bilder einfügen". Der Einfachheit halber muss es nur mit der Auswahl auf einer Seite funktionieren, also die markierten Bilder müssen nicht über mehrere Galerieseiten hinweg markiert bleiben.

Beim Klick auf den Einfügen-Button wird die übliche URL aufgerufen:

serendipity_admin_image_selector.php?serendipity[step]=1&serendipity[textarea]=body&serendipity[image]=782

Allerdings wird nicht nur ein [image] übergeben, sondern mehrere. IDs könnte man mit Komma trennen.

D.h. in dieser Seite wäre alles mit JavaScript lösbar.

2. Dann wird im Fenster von serendipity_admin_imageselector.php der gesamte aktuelle Inhalt X-mal untereinander dargestellt, für jedes im vorherigen Fenster ausgewählte Bild.

D.h. das PHP (imageselector.php) müsste alle übergebenen [image]-IDs auswerten und den HTML-Code untereinander darstellen. Die Feldbezeichner müssten angepasst werden, z.B. mit einer laufenden Nummer. Aus "serendipity[align]" würde z.B. "serendipity[align1]".

Der Klick auf den Button "Fertig" löst bereits eine JavaScript-Aktion aus, die den HTML-Code ins Dokument einfügt: serendipity_imageSelector_done

Den Inhalt dieser JS-Funktion müsste man in einer Schleife aufrufen. Man müsste sie dazu aber abändern.

Und das wars schon. Klingt für mich gar nicht sonderlich kompliziert. Nur ist das vermutlich mit der Plugin-API nicht machbar und man müsste an den s9y-Quellcode ran?


Gruß,
Jens

Re: Einfügen mehrerer Bilder

Posted: Mon May 10, 2010 8:11 am
by garvinhicking
Hi!

Das mit imageselectorplus war schonmal eine sehr gute Idee, das Plugin greift da am meisten hinein. Hast Du den Pluginnamen verändert? Es ist immer wichtig, dass wenn du das plugin veränderst du den verzeichnisnamen, den PHP-Dateinamen UND den PHP-Klassennamen individuell vergibst, in deinem Fall z.b. "serendipity_event_batchimageselect" oder so.

Serendipity verwendet für den Imageselector eigentlich ausschließlich Code aus der serendipity_admin_image_selector.php, serendipity_editor.js, include/functions_images.inc.php und den Templatedateien aus templates/default/admin/media*.tpl. Innerhalb der Templatedateien kann man an einigen Stellen Ereignis-Hooks auslösen, z.b.:

Code: Select all

{serendipity_hookPlugin hook="frontend_image_selector" eventData=$media.file hookAll=true}
in der media_choose.tpl - da wird dann der Event frontend_image_selector ausgeführt, den imageselectorplus z.b. auch nutzt.

Am besten wäre es natürlich wenn man mit bestehenden Hooks schon das erreichen kann, was Du willst. Den nötigen JavaScript-Teil kann man entweder in eine Datei auslagern, oder im "backend_header" event hook ausgeben.

Wenn in den .tpl Dateien an einer Stelle für dich ein Event fehlt, kannst du ihn gerne hinzufügen und mir mitteilen, ich würde ihn dann im s9y default-template auch einsetzen. Grundsätzlich wäre ich auch für eine Core-Lösung flexibel.

Ich würde mich wahnsinnig freuen wenn Du Lust hast hier etwas zu basteln, und würde gerne versuchen alle auftretenden Frage/Probleme zu klären und mitzuhelfen wie es geht...

Viele Grüße,
Garvin

Re: Einfügen mehrerer Bilder

Posted: Tue May 11, 2010 1:14 am
by onli
Ich bin sehr fit mit PHP/JS/HTML, aber habe noch nie ein Serendipity-Plugin geschrieben. Leider habe ich auch noch kein Howto gefunden oder ein minimales Beispiel-"Skeleton"-Plugin, das man erweitern könnte.
Da kann ich vll helfen: Rohform, Einführung :)

Re: Einfügen mehrerer Bilder

Posted: Tue May 11, 2010 7:59 am
by lukey
Hi!

Danke für die Infos, damit werde ich mich in den nächsten Tagen mal beschäftigen.

Eine Frage habe ich noch: Kann ich in den Templates, sofern nötig, beliebige neue Events aufrufen, die dann von meinem Plugin aufgefangen werden? Oder sind die Namen der Events sonst noch irgendwo hinterlegt?


Danke!
Jens

Re: Einfügen mehrerer Bilder

Posted: Tue May 11, 2010 10:11 am
by garvinhicking
Hi!
Eine Frage habe ich noch: Kann ich in den Templates, sofern nötig, beliebige neue Events aufrufen, die dann von meinem Plugin aufgefangen werden? Oder sind die Namen der Events sonst noch irgendwo hinterlegt?
Genau, Du kannst beliebige Events feuern, dafür ist in der Smarty-Funktion der "hookAll"-Parameter da, dann wird nicht auf intern vorhandene Events geprüf.t

Grüße,
Garvin

Re: Einfügen mehrerer Bilder

Posted: Sat May 15, 2010 8:28 pm
by lukey
Hi,

ich habe jetzt was gebastelt, das sogar so funktioniert wie ich es mir vorstelle.

Nun muss ich jedoch noch einige Optimierungen vornehmen, damit es als "ordentliches" Plugin taugt.

Für den Batch-Insert aller Bilder habe ich mir ein eigenes Templates geschrieben, das ich mitsamt eigenem JavaScript etc. ausgebe.

Da weiß ich aber nicht, ob ich das "richtig" gemacht habe. Ich rufe über einen eingefügten Link "plugin/batchimage-bildnr1-bildnr2-bildnr3-etc" auf.

Dieser wird dann in meinem Plugin von "external_plugin" aufgefangen:

Code: Select all

case 'external_plugin' :
  if (strstr($eventData, "batchimage"))
  {
     // Bild-IDs sind mit - getrennt: Alle in image_id-Array einlesen
    $image_id = split("-", $eventData);
    array_shift($image_id);
    array_pop($image_id);
					  
    // Formular anzeigen
    $this->batchimage_choose($image_id);
}
Da ich nur $eventData übergeben kann, muss ich die Parameter da eben "reincodieren". Ist zwar nicht sonderlich schön, aber es funktioniert. Gibt es vielleicht noch einen hübscheren Weg?

batchimage_choose() gibt dann mittels Smarty eine komplett neue Seite mit eigenem Template aus, die an den entspr. Teil in media_choose.tpl angelehnt ist.

In dieser eigenen Template-Datei batchimage_choose.tpl binde ich noch eine eigene JS- und CSS-Datei ein, allerdings noch hard-codiert so:

Code: Select all

<script type="text/javascript" src="../plugins/serendipity_event_batchimageselect/batchimage.js" ></script>
Wie mach ich's richtig?

Danke!
Jens

Re: Einfügen mehrerer Bilder

Posted: Sun May 16, 2010 11:13 am
by garvinhicking
Hi lukey!

Wow, ganz große Klasse. Freut mich sehr zu hören dass Du so schnell so viel Fortschritt mit der s9y API machen konntest! Ich bin sehr gespannt auf das Plugin und hoffe, dass Du es hier vielleicht posten magst? Dann könnte ich probieren es ins imageselectorplus-plugin zu integrieren, wenn Du magst?
Da weiß ich aber nicht, ob ich das "richtig" gemacht habe. Ich rufe über einen eingefügten Link "plugin/batchimage-bildnr1-bildnr2-bildnr3-etc" auf.
Genau richtig! Das Variablenparsing haben wir auf das Plugin abgerollt, damit jedes Plugin seine Parameter/Reihenfolge selbst bestimmen kann. So wollen einige plugins evtl eine "?var1=..." Übermittlung haben, für andere reicht eine simple "X-X-X-"Auflistung. In deinem Fall würde ich es daher auch genauso tun, wie Du es implementiert hast.

Code: Select all

<script type="text/javascript" src="../plugins/serendipity_event_batchimageselect/batchimage.js" ></script>
An der Stelle gibt es zwei Möglichkeiten die Plugins gehen. Variante 1 wäre auch einen eigenen external hook wie /plugin/batchimageselect-js, und das wird dann vom plugin so abgefangen dass es einfach den JS-Code durchreicht (fpassthru oder so). Variante 2 wäre eine Konfigurationsoption im Plugin, mit dem man den HTTP-Pfad zu der Datei angibt. Die kann dann defaultmäßig auf $serendipiy['serendipityHTTPPath'] . 'plugins/serendipity_event_batchimageselct/batchimage.js" laufen. Das ist daher notwendig, weil es theoretisch sein kann dass andere Leute (wie ich) sich symbolische Links angelegt haben, so dass mein HTTP-Pfad korrekt "/plugins/Additional_plugins/serendipity_event_batchimageselect/batchimage.js" wäre.

Das ist sicher nicht der Regelfall, aber bei einer kleine JS-Datei ist ein Aufruf über den PHP-S9Y-Externalplugin-Wrapper meist Overkill. Ich selber würde daher die Konfigurationsoptionsvariante gehen. Beispiele dafür sind z.b. das Lightbox-Plugin.

Viele Grüße,
Garvin

Re: Einfügen mehrerer Bilder

Posted: Sun May 16, 2010 3:01 pm
by lukey
Hi Garvin,

vielen Dank für die Hilfe. Scheint soweit zu funktionieren. Die Tutorials von "onli" waren sehr hilfreich. Vielleicht solltest du die irgendwo gut sichtbar verlinken?

Ich habe das Plugin angehängt. In admin/media_choose.tpl sind zwei Änderungen notwendig, sonst wurden keine bestehenden Dateien angetastet:

1. Im Header muss {serendipity_hookPlugin hook="frontend_header"} drin sein, damit das JQuery-Plugin geladen wird. Brauche ich für die Javascript-Modifikation der Bildauswahl-Seite. Ohne JQuery wär' mir das zu eklig geworden :)

2. Im case=='default' habe ich einen neuen Hook definiert, da auf dieser Seite bisher überhaupt keine Hooks geworfen werden: frontend_image_selector_choose

Code: Select all

{elseif $media.case == 'default'}

    <!-- MEDIA MANAGER START -->
    {serendipity_hookPlugin hook="frontend_image_selector_choose" eventData=$media hookAll=true}
    <h1>{$CONST.SELECT_FILE}</h1>
    <h2>{$CONST.CLICK_FILE_TO_INSERT}</h2>
    <br />
    {$media.external}
    {$MEDIA_LIST}
    <!-- MEDIA MANAGER END -->

Das Plugin funktioniert folgendermaßen:

1. In der Bildauswahl/Mediendatenbank sorgt ein document.ready()-Javascript-Block, der durch den Hook "frontend_image_selector_choose" eingefügt wird, dafür, dass über jedem Bild eine Checkbox erscheint und zusätzlich ein Button "Alle markierten Bilder einfügen".

2. Bei Klick auf den Button sucht ein Javascript alle markierten Bilder, liest deren IDs aus der URL aus, packt sie in einen String und ruft folgende Seite auf: plugin/batchimage-bildnr1-bildnr2-bildnr3-...

3. Diese Seite wird über "external_plugin" aufgefangen. Der Code gibt eine komplett neue Seite aus, die größtenteils den Code aus media_choose.tpl (case == 'choose') kopiert, diesen aber in eine Schleife packt. Im $media-Array gibt es nicht nur einen Eintrag 'file' - 'file' ist jetzt selbst ein Array aus X Bildern. Die Seite bindet weiterhin eine eigene JS- und CSS-Datei ein.

4. Hat man alle Einstellungen gemacht, ruft der Button "Alle Bilder einfügen" die JS-Funktion "batchimageSelector_done()" auf, die größtenteils eine Kopie von imageSelectorDone() ist, allerdings wieder mit einer Schleife über alle Bilder.


Aktuelle "Probleme":

- ich bin nicht sicher, ob das Plugin mit anderen Plugins / Hooks gut zusammenspielt. Ich habe einige Hooks im neuen Template drin gelassen, andere aber auch rausgeworfen.

- ich verwende immer den Texteditor. Testweise habe ich die Sache mit dem WYSYWIG-Editor probiert, und der fügt mir alle Bilder ineinander verschachtelt ein. Ursache hierfür ist vermutlich die Funktion "surroundHTML" beim Einfügen in batchimageSelector_done. Hast du eine Ahnung, wie ich dem beibringe, dass er alle Bilder untereinander einfügt?

- Das mit dem "Felder merken" in der Bildauswahl (z.B. welche Ausrichtung und welches Linkverhalten das letzte Mal ausgewählt war) habe ich nicht ganz verstanden, die Smarty-Funktion @ifRemember ebenso wenig :). Da meine Felder ja nun alle nicht mehr so heißen wie vorher, sondern eine Bild-Nr. angefügt haben, funktioniert das vermutlich nicht mehr so wie es sollte. Vielleicht hast du ja nen Tipp.


Anyway - du kannst es dir ja mal anschauen. Für meine Zwecke funktionierts jedenfalls schon mal so wie ich mir das vorstelle :-)

Danke!
Jens

Re: Einfügen mehrerer Bilder

Posted: Sun May 16, 2010 5:36 pm
by garvinhicking
Hi!

Großartig! Die beiden Änderungen am Template kann ich natürlich gerne in den s9y core einbinden. Ich versuche mir das diese Woche mal anzusehen und den imagesleectorplus einzubauen, und dann auch noch deine Fragen/Probleme bearbeiten.


Großes Lob schonmal!

Viele Grüße,
Garvin