视网膜图像-用于将图像插入帖子内容的自定义语法

时间:2013-01-10 作者:Mateusz Hajdziony

我目前正在构建一个响应性很强的房地产WordPress主题,我正在研究如何正确添加对HiDPI屏幕的支持。我决定使用JavaScript解决方案Picturefill, 它模仿了proposed picture HTML element. WordPress允许我们创建自定义图像大小,我决定对于每个图像大小(如在单个列表页面上列出画廊图像),我需要声明四个图像大小:

桌面设备的常规低分辨率图像,HiDPI桌面设备的2倍高分辨率图像(目前仅限Retina MacBook),智能手机的较小低分辨率图像(为什么智能手机需要加载全尺寸图像?)

现在,当我们处理主题自动拉取的图像时,一切都很好(如帖子缩略图、自动帖子库等),但为了让Picturefill脚本正常工作,我需要输出四个不同的图像路径(带有适当的媒体查询)-how would I go about images that the user manually places into the post content?

对于那些不想阅读Picturefill工作原理的人,以下是脚本所需的语法:

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

If you have any suggestions for my proposed method please share, but I would be interested in your ideas on how to create the above syntax for the images that users manually put into the post content.

另一方面,请不要建议在插件中加入此类功能,因为在我看来,HiDPI图像显然是一种表现功能,应该由主题来处理。

此外,我知道已经存在Wp Retina 2x 插件,但这并不完全是我所需要的,因为我的图像不仅必须是高分辨率的,而且还要具有响应性-我不想强迫智能手机用户下载约800KB的桌面高分辨率图像。

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

我自己没做过,但我做过How to insert image in Markdown syntax in WordPress 隐藏以备稍后使用,它显示了如何自定义插入图像的标记。

它利用image_send_to_editor 筛选输入get_image_send_to_editor() 作用

SO网友:Ed Burns

这有点混乱,但您可以为\\u内容编写一个过滤器,使用正则表达式查找所有图像标记,然后用修改后的格式替换它们。

这种方法有一些挑战,最困难的是解析基本图像url,因为即使图像是通过Wordpress上传的,帖子中的实例也可能是全尺寸图像,也可能是缩略图。要将其转换为大小数组,需要基本图像url,然后可以将不同的大小添加到末尾(即150x150)。

还有一种可能性是,帖子作者插入了他们自己上传的图像,而不是通过Wordpress,或者他们正在热链接到外部图像。

典型的附件导入如下所示:

<img src="http://my_domain.com/wp-content/uploads/2012/08/image_name.jpg" alt="Description" width="150" height="150" class="aligncenter size-thumbnail wp-image-1237" />
因此,我们需要一个正则表达式来查找图像标记,但只查找那些实际的Wordpress附件。我只是在编写以下代码——要让正则表达式正常工作,我总是需要几次迭代——因此可能需要一些调整,但这里有一个概念:

function picturefill_images($content) {
    if(preg_match("/<img.*?wp-image-(\\d+).*?\\/>/", $content, $matches);
    foreach($matches as $match) {
        $img_id = $match[1];

        $new = "<div data-src=\'".wp_get_attachment_link($img_id, \'thumbnail\')."\'></div>";
        $new .= "<div data-src=\'".wp_get_attachment_link($img_id, \'300x300\')."\' data-media=\'(min-width: 400px)\'></div>";
        // etc, etc, etc...

        $content = preg_replace("/".preg_quote($match[0])."/", $new, $content);
    }

    return $content;
}
add_filter(\'the_content\', \'picturefill_images\');
我们正在过滤包含wp图像的任何图像标记的内容-######,并捕获结束编号-即附件id。然后,我们使用该id构建具有不同附件大小的标记的替换。最后,用我们的替换项重新替换内容中的原始图像标记。

同样,这是所有白板工作-未经测试,但它应该让您朝着正确的方向开始。

结束

相关推荐

Problem uploading images

多站点3。4.1 wordpress我用htaccess规则重定向了wp admin,并通过wp config重命名了wp内容和插件http://codex.wordpress.org/Editing_wp-config.php#Moving_wp-content现在我不能再上传图片了。当我尝试上载图像时,它会开始处理,但随后出现http错误,或者说您确定要这样做,但不允许我上载图像。this is in .htacess RewriteEngine On RewriteBase /