投稿サムネイルのユーザーフレンドリーなトリミング?


32

ユーザーが投稿サムネイルのトリミング領域を定義できるようにする方法はありますか?サムネイルは常に既存の投稿の添付ファイルであり、サムネイルごとに追加の添付ファイルを作成するのではなく。

投稿のサムネイルは200x100ピクセルで、投稿で使用されている画像の1つから取得する必要があります。私の理想的な世界では、「注目画像を設定」リンクをクリックすると、すでに含まれている画像の概要が表示され、これらの画像のいずれかをクリックすると、トリミング領域を自分で定義できます(移動またはサイズ変更しますが、 2x1アスペクト比)。[OK]をクリックすると、新しい投稿のサムネイルは_wp_attachment_metadata['sizes']['post-thumbnail']、新しい添付ファイルとしてではなく、元の添付ファイル(メタデータフィールドなど)と共に保存されます。すでに別の投稿の投稿サムネイルとして使用されている画像を使用することは許可されるべきではありません、または少なくとも警告を与える必要があります。

画像のすべてのバージョン、または投稿のサムネイルだけでなく、通常のサムネイルを編集することもできるため、付属の画像エディターは私のニーズに合わないと思います。また、どのバージョンを編集しているかを知るのは少し混乱するので、ユーザーはさらに多くの問題を抱えていると思います。

私が望むことをするプラグインはありますか、それとも自分のニーズに簡単に拡張できるプラグインはありますか?

更新:UIの例

Mac OS Xアドレス帳の画像ピッカーのインターフェイスがとても気に入っています。画像を選択し、スライダーを使用して固定比率のサムネイルクロッパーのサイズを変更します。ベース画像をドラッグすることもできます。あなたは、複数の画像サイズにこのアイデアを拡張することができます(私は持っているpost-thumbnailpost-thumbnail-1/2、それは例えば、その半分の大きさです)。ユーザーがチェックボックスを使用して現在編集しているサイズ(s)を選択し、画面上に適切な切り抜き長方形を描くようにします。

動作中のアドレス帳画像クロッパー


1
@Jan Fabry-私が最初に支払ったWordPressプロジェクトは、WordPressで切り取りが行われる前に、画像を切り取るためのプラグインでした。それはあなたが求めるものとは大きく異なっていた、または私は答えとしてそれを含めたい。しかし、あなたはあなたが...やる気されている場合は、書き込みにあまりにも難しいことではありませんしたい
MikeSchinkel

1
@マイク:一度あなたのウェブサイトでそれを見た、そしてそれがどこかで利用できることを望んでいた。(広範な)ウィッシュリストのすべての項目にチェックマークが付いていなくても、良いスタートを切ることができます。
1月ファブリ

@Mike-また、画像のトリミングに関連して作成または変更した可能性のあるコードを確認したいと思います。jcropをカスタムメタボックスに追加して、組み込みのワードプレスメディアギャラリーを引き続き利用しながら、画像を追加およびトリミングできるようにすることを切望しています。
NetConstructor.com

こんにちは@Jan Fabry@ NetConstructor.com-コードを確認したところ、WPの最初のプラグインだったので、リリースするのが恥ずかしいので、それは悪いことです。私はここでのリリースのための新しいソリューションに仕事をしてみたいが、それは...しばらくかかるだろう
MikeSchinkel

マイクを恥ずかしがらないでください。古いコードは作家自身の目には常に悪いものです。それはただの進歩です:)。@Jan-UIの例では、投稿のサムネイルサイズが何らかの形で事前に定義されているように見えます。それについてもっと言えますか?
-hakre

回答:


11

コードはまだ混乱していますが、IE 8でも動作するようです。リポジトリでリリースする予定ですが、それまでは現在のバージョンで遊ぶことができます。これにアクセスするには、画像を追加または編集するときに[画像の編集]をクリックします。通常の画像エディターが置き換えられます(結合が非常に困難です)。ほとんどの管理領域は通常のサムネイルを使用し、現在のバージョンでは投稿のサムネイルを編集しているため、コードは効果がないように見えるかもしれませんが、投稿のサムネイルを表示して試してみてください。

このプラグインでは、実際のサイズ変更を行うために、やはりオンデマンドのイメージオンデマンドイメージリサイズが必要です。

クロッパーのサンプル画像


コードはまだリリースの準備ができていますか?github it?このような機能をボイラーに統合したい
マイルドファズ

私はあなたがこれをどのように/どのようにしたかにも非常に興味があります!コードを共有してください。あなたのコードはデフォルトのワードプレスメディアライブラリを使用して動作し、特定の画像を呼び出し、定義された「new_thumb」などの特定のサイズに合わせてコピーできるポスト編集画面で簡単なメタボックスを作成できますかadd_image_size( 'new_thumb'、200、100、true);? 理想的な状況は、定義された各サイズの個々のメタボックスに基づいて、定義された各画像サイズを変更できるヘッダー画像作成者のようなものを持つことです。
-NetConstructor.com

@JanFabryこのコードをプラグインとしてリリースしましたか?この機能を必要とする人にお勧めしたいです!
チップベネット

@ jan-fabryこの関数はどのように行きましたか?成功しましたか?
スティーブン

4

あなたの最善の策は、JavaScriptベースの画像クロップを使用し、次にImageMagickまたはImage GDと組み合わせたphpを使用することです。

それはあなたの関数にプラグインとして書かなければならないだろうし、私は市販のワードプレスプラグインのオフハンドを知らないので、驚くべきことだ。

PHPベースの保存オプションhttp://developer.yahoo.com/yui/examples/imagecropper/conn_crop.htmlを使用したYUI画像のトリミングがあります。

