Skip to content

Instantly share code, notes, and snippets.

@lunaluna

lunaluna/srcset.md

Last active March 19, 2019 18:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lunaluna/644b19e3fe9b5689c537140efb7303fb to your computer and use it in GitHub Desktop.
Save lunaluna/644b19e3fe9b5689c537140efb7303fb to your computer and use it in GitHub Desktop.
Download ZIP
WordPressの wp_get_attachment_image における srcset の法則
Raw
srcset.md

WordPressの wp_get_attachment_image における srcset の法則

  • アスペクト比関係ない
  • 2xとかないことが原因
  1. 使いたいサイズを add_image_size とかで作っておく
  2. サムネイルが作られていれば srcset 入るけども、 2x とかではないので、サイズによっては retina でぼやけまくり
  3. srcset のブレイクポイントなんやねん ＞ 管理画面のメディア設定のサムネイル、中サイズ、大サイズと add_image_size （テーマプラグイン全部含めて有効なもの） ＜ ここ重要
  4. 記事一覧のサムネイルとかより大きいもの wp_get_attachment_image なりの size で呼び出す add_image_size とは「別に」、倍サイズの add_image_size 作っておけばいいんじゃね？
  5. img src が小さくても srcset に4で設定した大きいのが入ってれば retina の場合そっち見てくれる

TwentySeventeenの場合

  1. add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );
  2. <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
  3. img の src は twentyseventeen-featured-image の画像になるけど、 srcset でブラウザ幅小さい時とかは srcset 見に行く
  4. wp_calculate_image_sizes のフィルターフックで sizes をよしなに調整してる
@lunaluna
Copy link
Author

https://www.facebook.com/gatespace/posts/10218948737893007

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment