输出图库简码作为 Wordpress 中的引导列


Output gallery shortcode as bootstrap columns in Wordpress

如何

更改图库短代码的输出?在帖子中,我们得到:

[gallery ids="134,127,109"]

我需要这样的东西:

<div class="row gallery">
    <div class="col-md-3">
        <a href="photo.jpg" data-gallery="gallery">
            <img src="photo.jpg" class="img-responsive" />
        </a>
    </div>
    . . . 
</div>

这必须在 the_content() 中工作,因此必须替换图库过滤器函数。找到了一些关于它的主题,但都是旧的,所以功能发生了变化。如果函数尊重库中选择的列数并将其更改为引导类,那也会很好。有人可以帮我吗?

这应该可以帮助您:

add_filter( 'post_gallery', 'bootstrap_gallery', 10, 3 );
function bootstrap_gallery( $output = '', $atts, $instance )
{
    $atts = array_merge(array('columns' => 3), $atts);
    $columns = $atts['columns'];
    $images = explode(',', $atts['ids']);
    $col_class = 'col-md-4'; // default 3 columns
    if ($columns == 1) { $col_class = 'col-md-12';}
    else if ($columns == 2) { $col_class = 'col-md-6'; }
    // other column counts
    $return = '<div class="row gallery">';
    $i = 0;
    foreach ($images as $key => $value) {
        if ($i%$columns == 0 && $i > 0) {
            $return .= '</div><div class="row gallery">';
        }
        $image_attributes = wp_get_attachment_image_src($value, 'full');
        $return .= '
            <div class="'.$col_class.'">
                <a data-gallery="gallery" href="'.$image_attributes[0].'">
                    <img src="'.$image_attributes[0].'" alt="" class="img-responsive">
                </a>
            </div>';
        $i++;
    }
    $return .= '</div>';
    return $return;
}

@bitWorking的解决方案非常好 - 我知道这只是一个快速提示和启动代码,所以这不是抱怨缺少的东西。我只是稍微修改了一下以修复/添加困扰我的事情 - 也许它对某人有用:GitHub 上的修改代码。

修复/添加"缺失"功能:

  1. 生成用户通过WordPress图库面板设置的缩略图大小。
    • 使用全尺寸图像会浪费带宽。
    • 如果原始图像大小不同,图库可能看起来不正常。
    • 如果CMS用户设置了特定的缩略图大小,并且图库将显示不同的大小/比例,他/她可能会感到困惑。
  2. 生成用户通过WordPress图库面板设置的缩略图alt属性。
  3. 使缩略图链接(通过WordPress图库面板设置)正常工作(无,附件页面,文件),以维护面板的功能,而不会混淆CMS用户。