web-dev-qa-db-ja.com

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

ユーザーに投稿サムネイルの切り取り領域を定義させる方法はありますか？サムネイルは常に既存の添付ファイルです。サムネイルごとに追加の添付ファイルを作成したくはありません。

投稿のサムネイルは200 x 100ピクセルで、投稿で使用されている画像の1つから取得します。ですから私の理想的な世界では、 "Set Featured Image"リンクをクリックすると、既に含まれている画像の概要が表示されます。 2×1のアスペクト比） [OK]をクリックすると、新しい投稿のサムネイルが新しい添付ファイルとしてではなく、元の添付ファイル（たとえば_wp_attachment_metadata['sizes']['post-thumbnail']メタデータフィールド）に保存されます。別の投稿の投稿サムネイルとして既に使用されている画像を使用することは、許可されるべきではない、あるいは少なくとも警告を与えるべきです。

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

私が欲しいことをするプラグインはありますか、それとも私は私のニーズに容易に拡張できますか？

更新：UIの例

私は本当にMac OS Xアドレス帳イメージピッカーのインターフェースが好きです：あなたはイメージを選択して、そしてスライダーを通して固定比率のサムネイルクロッパーのサイズを変更します。ベース画像をドラッグすることもできます。このアイデアを複数の画像サイズに拡張できます（例えば、私はpost-thumbnailとpost-thumbnail-1/2の半分のサイズです）。ユーザーがチェックボックスを使用して現在編集中のサイズを選択し、画面上に適切な切り取り矩形を描きます。

The Address Book image cropper in action

plugin-recommendationimagespost-thumbnails
32
Jan Fabry

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

このプラグインは私の On-Demand Image Resizer を必要とします。

Example image in the cropper

11
Jan Fabry

あなたの最善の策は、JavaScriptベースの画像トリミングを使用し、次にphpとImageMagickまたはImage Gdを組み合わせることです。

私は既製のワードプレスプラグインを手に入れることができないので、それはあなたの関数またはプラグインとして書かれなければならないでしょう、それは驚くべきことです。

Phpベースの保存オプション付きのYUIイメージクロップがあります http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

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

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

これは代わりにjqueryのjcropを使ったものです。 http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

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

4
Wyck

大きな柔軟性を持たせ、テーマのサムネイル表示を修正し（必要に応じて）、ファイルが乱雑にならないようにするためにCSSを使用することをお勧めします。

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

画像全体がロードされることを忘れないでください。そのため、3MBのオリジナルを使用しないでください。

Janの要求に従って更新します。 動的クリッピングが必要な場合は、次の点を考慮してください。

  • User = administratorの場合は、PHPを介してCSSを作成します。適切な設定を読み、それに応じてクリッピングパラメータを調整するphpにリンクするだけです。
  • User = visitorの場合は、JavaScriptを使用して画像のstyle属性のクリッピングパラメータを変更します。
  • それほど侵略的でない解決策として、[thumb w = ??のような（すばらしいプラグインShortcode Exec PHPを介して）ショートコードを作成することを考えてください。あなたはインラインCSSで適切なHTMLタグに翻訳することができます。
1
Raphael

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

試したことはありませんが、探している機能が提供されるはずです。

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

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

1
tomcat23

私はネイティブの "wp_get_attachment_image"を使ってサムネイルをトリミングすることにしました...これはトリミングされたサムネイルを使った画像ギャラリーの例です。

http://wpworks.wordpress.com/2010/12/27/image-gallery-with-image-crop/ /

宜しくお願いします

1
Alvaro Neto

私たちが時々使うWP Post Thumbnailという古いプラグインがあります。それは完璧ではない、そして最新バージョンfo WPに関するいくつかのマイナーなバグがある（それは2008年以来更新されていないので、必ずしも信頼できるとは限らない）。 http://wordpress.org/extend/plugins/wp-post-thumbnail/ /

1
gabrielk

「注目の画像」オプションについて説明しているように、ポストサムネイルのサポートがすでに追加されているとします。

もしそうなら、アップロード配列に新しい画像サイズを追加するという選択肢があります。だから、デフォルトでは、サムネイル、中、大があります。次のコードでは、これにより、必要なサイズに基づいて4番目の画像がその品揃えに追加されます。このコードは、functions.phpファイルに追加されます。

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

"new-thumb" =新しいカスタム画像の名前
"200" =幅
"100" =身長
"true" =ハードクロップオプション。これにより、画像は定義された幅/高さにトリミングされます。そうでなければ、それはただ比例に比例します。

では、新しいサムネイルをページまたはポスト配列に表示するには、次のコードをHTMLに挿入します。

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

私はこの問題に対する究極の解決策は http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/ からプラグインを修正することであろうと思います

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

このアプローチを利用すると、Wordpressは通常どおり適切な画像サイズを作成し続けることができますが、特定の画像のトリミング領域を特別に変更したい場合は、自動的に生成された画像を置き換えることができます。うーん...もう一度読み直すのは混乱しますが、まさに私が見逃していると感じます。

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

1
NetConstructor.com