Benutzerfreundliches Zuschneiden von Post-Thumbnails?

32

Gibt es eine Möglichkeit, meine Benutzer den Zuschneidebereich eines Post-Thumbnails definieren zu lassen? Die Thumbnails sind immer vorhandene Post-Anhänge, ich würde lieber keinen zusätzlichen Anhang pro Thumbnail erstellen.

Die Post-Thumbnails sollten 200 x 100 Pixel groß sein und von einem der im Post verwendeten Bilder stammen. Wenn Sie in meiner idealen Welt auf den Link "Ausgewähltes Bild festlegen" klicken, erhalten Sie einen Überblick über die bereits enthaltenen Bilder. Wenn Sie auf eines dieser Bilder klicken, können Sie den Zuschneidebereich selbst definieren (verschieben oder die Größe ändern, aber beibehalten) das 2x1 Seitenverhältnis). Wenn Sie auf "OK" klicken, wird die neue Miniaturansicht des Beitrags mit dem ursprünglichen Anhang ( _wp_attachment_metadata['sizes']['post-thumbnail']z. B. im Metadatenfeld) und nicht als neuer Anhang gespeichert . Die Verwendung eines Bildes, das bereits als Miniaturansicht eines Beitrags für einen anderen Beitrag verwendet wird, sollte nicht zulässig sein oder zumindest eine Warnung auslösen.

Ich bin der Meinung, dass der mitgelieferte Bildeditor nicht meinen Anforderungen entspricht, da Sie alle Versionen des Bildes oder das reguläre Vorschaubild bearbeiten können, nicht nur das Post-Vorschaubild. Ich finde es auch etwas verwirrend zu wissen, welche Versionen ich bearbeite, sodass ich denke, dass meine Benutzer noch mehr Probleme damit haben werden.

Gibt es ein Plugin, das macht, was ich will, oder das ich problemlos auf meine Bedürfnisse erweitern kann?

Update: Beispiel UI

Die Benutzeroberfläche der Mac OS X Adressbuch-Bildauswahl gefällt mir sehr gut: Sie wählen ein Bild aus und ändern die Größe eines Miniaturzuschnitts mit festem Verhältnis über einen Schieberegler. Sie können das Basisbild auch verschieben. Sie können diese Idee auf mehrere Bildgrößen erweitern (ich habe zum Beispiel eine post-thumbnailund post-thumbnail-1/2das ist die Hälfte dieser Größe). Lassen Sie den Benutzer die Größen, die er gerade bearbeitet, mit Kontrollkästchen auswählen und die entsprechenden Zuschneiderechtecke auf dem Bildschirm zeichnen.

Der Adressbuch-Bildzuschneider in Aktion

plugin-recommendation images post-thumbnails Jan Fabry
quelle
1
@Jan Fabry - Mein erstes bezahlendes WordPress-Projekt war ein Plugin zum Zuschneiden von Bildern, bevor das Zuschneiden in WordPress erfolgte. Es war deutlich anders als Sie es sich gewünscht haben oder ich würde es als Antwort hinzufügen. Aber was Sie wollen, sollte nicht zu schwer zu schreiben sein, wenn Sie motiviert sind ...
MikeSchinkel
1
@ Mike: Ich habe das mal auf deiner Website gesehen und ich hatte gehofft, dass es irgendwo verfügbar sein würde. Auch wenn es nicht alle Punkte meiner (umfangreichen) Wunschliste abhakt, könnte es einen guten Start bieten.
Jan Fabry
@Mike - Ich wäre auch sehr daran interessiert, den Code zu überprüfen, den Sie möglicherweise im Zusammenhang mit dem Zuschneiden von Bildern erstellt oder geändert haben. Ich habe verzweifelt versucht, jcrop zu einer benutzerdefinierten Metabox hinzuzufügen, die das Hinzufügen und Zuschneiden von Bildern unter Verwendung der integrierten WordPress-Mediengalerie ermöglicht.
NetConstructor.com
Hey, Jan Fabry und NetConstructor.com. Ich habe gerade den Code überprüft und da es mein erstes Plugin für WP war, ist es mir zu peinlich, es zu veröffentlichen. Es ist so schlimm. Ich würde gerne an einer neueren Lösung für die Veröffentlichung hier arbeiten, aber das könnte eine Weile
dauern
Sei nicht schüchtern Mike, älterer Code ist in den Augen des Autors immer schlecht. Das ist nur Fortschritt :). @Jan - in deinem UI-Beispiel sieht es für mich so aus, als ob die Größe der Post-Thumbnails irgendwie vordefiniert ist. Können Sie mehr dazu sagen?
Hakre

