Question

我使用带有WordPress的ACF plugin输出图片。在我的functions.php文件中，我有两个图像大小：

<?php
    add_image_size( 'full', 1024, 400, true );
    add_image_size( 'square', 540, 540, true );

要使用img srcset和ACF，我在functions.php中有以下帮助程序代码：

<?php
    function responsive_image($image_id,$image_size,$max_width){

        // check the image ID is not blank
        if($image_id != '') {

            // set the default src image size
            $image_src = wp_get_attachment_image_url( $image_id, $image_size );

            // set the srcset with various image sizes
            $image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );

            // generate the markup for the responsive image
            echo 'src="'.esc_url($image_src).'" srcset="'.esc_attr($image_srcset).'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';

        }
    }
?>

在我的主题中，我有：

<img <?php responsive_image(get_field( 'image' ), 'full', '1024px'); ?>  alt="<?= esc_attr( get_field('alt') ); ?>">

这会在前端输出以下内容：

<img src="test-1024x400.jpg" srcset="test-1024x400.jpg 1024w, test-300x117.jpg 300w, test-768x300.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" alt="Image Alt">

此图像的图像裁剪宽（全），1024px×400px。

对于移动设备，我想将其切换为（方形）540px乘540px。我知道我可以通过使用移动类添加额外的img标记来实现此目的，使用display: none和display: block在两个图像之间切换。这种方法的唯一缺点是需要加载的额外图像。

在主题PHP中是否可以根据视口加载条件WordPress图像大小？

Answer 1

您可以使用一些返回布尔值的Wordpress函数来显示某些用户代理的不同输出。

但请注意，如果使用手机或平板电脑，这将返回true。它无法区分两者。

https://codex.wordpress.org/Function_Reference/wp_is_mobile

一个简单的例子：

if( wp_is_mobile() ) {
    // display your mobile/tablet related item here
} else {
    // display the desktop alternative here
}

Answer 2

好的，这有点复杂。 PHP是一种服务器端语言，因此您无法获得它的观点。为了能够根据观点更改网站，您需要使用客户端语言，如JavaScript！

您不必创建两个图像并显示/隐藏它们，根据视点更改图像类更容易，更有效。

HTML：

<img src="/path/to/img" class="imgs">

CSS：

.mobile {
    width: 540px;
    height: 540px;
    overflow: hidden;
    // whatever style you want for mobile view
}
.normal {
    width: 1024px;
    height: 400px;
    overflow: hidden;
    // whatever style you want for normal view
}

JS：

var cw = document.documentElement.clientWidth; // get horizontal viewpoint
var ch = document.documentElement.clientHeight; // get vertival viewpoint
if (cw <= 540 || ch <= 540) { // if it is mobile
    var images = document.GetElementByClassName('imgs'); // get all images (where class is 'imgs')
    for (var i = 0; i < images.length; ++i) {
        images[i].className = "imgs mobile"; // add class 'mobile'
    }
}
else {
    var images = document.GetElementByClassName('imgs');
    for (var i = 0; i < images.length; ++i) {
        images[i].className = "imgs normal"; // add class 'normal'
    }
}

因此，基本上每次加载页面时，JS都会检查视点并相应地更改图像的类。

根据视口大小切换PHP值

2 个答案: