Question

我想建立一个新的Wordpress响应式网站，其中包含智能手机，平板电脑和计算机的响应式图像。

我已经构建了一个javascript函数（工作），可以根据设备的宽度加载正确的图像。

这是我的html布局，用于加载4种不同尺寸的相同图像：

<div pictures-content alt="alt data">
        <div src="<?php bloginfo('template_directory'); ?>/images/small.jpg">
        <div src="<?php bloginfo('template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
        <div src="<?php bloginfo('template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
        <div src="<?php bloginfo('template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>

这是我的问题：当我必须在Wordpress中添加图片时，我将不得不推4张图片。

我想知道是否有一种方便的方法可以通过Wordpress视觉选项直接添加代码来添加帖子4图像？

使用WP画廊是一个不错的选择？我是否必须下载插件并设置自定义字段？我是否必须编写一个Js函数，根据帖子上的唯一图片自动构建和添加html布局？

我正在采取任何其他解决方案，谢谢你的帮助

Answer 1

不是一个完整的答案，但足以让你开始。

您需要正确的图片尺寸，请参阅add_image_size
将图像添加到编辑器中时，您可以使用过滤器设置正确的HTML image_send_to_editor

这可以给你这样的东西：

<?php
function responsive_image($html, $id, $caption, $title, $align, $url, $size, $alt)
{
    $html = '<div pictures-content alt="' . $alt . '" title="' . $title . '">
        <div src="' . wp_get_attachment_image_src($id, 'thumbnail') . '">
        <div src="' . wp_get_attachment_image_src($id, 'medium') . '" data-media="(min-width: 400px)"></div>
        <div src="' . wp_get_attachment_image_src($id, 'large') . '" data-media="(min-width: 950px)"></div>
        <div src="" data-media="(min-width: 1200px)"></div>
        </div>';
}
add_filter('image_send_to_editor', 'responsive_image', 10, 8);

调整图像尺寸测试它，让我知道你是否卡住了。

Wordpress，创建一个响应式图像的帖子

1 个答案: