在AJAX中将资源集添加到图像

时间:2018-04-22 作者:Joshua Wilkeson

我有一行代码:

    $out .= get_the_post_thumbnail(\'\', \'\', array( \'alt\' =>
    the_title_attribute (array(\'echo\' => 0) ), \'class\' =>
    \'img-responsive\', \'srcset\' => get_the_post_thumbnail_url( "xs" ) ) );
这是错误的(关于srcset属性实现),我正在尝试将srcset/大小添加到此中,我确信我可以用简单的方法来完成,就像我通常所做的那样,手动添加所有大小/图像大小,但这会创建几行不必要的代码,在做了一些研究之后,我遇到了如下函数

wp\\u calculate\\u image\\u size()

  • wp\\u get\\u attachment\\u image\\u srcset()
  • wp\\u get\\u attachment\\u image\\u size()wp\\u add\\u image\\u srcset\\u and\\u size()

    我还看到有人提到,如果上传的图像大小与原始图像的纵横比不一致,那么这些功能都无法工作。如果任何人有任何示例/建议,我可以参考以添加srcset 一个ajax服务的图像,我会非常棒。

    2 个回复
    SO网友:Tom J Nowell

    wp_get_attachment_image_srcset 这里的关键是:

    wp_get_attachment_image_srcset( int $attachment_id, array|string $size = \'medium\', array $image_meta = null )
    
    我相信你缺少的信息是,帖子缩略图实际上是一个附件IDget_post_thumbnail_id 您应该能够生成srcset 价值观

    但也要记住,在谷歌搜索时,我发现的每个问题都是问如何删除srcset 不添加。显然,您想要的实际上是在WP 4.4中添加的。答案可能实际上是不设置srcset 让WP为您设置。

    SO网友:Joshua Wilkeson

    我最终使用了在codepen上找到的一个函数,并对其进行了轻微的修改。编辑:还值得注意的是,wp\\u get\\u attachment\\u image\\u src()为所有图像宽度返回了0,因此我创建了自己的宽度数组,并以这种方式分配了它们。(希望我能找到这些简洁的内置方法的用途)

    function srcset_post_thumbnail($defaultSize = \'m\')
    {
        $thumbnailSizes = [
            \'xs\',
            \'s\',
            \'m\',
            \'l\',
            \'xl\'
        ];
        $html = \'<img sizes="\';
        $html .= \'(max-width: 30em) 100vw, \';
        $html .= \'(max-width: 50em) 50vw, \';
        $html .= \'calc(33vw - 100px)" \';
        $html .= \'srcset="\';
        $thumb_id = get_post_thumbnail_id();
        for ($i = 0; $i < count($thumbnailSizes); $i++) {
            $thumb = wp_get_attachment_image_src($thumb_id, $thumbnailSizes[$i], true);
    
            $url = $thumb[0];
            $width = $thumb[1];
    
            $html .= $url . \' \' . $width . \'w\';
    
            if ($i < count($thumbnailSizes) - 1) {
                $html .= \', \';
            }
        }
        $alt = get_post_meta($thumb_id, \'_wp_attachment_image_alt\', true);
        $thumbMedium = wp_get_attachment_image_src($thumb_id, $defaultSize, true);
        $html .= \'" \';
        $html .= \'src="\' . $thumbMedium[0] . \'" alt="\' . $alt . \'">\';
        return $html;
    }
    

    结束

    相关推荐

    自定义帖子类型-使用AJAX显示子页面

    我有一个名为Product Pages的自定义帖子类型,每个产品页面有3个自定义字段,Overview、Details、Pricing,它们是指向页面子级的链接。我想在父页面的div中显示每个子级的内容(单击自定义字段时)。实例产品1当我单击Overview(例如)时,我希望名为Overview(自定义字段Overview中的链接)的子页面的内容显示在名为“subpage container”的div中。我想我需要ajax和jquery,但我想不出一个好方法。有什么帮助吗?迄今为止我的代码(我使用高级自定