Antworten:

11

Der Code ist immer noch ein Chaos, aber es scheint zu funktionieren, auch unter IE 8. Ich plane, ihn im Repository freizugeben, aber in der Zwischenzeit können Sie mit meiner aktuellen Version spielen . Um darauf zuzugreifen, klicken Sie auf "Bild bearbeiten", wenn Sie ein Bild hinzufügen oder bearbeiten. Es ersetzt den üblichen Bildeditor (sie sind sehr schwer zu kombinieren). Da der Großteil des Administrationsbereichs das reguläre Miniaturbild verwendet und meine aktuelle Version das Post-Miniaturbild bearbeitet, scheint der Code keine Auswirkung zu haben. Versuchen Sie es jedoch, indem Sie ein Post-Miniaturbild anzeigen, und Sie sollten sehen, dass es sich ändert.

Für dieses Plugin ist mein On-Demand Image Resizer erforderlich , der auch noch ein Chaos ist, um die tatsächliche Größenänderung vorzunehmen.

Beispielbild im Cropper

Jan Fabry
quelle
Code bereit für die Veröffentlichung noch? vielleicht github es? Ich möchte
unbedingt solche
Ich bin auch sehr daran interessiert, was / wie du das gemacht hast! Bitte teilen Sie den Code. Funktioniert Ihr Code mit der standardmäßigen WordPress-Medienbibliothek und ermöglicht es Ihnen, eine einfache Metabox auf dem Post-Edit-Bildschirm zu erstellen, in der Sie ein bestimmtes Bild aufrufen UND es nur für eine bestimmte Größe kopieren können, die Sie erstellt haben, z. B. "new_thumb" wie definiert durch etwas wie add_image_size ('new_thumb', 200, 100, true) ;? Die ideale Situation wäre, wenn Sie so etwas wie den Ersteller des Header-Bildes haben und die Möglichkeit haben, jede definierte Bildgröße basierend auf individuellen Metaboxen für jede definierte Größe zu ändern.
NetConstructor.com
@JanFabry hast du diesen Code schon als Plugin veröffentlicht? Ich würde es gerne jemandem empfehlen, der diese Funktionalität benötigt!
Chip Bennett
@ Jan-Fabry Wie lief diese Funktion? Erfolg?
Steven
4

Verwenden Sie am besten einen auf Javascript basierenden Bildausschnitt und kombinieren Sie dann PHP mit ImageMagick oder Image GD.

Es müsste in Ihre Funktionen oder als Plug-In geschrieben werden, da ich keine Standard-WordPress-Plug-Ins kenne, was überraschend ist.

Es gibt einen YUI-Bildausschnitt mit PHP-basierter Speicheroption http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Hier ist ein anderes Tutorial, wie man einen JQuery Cropper mit PHP benutzt:
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Eine dritte Option, die dem obigen Link sehr ähnlich ist und denselben JQuery Cropper, aber unterschiedlichen Code verwendet. http://www.leonkessler.com/blog/?p=132

In diesem Beispiel wird stattdessen jcrop von jquery verwendet: http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Wer Lust auf ein neues Plug-In hat, dem würde das sicher gefallen :)

