web-dev-qa-db-ja.com

トリミングされたおすすめの画像がギャラリーの元の画像を置き換えます

最初に、私は可能な限り徹底的に私の研究をしました。検索は行われましたが、私の正確な問題についてのアドバイスや解決策は見つかりませんでした。

わかりました、説明する時間です。

現在、私はクライアントのためのギャラリーテーマに取り組んでいます（私はこのテーマの最初の開発者ではありません、それはオフィスの他の開発者によって作成されました）。テーマはかなり単純で、ホームページには画像を含む各投稿の220×170のサムネイルが表示されます。画像をクリックすると、フルサイズ画像のページが表示されます。とても簡単です。

今私の悩みは始まります。現在WordPressが画像を中央に配置しているだけなので、クライアントは画像のどの領域を220×170のサムネイルに表示するかを定義します。これを行う私のプロセスは、ギャラリーに画像をアップロードし、投稿に挿入して保存することです。

それから Set Featured image をクリックします。主な問題はここから始まります。これには2つの方法がありますが、どちらも問題を引き起こします。画像をトリミングする場合は、 変更を適用：サムネイル に保存してから 注目画像として使用 を選択します。注目画像は、フルサイズの画像のままになります。サイズ。

最初は解決策を考え出したと思いましたが、私はそれをより多くのバンドエイド修正と呼びたいと思います、そして私のクライアントはむしろこの次の方法を避けるでしょう。代わりに All images sizes を使用して画像をトリミングすると、正しくトリミングされた画像が列見出しとして設定されますが、明らかにすべての画像サイズが上書きされます。そのため、私が自分の投稿に戻ったとき（誤って投稿から画像を削除したとしましょう）、それを再び挿入したい場合、現在ギャラリーの内側にある画像はトリミングされた画像です。

最初の問題、つまりトリミングされたサムネイルが注目の画像セクションに表示されず、フルサイズの画像だけに表示される問題を解決する方法について、いくつかのガイダンスを探しています。

ありがとうございました、

imagespost-thumbnailsgallerythumbnailscropping
5
Gilipe

クライアントが画像編集プログラムに精通しているかのように聞こえます。

ここで大声で考えているだけですが、カスタムメタボックスを追加して、クライアントに2つの画像をアップロードさせることができます。 1 - 目的の場所にフォーカスを合わせる小さい画像2 - 「おすすめの画像」として使用する大きい画像。

次に、テーマ内のカスタム画像とクリック時の大きい画像を呼び出します。私はそれがクライアントにとって余分なステップであることを知っています、しかしこれは私が過去に同じような状況のために使った方法です。

1
Travis Pflanz

私はあなたのために解決策があります。それは完璧ではありません、しかし私はあなたの必要性のためにそれをテストしました、そして、それはうまくいくでしょう。 Wordpressには「バグ」がいくつかありますが、後で説明します。

あなたのfunctions.phpで、あなたの画像サイズを定義します：

// Add Thumbnail Support
if ( function_exists( 'add_theme_support' ) ) {

    add_theme_support( 'post-thumbnails' );

    set_post_thumbnail_size( 220, 220, true );

    add_image_size( 'very-large', 1024, 99999, false );
}

これはあなたの大きな画像のほんの一例です。詳細はWordpress Codexのリンクをご覧ください。

テーマでは、サムネイルをで呼び出します。

<img src="<?php $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail', false); echo $imgsrc[0]; ?>">

大きな画像には<?php the_post_thumbnail( 'very-large' ); ?>を使います。

  • wp_get_attachment_image_src 「おすすめの画像」のソースを取得する
  • get_post_thumbnail_id 投稿に添付されているサムネイルのIDを返す
  • 「サムネイル」は、Wordpressの設定で設定されている画像の「​​サイズ」です。

次に、管理>>設定>>メディア>>サムネイルサイズに進みます。幅220、高さ170を入力

「サムネイルを正確なサイズにクロップする（通常、サムネイルは縦横比が比例します）」をチェックします。

これは明白なバグの1つです、私はこれを200種類以上の方法でテストしました。set_post_thumbnail_size（220、220、true）を持っています。 functions.phpではなく、Wordpressの設定で寸法を異なる方法で設定する必要があります。

さて、投稿新しい投稿/投稿の編集画面で：

  1. 「注目の画像を設定」をクリック
  2. 大きな画像をアップロードする
  3. 画像のサムネイルの下にある[画像の編集]をクリックします
  4. さて、画像をクリックしてトリミング選択までドラッグします。
  5. 右側の「画像のトリミング」で、幅に225、高さに171と入力します。例：225：171
  6. 「サムネイル設定」では、「サムネイル」を選択しなければなりません。
  7. 画像の上にあるトリミングアイコンをクリックします crop icon
  8. 「保存」をクリック
  9. メインの画像画面の一番下にある[注目の画像として使用]をクリックします。

これはもっと明白なバグです。

  • 選択範囲の寸法を入力するだけでは開始できません。最初に選択範囲をドラッグする必要があります。
  • Wordpressのサムネールの実際の寸法よりも大きい選択範囲を入力する必要があります。サムネイルの実際の寸法を入力することはできません。
  • すべての設定と機能がサムネイル画像のハードクロップを設定していても、Wordpressは必ずしも220x170にトリミングするわけではありません。試行錯誤の結果、私は225：171がいつもうまくいくことを発見しました。

他に注意が必要なことは、選択された領域が大きく、非常に不均衡に高い、または広い場合、サムネイルも正確に220 x 170のサイズで表示されないことです。

イメージコードにheight="170px"とwidth="220px"を追加することで、あちこちで数ピクセルを隠すことができると思います。

私よりも頭の良い人がこの方法を改良してくれることを本当に願っていますが、2日間プレイした後に思い付くことができる最高の方法です。

1
Travis Pflanz