web-dev-qa-db-ja.com

Wordpressのget_the_post_thumbnail問題を使用した画像の拡大縮小

発行URL - http://www.creativescripters.com/clients/testwp/uncategorized/image-resized/

私はWordPress(自己ホスト型)の最新版を使用しています。問題は、サイズ変更/拡大縮小した画像からサムネイルを取得することです。 test-e1513229707262-150x150.jpgであるべきだったリサイズ画像

問題を再現するためのステップ

  1. 画像をアップロードし、拡大縮小します(アップロードされた画像の[編集]をクリックし、幅を変更して[拡大縮小]をクリックします)。 Wordpressは画像の名前を変更し、その名前にサフィックスIDを追加するので、画像が拡大縮小されたことを確認できます。例えば、拡大縮小後にtest.jpgをアップロードした場合、画像名はtest-randomstring.jpgになります。

enter image description here 

  1. Get_the_post_thumbnail($ post、 'full')を呼び出すと、正しい画像が得られます。サイズ変更されたもの、すなわちtest-randomstring.jpg enter image description here 

  2. 例えば、画像サイズからサムネイルを生成する必要があり、get_the_post_thumbnail($ post、 'thumbnail')という関数を呼び出すと、実際の画像からTHUMBNAILが返されます。 jpgで、サイズ変更されたものではありませんtest-randomstring.jpg)

スクリーンショット - https://i.imgur.com/sQKoZcF.png

4
June

常に画像編集でソースセットを再生する

(新しい素材、特にカスタム関数は、コメントスレッドでの会話に従います。)

次の関数は、画像編集操作の後に完全なソースセットを自動的に再生成します。

/**
 * ALWAYS REGENERATE FULL SOURCE SET AFTER EDITING IMAGE
 * answering StackExchange WordPress Development Question
 * see: https://wordpress.stackexchange.com/questions/288581/image-scaling-using-get-the-post-thumbnail-issue-in-wordpress/
 * exploits code already worked out in Regenerate Thumbnails Plugin
 */
add_action( 'edit_attachment', 'wpse_always_regenerate', 99);

function wpse_always_regenerate( $postID ) {

    $new_url = get_attached_file( $postID );

    $metadata = wp_generate_attachment_metadata( $postID, $new_url );

    wp_update_attachment_metadata( $postID, $metadata );

}

それがあなたが望んでいることであれば、あなたはこれをあなたのtheme functions.phpファイルに追加するでしょう - あなたが生成されそしてオリジナルの画像に追加されたインデックス番号に満足し、そして編集された(拡大縮小した)画像。元のアップロードとそのセットをフォルダに残すことがあります。 (オプション化された「クリーナー」操作を追加することは私が手に入れたことではありませんが、既に添付されていない/使われていないイメージをフォルダーから片付けるプラグインがあります - 半定期的に適用できます。)

不要な追加の相互作用の可能性についてはテストしていません。ほとんどのインストールでは、それは問題にならないでしょうし、助けになるかもしれませんが、すべての画像編集アクションを「サムネイルを再生成する」(おそらく「ソースセットを再生成する」という名前にする)必要はないかもしれません。これらのインスタレーションでは、明らかに何かもっと洗練されたものが欲しいでしょう。


フルディスカッション

最初の質問とそれをどのように正確に再現するかについてもう少し明確にしておくと役立ちますが、その答えは次のようなものであると思います。

あなたが画像をアップロードするとき、WordPressはサムネイルの通常のセットと共に画像のフルバージョンをアップロードします。画像を拡大縮小すると、乱数を追加した特定のバリエーションも作成されます。そのため、あるインストールで、ポストフィーチャー画像として画像をアップロードしてそれを拡大縮小すると、Uploadsフォルダに次のように表示されます。

![enter image description here 

get_the_post_thumbnail( $postID, $type )を要求すると、次のようになります。

full

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-full size-full wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

ポストサムネイル

<img 
    width="500" 
    height="651" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
    alt="" 
    sizes="100vw" 
/>

サムネイル

<img 
    width="150" 
    height="150" 
    src="http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg" 
    class="attachment-thumbnail size-thumbnail wp-post-image" alt="" 
    srcset="https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-150x150.jpg 150w, 
            https://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-100x100.jpg 100w" 
    sizes="100vw" 
/>

そのため、アップロード時に画像を拡大縮小するときに、元のファイル名に「ランダム」コードを追加した新しい「フル」バージョンの画像を作成します。また、おすすめ画像としてアップロードしていたので、スロットも使用されます。 「ポストサムネイル」画像として。

これは、wp_get_attachment_image_src()を使用して検証することもできます。上記の "full"の場合は、次の値が返されます。

(
    [0] => http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before-e1514050718361.jpg
    [1] => 500
    [2] => 651
    [3] => 
)

つまり、通常の画像セットで名前付きの画像の1つを呼び出すと、画像を拡大/縮小する前に作成されたものになります。もしあなたがそれを注目の画像としてアップロードするときに画像を拡大縮小したと仮定すると、あなたはフル画像か(このインストールでは)post-thumbnail画像のどちらかを要求すれば、あなたはまた新しい拡大縮小画像を得るでしょう。

元のフルイメージを取得するには、添付オブジェクトにアクセスする必要があると思います。これは次のようになります。

[64755] => WP_Post Object
        (
            [ID] => 64755
            [post_author] => 1
            [post_date] => 2017-12-23 17:38:24
            [post_date_gmt] => 2017-12-23 17:38:24
            [post_content] => 
            [post_title] => pingdom_topline_before
            [post_excerpt] => 
            [post_status] => inherit
            [comment_status] => open
            [ping_status] => closed
            [post_password] => 
            [post_name] => pingdom_topline_before
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2017-12-23 17:38:24
            [post_modified_gmt] => 2017-12-23 17:38:24
            [post_content_filtered] => 
            [post_parent] => 64752
            [guid] => **http://ckmswp.com/wp-content/uploads/2017/12/pingdom_topline_before.jpg**
            [menu_order] => 0
            [post_type] => attachment
            [post_mime_type] => image/jpeg
            [comment_count] => 0
            [filter] => raw
        )

)