Wyck
quelle
Es gibt bereits Bildbeschneidungscode (HTML, JS und PHP) in WordPress Core. Ich denke ein gutes Plugin würde das wiederverwenden. Es ist kein Muss, nur so zu sagen. Sie haben einfach Recht damit, dass das von Jan gezeichnete Beispiel-UI so etwas benötigt.
Hakre
@hakre, der letzte Wyck-Link ist jcrop, der bereits in 2.8 in den wp-Core integriert wurde . Ich erinnere mich, dass ich damals darüber gelesen habe, aber ich kann keine Informationen darüber finden, dass es tatsächlich verwendet wird, außer einem Plugin im Repository, das von allen Konten defekt ist.
Matt
@matt: Wenn es in den Core integriert wurde (ich kenne momentan nicht alle Details zur Crop-Benutzeroberfläche im Core), gehe ich davon aus, dass es für die Funktion der Core-Image-Benutzeroberfläche verwendet wird. Diese Funktion ist nicht immer verfügbar, sondern nur, wenn bestimmte PHP- oder System-Image-Bibliotheken verfügbar sind. Es tut mir leid, dass ich so unspezifisch bin, aber ich habe mich bisher nicht mit der Kernimplementierung befasst. Aber ich weiß, dass es eine gibt;)
hakre
1

Vorausgesetzt, Sie haben bereits Unterstützung für Post-Thumbnails hinzugefügt, da Sie über die Option "Ausgewähltes Bild" sprechen.

In diesem Fall haben Sie die Möglichkeit, dem Upload-Array eine neue Bildgröße hinzuzufügen. Standardmäßig haben Sie also eine Miniaturansicht, eine mittlere und eine große. Im folgenden Codebit wird das vierte Bild zu diesem Sortiment hinzugefügt, basierend auf der von Ihnen gewünschten Größe. Dieses Codebit wird Ihrer functions.php-Datei hinzugefügt.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = der Name des neuen benutzerdefinierten Bildes
"200" = Breite
"100" = Höhe
"true" = Option für hartes Zuschneiden. Dadurch wird ein Bild auf die festgelegte Breite / Höhe zugeschnitten. Ohne wird es nur proportional skaliert.

Um die neue Miniaturansicht auf einer Seite oder einem Post-Array anzuzeigen, fügen Sie Folgendes in Ihren HTML-Code ein

<?php the_post_thumbnail('new_thumb'); ?>

quelle
@cnix: Danke für diese Antwort, aber es ist nicht das, wonach ich suche. Ich möchte, dass der Endbenutzer den Bereich definiert, der zugeschnitten werden soll, und nicht ich als Designer der Website. Daher kann der Bereich von Bild zu Bild variieren.
Jan Fabry
1

Möglicherweise möchten Sie CSS verwenden, um eine große Flexibilität zu erzielen, Miniaturansichten in Ihrem Thema zu korrigieren (falls gewünscht) und Dateiverwirrung zu vermeiden:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Denken Sie daran, dass das gesamte Bild geladen wird. Verwenden Sie hierfür nicht Ihre 3-MB-Originale.

Update nach Wunsch von Jan: Wenn Sie dynamisches Clipping wünschen, beachten Sie:

  • Erstellen Sie für user = administrator CSS über PHP. Sie können einfach eine Verknüpfung zu dem PHP-Programm herstellen, das die entsprechenden Einstellungen liest, und die Schnittparameter entsprechend anpassen.
  • Verwenden Sie für Benutzer = Besucher JavaScript, um die Beschneidungsparameter im Stilattribut des Bildes zu ändern.
  • Als weniger invasive Lösung sollten Sie einen Shortcode (über das großartige Plugin Shortcode Exec PHP) wie [thumb w = ?? h = ??] url [/ thumb], die Sie mit Inline-CSS in das entsprechende HTML-Tag übersetzen können.
