获取小视区宽度的特定图像大小

时间：2016-11-30 作者：aitor

只有当wiewport为<；时，我才尝试获取此特色图像；768：

add_image_size( \'img-movil\', 660, false );
我没有太多的编码技巧。我正在阅读关于如何使用jQuery将变量从JS传递到PHP的内容$.ajax() 但我不完全理解。这就是我所做的：

第一步。我尝试设置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!");
               }
            });
    }
它不起作用（success allert不开火）。我将非常感谢您的帮助。

第二步（第一步工作时），检查是否存在PHP变量（此代码位于front page.PHP的正文中）：

<?php
if (isset($_POST[\'modoView\'])) {
  $my_image_size = \'img-movil\';
}
?>
是这样吗？提前谢谢你。

1 个回复
最合适的回答,由SO网友:aitor 整理而成

在阅读了几天关于srcset属性的内容后（感谢Benoti指出这一点！），当然，我可以看出这是正确的方式。这个解决方案很简单，足以解决这个问题srcset 具有的属性<picture> 标签功能更强大。我的解决方案：

在函数中声明大小。php

add_image_size( \'c200x200\', 200, 200, true );
add_image_size( \'c400x400\', 400, 400, true );
检查存储大小的自定义字段我有两种类型的帖子，大小分别为200x200和400x400 px img。

$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

标签： jquery   post-thumbnails   images   responsive   小码农  

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上，我不知道我是如何产生它的，或者它是否是正常的。我正在开发自己的插件，当一个足球队/足球队被输入到一个框中时，它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">