説明
Enable Responsive Image は、画面の幅に応じて異なる画像を表示する設定を画像ブロックに追加します。 複数の画像を追加し、画像ごとにメディアクエリーと解像度を設定できます。画面幅がそのメディアクエリーの条件と一致すると、対応する画像に切り替わります。
リソース
スクリーンショットの画像
- ライセンス: パブリックドメイン
- ソース: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20
スクリーンショット
画像ブロックのブロックサイドバーに追加された設定 
画面幅による画像の変化
インストール
/wp-content/plugins/ディレクトリにenable-responsive-imageフォルダーをアップロードします。- WordPress のプラグインメニューからプラグインを有効化してください。
FAQ
-
このプラグインはどのように動作しますか ?
-
このプラグインは、フロントエンドでレンダリングされる画像ブロックの HTML マークアップを書き換えます。img 要素を picture 要素で囲み、追加された画像の設定にもとづいて、picture 要素内に srcset 属性と media 属性を持つ source 要素を追加します。
-
複数の画像ソースが設定されている場合に正しく動作しません。
-
画像の順番を並べ替えてみてください。たとえば、両方の画像のメディアクエリータイプが max-width である場合、値が小さい方が上に並べられる必要があります。
-
エディター上で画面幅やデバイスを切り替えても、設定した画像に切り替わりません。
-
エディター側では、デフォルトでは画像は切り替わりません。ブロックツールバーの「レスポンシブ画像プレビューを有効にする」ボタンをクリックします。
-
どのようなフィルターを使用できますか ?
-
利用可能なフィルターの一覧は、Github の readme にあります。
評価
2024年7月26日
Working well, just what was needed. Thanks for making this! While I understand this functionality not being the core image block, it’s essential for any kind of professional site build so thank you very much for making it!
2024年2月7日
At last! I have waited a long time for this functionality to come to Gutenberg… As far as I know, this is the only plugin out there that will allow you to set different images for different screen sizes – all inside the block editor!! No more outside-the-editor workarounds needed to achieve this – Brilliant!!!By-the-way, this developer has created a whole “swiss army knife” range of additional plugins for Gutenberg: Flexible Spacer Block, Flexible Table Block and more.
Well done, thank you, and keep up the great work, Very Best Wishes!!!!
貢献者と開発者
Enable Responsive Image はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。
貢献者
変更履歴
1.3.0
- Tested to WordPress 6.7
- Drop support for WordPress 6.4
1.2.0
- WordPress 6.6で動作確認
1.1.1
- 不要な変更ログを削除
1.1.0
- WordPress 6.5で動作確認
- 機能改善: ブロックサイドバーの調整
1.0.0
- 初回リリース