150x150(またはサムネイル用にインストール用に設定されたもの)バージョンを取得したい場合は、次のいずれかを行う必要があります。

1)拡大縮小した画像を個別にアップロードし、WordPressにtest-image-random-150x150.jpgを生成させます。または

2)「サムネイルの再生成」と同様の効果が得られます。

このような再生成操作の後、私のuploadsフォルダには以下が表示されます。

enter image description here 

元の画像セットはフォルダ内で変更されないままであることに注意してください。

このような再生成されたイメージセットを作成することは、拡大縮小されたイメージを他の目的に使用する場合に特に適しています。一貫性.

これらの目的を達成するには、カスタム関数(この回答の冒頭で提供されたものなど)が必要です。それが非常に使用されるとは確信できませんが、もっと複雑でオプション化された実装は検討に値するでしょう。しばしば。 (私がイメージを特定の寸法に拡大縮小したいとき、私はほとんどいつもWPとは別にそれをし、そして私に意味があるようにそれに名前を付けます、しかし私は他の人のために話すことができません。)

あなたが(新しいスケーリングされた画像に相対的な)画像の完全なソースセットを取得したい、そして新しいスケーリングされた画像を再アップロードしたくない、またはあなたが画像を編集するときはいつでもあなたのためにそれをするための機能に頼りませんライブラリの場合は、サムネイルの再生または同様のプラグインを使用できます。最後に、画像をトリミング(または偽のトリミング)してサムネイルのセットを作成することもできます。

この最後のものは実行するのが簡単です:「画像編集」では、画像の拡大縮小に加えて、トリミングツールを使用してオリジナルのバーチャルに近いコピーを作成することができます。画像。テストではエディタがオリジナルとまったく同じ「コピー」を完全に保存することはできないので、ニアコピーと言いますが、現時点では理解したい場合はコードを詳細に調べる以外に選択肢はありません。私は別の日に出発して、多分どこか別の場所に書いておきます - 他の誰かが最初に完全な説明会と共に来ない限り。

つまり、まとめると、

1.最初に画像をアップロードすると、WordPressはアップロードされたファイルに基づいて一連のサムネイルを作成します。

2.画像を単純に拡大縮小すると、元の名前に基づいて生成されたファイル名に、 "random"要素(実際には異種のインデックス番号)が追加された単一の拡大縮小画像が生成されます

3.新しい拡大縮小画像を再アップロードする場合、またはカスタム関数、プラグイン、編集トリックを使用してサムネイルを再生成する場合は、生成された拡大縮小画像に基づいて拡大縮小画像に基づいて新しい画像セットを作成できますファイル名。

4
CK MacLeod

thumbnailの代わりにpost-thumbnailを使用してください。最終的なコードはget_the_post_thumbnail($post, 'post-thumbnail');になります。こちらを参照してください link

2
BlueSuiter

中古imgタグ・表示画像

<img src="<?= $img_url=get_the_post_thumbnail_url($post->ID,'full'); ?>" alt="image" />
2
Tarang koradiya

テーマのfunctions.phpファイルに適切な画像サイズを追加する必要があります

add_image_size('my_post_thumbnial', 400, 99999, false);

400は幅、99999は高さ、falseはトリミングしません。これはadd_theme_supportの後(サムネール後)にする必要があります。それでそれを見つけて、それの後に上記のコードを置いてください。

すべての画像を再生成する必要はありません。必要な画像を再アップロードするだけです。オプションで、サムネイルの再生成プラグイン( https://wordpress.org/plugins/regenerate-thumbnails/ )を使用すると、メディアライブラリ内の各画像へのリンクを追加してその特定の画像を再生成できます。

それからthe_post_thumbnail('my_post_thumbnial');であなたのサムネイルを呼びます

2
Ted

あなたのwp-configファイルにIMAGE_EDIT_OVERWRITE定数を追加してWPに古い画像を消去させ、新しい画像を使わせることをお勧めします。

関数wp_save_image()は画像を処理するもので、画像エディタAJAXエンドポイント用のAJAXハンドラであるwp_ajax_image_editor()によって呼び出されます。

あなたはそれがファイル/wp-includes/image-edit.phpでどのように働くかについてもっと読むことができるか、それをオンラインでそのソースコードを見ることができます@ https://developer.wordpress.org/reference/functions/wp_save_image/

しかし、これが本当に問題になるのかどうかはまだわかりません。

  1. 元の画像は1024×707と言う
  2. WPはそれを他のサイズと共にサムネイルサイズに変換します。
  3. あなたは150×150であるその画像からサムネイルを取得します。
  4. あなたはそれを400x276と言うようにサイズ変更します。
  5. その画像のサムネイルは、実際には最初の画像のサムネイルと同じになります。

だから結果はどちらの方法でもほぼ同じです:)

2
shramee