こんにちわ。
WordPressのサムネイル画像についてなのですが、一定のディスプレイサイズを境に画像の比率を変えたいと考えています。
DisplaySize >= 768px で画像の比率を4:3
DisplaySize < 768px で画像の比率を2:1 といった具合です。
現在はfunction.php内にadd_image_size('custom-size', 300, 225, true); と登録してthe_post_thumbnail('custom-size')と出力してあるだけなので、全画面で同じ比率の画像が表示されています。
どのような方法で一定のディスプレイサイズを境に画像の比率を変えることができるでしょうか?
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
判別を「ウィンドウサイズ」とするか、「デバイス」とするかで方法が変わってきます。
ウィンドウサイズでの判定の場合は、JSを使うしかないと思います。
JSはあまり得意ではないので冗長的な書き方になってしまっているかもしれませんが、
lang
1 2var imgControl_small = function() { 3 $('.thumbnail img').each(function() { 4 $(this).attr('src',$(this).attr('src').replace('300x225.', '300x150.')); 5 }); 6} 7 8var imgControl_large = function() { 9 $('.thumbnail img').each(function() { 10 $(this).attr('src',$(this).attr('src').replace('300x150.', '300x225.')); 11 }); 12} 13 14$(window).on('resize', function() { 15 var winW = $(window).width(); 16 if(winW < 768) { 17 imgControl_small(); 18 } else { 19 imgControl_large(); 20 } 21});
多分こんな感じで行けると思います。
ただし、アップロードする画像のサイズや拡張子を必ず同じにしなければなりません。
(比率が変わると画像ファイル名が変わるので・・)
デバイスのみで判別する場合
スマホ、タブレットを判別すればよいのでPHPの条件判別だけでできると思います。
(PCではウィンドウをリサイズしても画像は変わりません)
functions.php
lang
1add_image_size('custom-size', 300, 225, true); 2add_image_size('custom-size2', 300, 150, true); 3 4# ブラウザ情報取得 5$agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ""; 6 7function is_iphone() { 8 global $agent; 9 return( preg_match('/iPhone/',$agent) || preg_match('/iPod/',$agent)); 10} 11 12function is_android() { 13 global $agent; 14 return( preg_match('/Android/',$agent) && preg_match('/Mobile/',$agent)); 15} 16 17function is_tablet() { 18 global $agent; 19 return( preg_match('/iPad/',$agent) || (preg_match('/Android/',$agent) && !preg_match('/Mobile/',$agent))); 20} 21 22function is_smartphone() { 23 return( 24 is_iphone() || 25 is_android() || 26 is_tablet() 27 ); 28} 29?> 30
index.phpなど
lang
1<?php 2if(is_smartphone()) { 3 the_post_thumbnail('custom-size'); 4} else { 5 the_post_thumbnail('custom-size2'); 6} 7?>
投稿2015/05/11 12:48
編集2015/05/11 13:20総合スコア94
0
PHPではそういった操作はできないと思いますので、
CSSかJavascriptで処理することになると思います。
functions.php
lang
1add_image_size('custom-size', 300, 225, true); 2add_image_size('custom-size2', 300, 150, true);
index.phpなど
lang
1<div class="image-large"> 2<?php the_post_thumbnail('custom-size') ?> 3</div> 4<div class="image-small"> 5<?php the_post_thumbnail('custom-size2') ?> 6</div>
lang
1.image-large { 2 display: none; 3} 4 5.image-small { 6 display: block; 7} 8 9@media screen and (min-width: 768px) { 10 .image-large { 11 display: block; 12 } 13 14 .image-small { 15 display: none; 16 } 17}
投稿2015/05/11 02:40
総合スコア94
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/11 21:45