0

我想建立一个新的 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 布局？

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

4

1 回答 1

1

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

这可以给你这样的东西：

<?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);

调整图像尺寸测试它，如果你卡住了，请告诉我。

于 2013-01-28T20:14:47.167 回答