これは、PHPでjqueryクロッパーを使用する方法に関する別のチュートリアルです。http: //www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

同じjqueryクロッパーを使用するが異なるコードを使用する上記のリンクに非常によく似た3番目のオプション。 http://www.leonkessler.com/blog/?p=132

代わりにjqueryのjcropを使用する別の例、http: //www.talkincode.com/jcrop-extension-implementation-in-php-932.html

誰が新しいプラグインを準備しているのか、これはきっと人気があるでしょう:)


ワードプレスコア内には既に画像トリミングコード(HTML、JS、およびPHP)があります。良いプラグインはそれを再利用すると思います。それは必須ではなく、そう言っているだけです。Janによって描かれたUIの例にはそのようなものが必要であるという事実については、あなたはちょうど正しいです。
-hakre

@hakre、最後にリンクされたWyckはjcropで、2.8でwpコア統合されました。私は当時それについて読んだことを覚えていますが、実際に使用されている情報は、すべてのアカウントが壊れているリポジトリ内の 1つのプラグイン以外には見つかりません。
マット

@matt:コアに統合された場合(コアにあるクロップUIの詳細は今のところわかりません)、コアイメージUI機能に使用されると思います。この機能は常に使用できるわけではありませんが、特定のPHPまたはシステムイメージライブラリが使用可能な場合にのみ使用できます。そのように不明確で申し訳ありませんが、それは私がこれまでコア実装に参加しなかったことだけです。しかし、私は1つあることを知っています;)
hakre

1

「Featured Image」オプションについて話しているように、ポストサムネイルのサポートを既に追加していると仮定します。

その場合は、アップロード配列に新しい画像サイズを追加するオプションがあります。したがって、デフォルトでは、サムネイル、中、大があります。次のコードでは、希望するサイズに基づいて、その品揃えに4番目の画像を追加します。このコードは、functions.phpファイルに追加されます。

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

"new-thumb" =新しいカスタムイメージの名前
"200" =幅
"100" =高さ
"true" =ハードクロップオプション。これにより、定義された幅/高さに画像が強制的にトリミングされます。なしでは、比例してスケーリングします。

ここで、ページまたは投稿配列に新しいサムネイルを表示するには、次をHTMLに挿入します

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

@cnix:この答えをありがとう、しかしそれは私が探しているものではありません。サイトのデザイナーとしてではなく、トリミングする領域をエンドユーザーが定義する方法が必要です。そのため、領域は画像によって異なります。
ヤンファブリ

1

大きな柔軟性を持たせ、テーマのサムネイルを修正し(必要な場合)、ファイルの乱雑を避けるために、CSSを使用することができます。

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

イメージ全体がロードされることに注意してください。そのため、3MBのオリジナルを使用しないでください。

1月のリクエストに応じて更新: 動的なクリッピングが必要な場合は、以下を検討してください。

  • user = administratorの場合、PHP経由でCSSを作成します。適切な設定を読み取り、それに応じてクリッピングパラメータを調整するphpにリンクするだけです。
  • user = visitorの場合、JavaScriptを使用して、画像のスタイル属性のクリッピングパラメーターを変更します。
  • より侵襲性の低いソリューションとして、[thumb w = ?? h = ??] url [/ thumb]インラインCSSを使用して適切なHTMLタグに変換できます。

実際、CSSを介してトリミングを行うことで複数のサイズを避けることができますが、ユーザー(投稿の作成者)に表示するトリミング領域をどのように定義させますか?
1月ファブリ

上記の編集をご覧ください。
ラファエル

ご説明いただきありがとうございます。これは、ユーザーが目的のトリミング領域のピクセル位置を知っていることを前提としていますか?私は実際に、よりグラフィカルな方法を探しています(現在の画像エディターのようなものですが、通常のサムネイルではなくサムネイルを投稿することを目的としています)。
ヤンファブリ

これがプラグインであり、ハックではないことを願っています。ほとんどの場合に十分なデフォルトのオプションをいくつか提供できます:コーナー、センター、エッジを中心とするなど(すべて簡単に計算できます)。人々ががらくたを入力した場合、人々はサイトのフローをひどく台無しにする可能性があるため、無料の入力を提供することは控えます。グラフィカルなクリップ定義ツール(実装についてはZenphotoを参照)を提供することは問題ありませんが、取得した値の使用方法の原則は変わりません。GUIを作成するだけです。これは私があなたを助けることはできません。
ラファエル


1

これを探していると思います:http : //wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

私はこれを試していませんが、探している機能を提供するはずです。

元のプラグインページはこちら。http://wordpress.org/extend/plugins/scissors/

私が取り組んでいるプロジェクトにもこれが必要です。


提案をありがとう。私はハサミを見てきました(そして誰かが3.0にアップグレードしたことは知っていました)が、それは私が望むものには柔軟性が高すぎると思います。はさみはもっと多くのことができるため、エンドユーザーを混乱させる可能性があります。
1月ファブリ

1

この問題の究極の解決策は、http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/からプラグインを変更することだと思い ます

functions.phpファイル内で定義されたカスタム画像サイズ(を使用add_image_size( 'new_thumb', 200, 100, true );)が自動的に使用されるようにカスタマイズし、画像を変更するときに「編集」リンクを置換(または拡張)するコードを取得します。

このアプローチを活用すると、wordpressは通常どおり適切な画像サイズを作成し続けることができますが、特定の画像のトリミング領域を明確に変更したい場合は、そのサイズの自動生成画像を置き換えることができます。うーん...それは再びそれを読んで混乱させるように聞こえますが、それは私が行方不明だと感じるものです。

現在、プラグインはこれらのカスタム画像サイズを、該当する画像の投稿ではなく、投稿内のカスタムフィールドに保存すると考えています。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.