[SNM-FUN]

【お使いの Snow Monkey のバージョン】16.4.6
【お使いの Snow Monkey Blocks のバージョン】15.0.6
【お使いの Snow Monkey Editor のバージョン】 7.0.1
【お使いのブラウザ】Chrome

【当該サイトのURL】
ローカル環境

### 実現したいこと

特定のページのヘッダー画像を、PCおよびスマホ等でレスポンシブに切り替えたい

### 試したこと

ネットにて情報収集を行い、以下のページはヒットしたのですが、

スマホ用デフォルトヘッダー画像

このトピックには7件の返信、2人の参加者があり、最後にkazuにより1年、 8ヶ月前に更新されました。 8件の…

snow-monkey.2inc.org

今回実装したいのはデフォルトのヘッダー画像ではないので、上記所望の設定について言及している記事を結果的に見つけられませんでした。お手数お掛けし恐れ入りますが、ご教示いただけますと幸いです。何卒宜しくお願い申し上げます。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ちょっときれいなやり方ではないかもですが、下記のコードでとりあえず実現はできると思います。My Snow Monkey に貼り付けて調整してみてください。

add_filter(
	'snow_monkey_template_part_render_template-parts/common/page-header',
	function( $html ) {
		// img タグを picture + source + img に置換
		// 639px以下のときは source で指定した画像を表示する
		return preg_replace(
			'|(<img [^>]+>)|ms',
			'<picture>
				<source srcset="https://placehold.jp/100x100.jpg" media="(max-width: 639px)">
				$1
			</picture>',
			$html
		);
	}
);

♥ 1

いいねをした人:

[SNM-FUN]

キタジマ様

ご返信いただき誠にありがとうございます。

ご教示いただきましたコードで問題なく実装できました。

トピック閉じさせていただきます。

♥ 1

いいねをした人:

[投稿者]

投稿