Raphael
quelle
Sie können das Zuschneiden zwar über CSS vornehmen, um zu vermeiden, dass mehrere Größen vorhanden sind. Wie kann der Benutzer (Autor des Beitrags) den anzuzeigenden Zuschneidebereich definieren?
Jan Fabry,
Bitte beachten Sie die obigen Änderungen.
Raphael
Vielen Dank für Ihre Klarstellung. Dies setzt voraus, dass der Benutzer die Pixelpositionen des gewünschten Zuschneidebereichs kennt. Eigentlich suche ich nach einer grafischeren Möglichkeit (wie beim aktuellen Bildeditor, jedoch mit dem Ziel, Miniaturansichten und keine regulären Miniaturansichten zu veröffentlichen).
Jan Fabry
Ich hoffe, Sie beabsichtigen, dies dann ein Plugin zu sein, nicht irgendein Hack. Sie können einige Standardoptionen angeben, die in den meisten Fällen ausreichen: Ecken, Zentrieren, Zentrieren an Kanten usw. (alles leicht zu berechnen). Ich würde es unterlassen, kostenlosen Input anzubieten, da die Leute den Fluss der Site stark durcheinander bringen können, wenn sie Mist betreten. Es ist in Ordnung, einen grafischen Clip-Definer (siehe Zenphoto für die Implementierung) anzubieten, aber die Prinzipien für die Verwendung der Werte, wie auch immer sie erhalten wurden, bleiben dieselben. Sie müssen nur die GUI erstellen. Das kann ich dir nicht helfen.
Raphael
1

Es gibt ein älteres Plugin namens WP Post Thumbnail, das wir manchmal verwenden. Es ist nicht perfekt und es gibt einige kleinere Fehler in der neuesten Version von WP (sie wurde seit 2008 nicht mehr aktualisiert, daher ist sie nicht unbedingt zuverlässig). http://wordpress.org/extend/plugins/wp-post-thumbnail/

gabrielk
quelle
1

Ich glaube, Sie suchen dies: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Ich habe das noch nicht ausprobiert, aber es sollte Ihnen die Funktionalität bieten, die Sie suchen.

Die Original Plugin Seite hier. http://wordpress.org/extend/plugins/scissors/

Ich brauche das auch für ein Projekt, an dem ich arbeite.

tomcat23
quelle
Danke für den Vorschlag. Ich habe mir Scissors angesehen (und wusste, dass jemand es auf 3.0 aktualisiert hat), aber ich denke, es ist zu flexibel für das, was ich will: Muss ein Cropper, der auf eine vordefinierte Größe beschneidet. Scheren können viel mehr und könnten meine Endbenutzer verwirren.
Jan Fabry
1

Ich denke, die ultimative Lösung für dieses Problem wäre, das Plugin von http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/ zu ändern.

und passen Sie es so an, dass alle benutzerdefinierten Bildgrößen, die in Ihrer Datei functions.php (unter Verwendung von add_image_size( 'new_thumb', 200, 100, true );) definiert sind, automatisch verwendet werden. Anschließend erhalten Sie den Code, um den Link "Bearbeiten" zu ersetzen (oder zu erweitern), wenn Sie ein Bild ändern möchten.

Wenn Sie diesen Ansatz verwenden, kann WordPress weiterhin die entsprechenden Bildgrößen erstellen, wie es normalerweise der Fall ist. Wenn Sie jedoch den beschnittenen Bereich eines bestimmten Bilds speziell ändern möchten, haben Sie die Möglichkeit, dies zu tun, wodurch wiederum das automatisch generierte Bild für diese Größe ersetzt wird. Hmmm ... obwohl das wieder verwirrend klingt, fehlt genau das, was ich fühle.

Momentan glaube ich, dass das Plugin diese benutzerdefinierten Bildgrößen in einem benutzerdefinierten Feld innerhalb eines Beitrags speichert, anstatt den Beitrag für ein anwendbares Bild.

NetConstructor.com
quelle