[英]How to provide different sizes of images according to viewport size in WordPress?
可能是一个非常基本的问题,因为对程序的理解较少,但我认为没有问题不那么重要 。
在WordPress中,我们有4个默认大小:
我们可以编辑/停用除原始版本以外的所有默认大小,并可以添加/编辑/删除任何自定义大小,甚至可以使用自定义脚本为宽屏设备启用2x支持。 但这就是我的理解停止的地方 - 我们有他们想要的尺寸图像,现在是什么? 我们如何根据视口大小显示/传送它们?
假设我有一个代码所在的部分:
<article class="news">
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?>
<div class="entry-excerpt"><?php the_excerpt(); ?></div>
</article>
如果我需要在那里投射2倍(更宽)版本的图像(而不是缩略图),我该怎么做?
我问这个问题是因为我们无法在没有JavaScripts的帮助下使用PHP识别视口大小,而且设计JS是额外的 - 不是强制性的。 如果我们认为我们必须根据视口大小抛出图像而不使用JS,那么我们怎么能这样做呢? 这实际上是给我带来痛苦的。
我只能想到一个没有JS的解决方案而且它只是一个。 您可以加载所有图像,并使用CSS媒体查询只显示一个。 你的网站将是巨大而缓慢但如果你不能使用JS这是我能想到的唯一选择。
PHP get_browser( http://php.net/manual/en/function.get-browser.php )可用于对客户端窗口大小进行某种原始估计。 但那将是一个估计。
我建议的解决方案是在HTML数据属性中输出al图像并使用JS确定正确的大小然后用corect src替换以前的空src
图像元素示例:
<img src=""
data-full-src=" full-link "
data-large-src=" large-link "
data-medium-src=" medium-link "
data-small-src=" small-link " />
JS函数示例:
var image = getElementById( your-img-ID ); //or some other selector
var selectedSrc = "data-full-src";
image.setAttribute('src', image.getAttribute(selectedSrc) );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.