在WordPress循环中动态更改CSS中的背景图像（媒体查询）

Question

我目前在Wordpress循环内的页面上有一个轮播。所以当它循环时，根据我当前在循环中的哪个帖子更改背景图像。但是，如果例如我的屏幕尺寸较小，我想使用媒体查询来加载较小的图像。

这是我目前有：

while($loop->have_posts()) : $loop->the_post(); 


     $class = ''; 

     // Custom Posts 
     $carousel_image_1  = get_field('carousel_image_1'); 
     $image_1_title   = get_field('image_1_title'); 

     if($slide_counter == 0) { $class .= ' active'; } 

?> 

     <div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>"> 
      <!-- Set the first background image using inline CSS below. --> 
      <a href="<?php echo get_post_permalink(); ?>" target="_blank"> 
      <div class="fill" style="background-image:url(<?php echo $carousel_image_1['url']; ?>); background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div> 
      <div class="carousel-caption"> 
       <h2><?php echo $image_1_title; ?></h2> 
       <img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt=""> 
      </div> 
      </a> 
     </div> 

     <?php $slide_counter++; ?> 

    <?php endwhile; wp_reset_query(); ?> 

Answer 1

不能使用媒体查询在线，您将无法在你的CSS变量的动态灵活性，因为PHP是服务器 - 侧。

但是，你可以用JavaScript，只要做到这一点的JS能够得到PHP变量（我的例子中使用的jQuery）：

<?php 
while($loop->have_posts()) : $loop->the_post(); 

    $class = ''; 

    // Custom Posts 
    $carousel_image_1  = get_field('carousel_image_1'); 
    $carousel_image_2  = get_field('carousel_image_2'); // added this, for different size image 
    $image_1_title   = get_field('image_1_title'); 

    if($slide_counter == 0) { $class .= ' active'; } 

?> 

    <div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>"> 
     <a href="<?php echo get_post_permalink(); ?>" target="_blank"> 
     <div class="fill" style="background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div> 
     <div class="carousel-caption"> 
      <h2><?php echo $image_1_title; ?></h2> 
      <img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt=""> 
     </div> 
     </a> 
    </div> 

    <script> 
    var resizeTimer; 
    function resizer() { 
     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(function() { 
     var windowWidth = $(window).width(); 
     if (windowWidth >= 992) { // for width 992 pixels and up 
      $('.fill').css({ 
      'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)'; 
      }); 
     } else { // smaller sizes 
      $('.fill').css({ 
      'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)'; 
      }); 
     } 
     }, 200); 
    } 
    resizer(); 
    $(window).on('resize', resizer); 
    </script> 

    <?php $slide_counter++; ?> 

<?php endwhile; wp_reset_query(); ?> 

我没有测试过，但我认为它应该工作。你也可以根据自己的喜好调整超时时间（现在是200ms）。

或者，如果你想不让它真正具有响应性，并且只设置在页面加载的背景下，你可以这样写：

<script> 
if (windowWidth >= 992) { // for medium size width and up 
    $('.fill').css({ 
    'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)'; 
    }); 
} else { // smaller sizes 
    $('.fill').css({ 
    'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)'; 
    }); 
} 
</script> 

Answer 2

以下HTML CSS将显示在移动视图仅

图像

HTML：

foreach($data as $item): 
    echo " 
    <div class='col-lg-4'> 
         <div class='panel panel-primary backImg' style='background-image:url({$item['imageLink']}); background-size:100% 100%;'> 
       Some Text 
     </div> 
    </div>"; 
    endforeach; 

的CSS：

@media(min-width: 480px){ 
    .backImg{ 
     background-image:none !important; 
    } 
}