如何将“data-”属性添加到本地库输出的图像标签

时间:2014-08-21 作者:eventcom

在尝试制作WordPress和Galleria 成为朋友我已经有了一个好的结果。Galleria可以很容易地用来显示本地WordPress图库。我正在使用插件,但这根本不是必需的。不过,有一件事已经让我很紧张:我缺少的是添加属性的方法data-big 因为这将迫使Galleria在全屏模式下使用“完整”图像。在HTML中,如下所示

<div class="galleria">
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description"></a>
</div>
Galleria将使用的位置<img> 显示缩略图和<a href ...> 对于常规图像。这很有魅力,几乎是开箱即用。但我没有找到解决方法

添加属性data-big<img>

  • 通过该参数传递WP图像大小(例如“full”)
    • 是否有人可以为我指出正确的方向或给出一个如何做到这一点的示例。免责声明:我对WP过滤器和挂钩有一些经验,但我远不是PHP专家。

      提前谢谢。

      编辑:更具体一点:“大数据”的值已经可用(大/全尺寸图像),所以基本上我想向标记添加新属性,并传递全尺寸图像的URL。

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

    根据Galleria插件与附件图像过滤器的交互方式,您应该能够使用wp_get_attachment_image_attributes 滤器

    显然,对于使用wp_get_attachment_image(), 但它会满足你的要求。

    /**
     * Filter attributes for the current gallery image tag.
     *
     * @param array   $atts       Gallery image tag attributes.
     * @param WP_Post $attachment WP_Post object for the attachment.
     * @return array (maybe) filtered gallery image tag attributes.
     */
    function wpdocs_filter_gallery_img_atts( $atts, $attachment ) {
        if ( $full_size = wp_get_attachment_image_src( $attachment->ID, \'full\' ) ) {
            if ( ! empty( $full_size[0] ) ) {
                $atts[\'data-big\'] = $full_size[0];
            }
        }
        return $atts;
    }
    add_filter( \'wp_get_attachment_image_attributes\', \'wpdocs_filter_gallery_img_atts\', 10, 2 );
    
    它使用标准设置为库输出以下标记:

    <div class="gallery galleryid-2160 gallery-columns-3 gallery-size-thumbnail" id="gallery-1">
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="http://...image1.png"><img width="150" height="150" data-big="http://...image1.png" alt="" class="attachment-thumbnail" src="http://...image1-150x150.png"></a>
            </div>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="http://...image2.png"><img width="150" height="150" data-big="http://...image2.png" alt="" class="attachment-thumbnail" src="http://...image2-150x150.png"></a>
            </div>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="http://...image3.png"><img width="150" height="150" data-big="http://...image3.png" alt="" class="attachment-thumbnail" src="http://...image3-150x150.png"></a>
            </div>
        </figure>
    </div>
    

    结束

    相关推荐

    Resize images in batch

    我想调整服务器上的图像大小,我的WordPress站点库中有7000多个图像。我想调整服务器本身上所有图像的大小。我知道可以使用“重新生成缩略图”插件,但为此,我将不得不整天打开浏览器窗口,甚至可能在中间某个地方崩溃,这将导致我再次调整所有图像的大小。有谁有更好的主意来做这件事吗?请简要解释答案。