web-dev-qa-db-ja.com

ビューポート幅が狭い場合に特定の画像サイズを取得する

Wiewportが<768の場合にのみ、このおすすめの画像を取得しようとしています。

add_image_size( 'img-movil', 660, false );

私はコーディングスキルがあまりありません。 jQueryの$.ajax()を使ってJSからPHPに変数を渡す方法について読んでいましたが、完全にはわかりません。これは私がしたことです：

最初の一歩。 JS変数を設定してサーバーに送信します。

    $(document).ready(function(){
          var viewportWidth = $(window).width();
          if (viewportWidth < 768) {
            var modoView = 'movil';
            $.ajax({
               type: "POST",
               url: 'front-page.php',
               data: {
                   modoView : modoView
               },
               success: function(data) {
                   alert("success!");
               }
            });
    }

それは機能しません（成功アラートは発火しません）。どうぞよろしくお願いします。

2番目のステップ（最初のステップが動作するとき）、PHP変数が存在するかどうかを確認します（このコードはfront-page.phpの本文にあります）

<?php
if (isset($_POST['modoView'])) {
  $my_image_size = 'img-movil';
}
?>

正しいですか？前もって感謝します。

jquerypost-thumbnailsimage-sizeresponsive
2
aitor

Srcset属性について読んで数日後（これを指摘してくれてありがとうBenoti！）、間違いなく、これが正しい方法であることがわかります。 <picture>タグを持つsrcset属性ははるかに強力ですが、この解決策はこの問題を解決するのに十分簡単です。私の解決策：

Functions.phpでサイズを宣言する

add_image_size( 'c200x200', 200, 200, true );
add_image_size( 'c400x400', 400, 400, true );

格納されたサイズでカスタムフィールドを確認してください

私は200 x 200と400 x 400 pxのimgサイズの2種類の投稿、大と小を持っています。

$tamano = get_field('tamano');
if ($tamano == '200x200') {
  $clase = 'c200x200';
} elseif ($tamano == '400x400') {
  $clase = 'c400x400';
} else {
  $clase = 'sin-clase';
}

Imgタグを構築する

<?php
      $img_id = get_post_thumbnail_id();
      $img_src = wp_get_attachment_image_url( $img_id, 'c200x200' );
      $img_srcset = wp_get_attachment_image_srcset( $img_id, $clase );
      $alt_text = get_post_meta($img_id , '_wp_attachment_image_alt', true);
      ?>

      <img
          srcset="<?php echo esc_attr( $img_srcset ); ?>"
          alt="<?php echo $alt_text; ?>"
          sizes="(min-width: 768px) 400px, 200px"
          src="<?php echo esc_url( $img_src ); ?>"
      >

バックグラウンド：

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

http://alistapart.com/article/responsive-images-in-practice

0
aitor