Question

我希望能够将img的src值与PHP中创建的变量交换。

我目前正在使用javascript来确定设备宽度。这发生在包含Wordpress循环的.php文件中。在识别设备宽度后，我想相应地更改img的src值。

我可以使用这个JS函数成功检索PHP变量，但只有当函数在循环中编写时，并且众所周知，这将复制每个帖子的函数并导致错误。

我需要能够在循环外计算这些给定的PHP变量，然后将它们注入循环内的img src值。

我知道我在这段代码中可能会遇到比我想要解决的更多错误！我已经在这方面工作了一段时间，这个特殊的问题变得非常令人不安。提前谢谢。

当前正在使用的代码：

<?php query_posts( array ( 'home' => 'WordPress Themes', 'orderby' => 'rand', 'posts_per_page' => -1 ) ); ?>
<?php while ( have_posts() ) : the_post(); ?>
  <script>
    function getImagePath(){
      if (window.matchMedia('(max-device-width: 1920px)').matches) {
        var theSizedImage = <?php the_field('desktop_image'); ?>
      }if (window.matchMedia('(max-device-width: 1280px)').matches) {
        var theSizedImage = <?php the_field('tablet_image'); ?>
      }if (window.matchMedia('(max-device-width: 600px)').matches) {
        var theSizedImage = <?php the_field('mobile_image'); ?>
      }
      return theSizedImage;
    } 
   </script>
   <img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();"  />
<?php endwhile;
wp_reset_query();
?>

Answer 1

因此，经过进一步的修补，我能够提出一个解决方案。这确实有效，但我想知道是否有更优雅的解决方案。您会注意到我的查询稍有改动，因为我改进了页面并处理了错误。上面代码的主要问题是图像URL的变量只定义了一次。我在下面提供的解决方案将重新运行循环中的每个帖子。

<?php query_posts( array ( 'category__not_in' => array( 1, 4, 5, 6, 7 ), 'orderby' => 'rand', 'posts_per_page' => -1 ) ); ?>
<?php while ( have_posts() ) : the_post(); ?>
    <script>
       if (screen.width <= 1920) {document.write("<img src='<?php the_field('desktop_image');?>'   />");}
       if (screen.width <= 1280) {document.write("<img src='<?php the_field('tablet_image');?>'  />");}
       if (screen.width <= 600) {document.write("<img src='<?php the_field('mobile_image');?>'  />");}
       if (screen.width > 1920){document.write("<img src='<?php the_field('full_resolution');?>'  />");}
    </script>
<?php endwhile;
wp_reset_query();
?>

用基于设备宽度的PHP变量替换图像源值

1 个答案: