前提
WEB独学者です。
ワードプレスを使用しています。
カスタムフィールドはプラグインAdvanced Custom Fields
レスポンシブサイトです。
実現したいこと
アップロード時に必要なものだけの画像リサイズをおこないたいです。
対象は、投稿ページからアップロードした
・アイキャッチ
・カスタムフィールドの画像
の2点です。
HTMLはpicture要素のsrcsetで出力します。
↑こちらは自力でできました。
投稿のアイキャッチ画像を設定>ファイルをアップロード からアップロードした画像ファイルは
横幅 高さ
- 512px 889px
- 768px 1,333.5px
- 224px 388.062px
- 448px 776.124px
- 672px 1164.186px
- 152px 263.328px
- 304px 526.656px
- 456px 789.984px
- 274.097px 474.844px
- 548.194px 949.688px
- 822.291px 1424.532px
の11種類のサイズを自動生成
■理由
画像表示する場所のHTMLは
HTML
1<picture> 2 <source media="(max-width: 767px)" 3 srcset="symm-top_274.097-474.844.jpg, 4 symm-top_548.194-949.688.jpg 2x, 5 symm-top_822.291-1424.532.jpg 3x" /> 6 <source media="(max-width: 1023px)" srcset=" 7 symm-top_152-263.328.jpg, 8 symm-top_304-526.656.jpg 2x, 9 symm_456-789.984.jpg 3x" /> 10 <source media="(max-width: 1365px)" srcset=" 11 symm-top_224-388.062.jpg, 12 symm-top_448-776.124.jpg 2x, 13 symm_672-1164.186.jpg 3x" /> 14 <img srcset="symm-top_256-444.500.jpg, 15 symm-top_512-889.jpg 2x, 16 symm-top_768-1,333.5.jpg 3x" /> 17</picture>
(※わかりやすくするためにわざと小数点がついた画像ファイル名を書いています)
カスタムフィールド フィールド名detail(フィールドタイプ画像)> 画像を追加する > ファイルをアップロード からアップロードした画像ファイルは
横幅 高さ
- 800px 445px
- 1600px 910px
- 332px 184.672px
- 332px 184.672px
- 664px 369.344px
- 996px 554.016px
- 265px 147.406px
- 530px 294.812px
- 795px 442.218px
の9種類のサイズを自動生成
■理由
画像表示する場所のHTMLを
HTML
1<picture> 2 <source media="(max-width: 375px)" 3 srcset="symm-top_265-147.406.jpg, 4 symm-top_530-294.812.jpg 2x, 5 symm-top_795-442.218.jpg 3x" /> 6 <source media="(max-width: 1023px)" srcset=" 7 symm-top_332-184.672.jpg, 8 symm-top_664-369.344.jpg 2x, 9 symm_996-554.016.jpg 3x" /> 10 <img srcset="symm-top_800*445.jpg, 11 symm-top_1600-910.jpg 2x, 12 symm-top_2400-1365.jpg 3x" /> 13</picture>
としたいから
カスタムフィールド フィールド名detail2(フィールドタイプ画像)> 画像を追加する > ファイルをアップロード からアップロードした画像ファイルは
横幅
- 608px
- 1216px
- 1824px
- 464px
- 928px
- 1392px
- 608px
- 1216px
- 369.875px
- 739.75px
- 1109.625px
の11種類のサイズを自動生成
■理由
画像表示する場所のHTMLを
HTML
1<picture> 2 <source media="(max-width: 414px)" 3 srcset="symm-top_369.875.jpg, 4 symm-top_739.75.jpg 2x, 5 symm-top_1109.625.jpg 3x" /> 6 <source media="(max-width: 1023px)" srcset=" 7 symm-top_608.jpg, 8 symm-top_1216.jpg 2x, 9 symm_1824.jpg 3x" /> 10 <source media="(max-width: 1365px)" srcset=" 11 symm-top_464.jpg, 12 symm-top_928.jpg 2x, 13 symm_1392.jpg 3x" /> 14 <img srcset="symm-top_608.jpg, 15 symm-top_1216.jpg 2x, 16 symm-top_1824.jpg 3x" /> 17</picture>
としたいから
発生している問題・エラーメッセージ
最初の読み込み時にリサイズするプログラムをつくりましたが、セキュリティ的に問題があるのと、最初の閲覧者は、読み込み時間がかかるという問題があります。
そのため、アップロード画像のaltやタイトルを入れれる欄の下にadd_image_sizeの名前を入れる入力欄をつくり
その名前に合わせてリサイズするプログラムを思いつきました。
アップロード画像のaltやタイトルを入れれる欄の下に項目を増やすことは可能でしょうか?。
それか他の方法がいいでしょうか?
試したこと
上記のこと
補足情報(FW/ツールのバージョンなど)
WordPress 5.2.7
Advanced Custom Fields 5.11.4
参照先
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。