在 Wordpress 中将图库简码输出为 bootstrap 列
Output gallery shortcode as bootstrap columns in Wordpress
如何更改图库短代码的输出?在 post 中我们得到:
[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() 内工作,因此必须替换图库过滤器功能。找到了一些关于它的主题,但都太旧了,所以功能发生了变化。如果该函数将尊重在图库中选择的列数并将其更改为 bootstrap 类,那也很好。
有人可以帮我吗?
这应该对你有帮助:
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 的解决方案非常好 - 我知道这只是一个快速提示和入门代码,所以这并不是在抱怨丢失的东西。我只是稍微修改了一下 fix/add 困扰我的事情 - 也许它对某人有用:modified code on GitHub.
Fixed/added 'missing' 特点:
- 正在生成用户通过 WordPress 图库面板设置的缩略图大小。
- 使用全尺寸图片会浪费带宽。
- 如果原始图像尺寸不同,图库可能会显示不佳。
- 如果 he/she 设置特定的缩略图大小和图库会显示不同 size/proportions,CMS 用户可能会感到困惑。
- 正在生成用户通过 WordPress 图库面板设置的缩略图
alt
属性。
- 使缩略图链接(通过 WordPress 画廊面板设置)正常工作(none、附件页面、文件)以保持面板的功能,而不是混淆 CMS 用户。
如何更改图库短代码的输出?在 post 中我们得到:
[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() 内工作,因此必须替换图库过滤器功能。找到了一些关于它的主题,但都太旧了,所以功能发生了变化。如果该函数将尊重在图库中选择的列数并将其更改为 bootstrap 类,那也很好。 有人可以帮我吗?
这应该对你有帮助:
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 的解决方案非常好 - 我知道这只是一个快速提示和入门代码,所以这并不是在抱怨丢失的东西。我只是稍微修改了一下 fix/add 困扰我的事情 - 也许它对某人有用:modified code on GitHub.
Fixed/added 'missing' 特点:
- 正在生成用户通过 WordPress 图库面板设置的缩略图大小。
- 使用全尺寸图片会浪费带宽。
- 如果原始图像尺寸不同,图库可能会显示不佳。
- 如果 he/she 设置特定的缩略图大小和图库会显示不同 size/proportions,CMS 用户可能会感到困惑。
- 正在生成用户通过 WordPress 图库面板设置的缩略图
alt
属性。 - 使缩略图链接(通过 WordPress 画廊面板设置)正常工作(none、附件页面、文件)以保持面板的功能,而不是混淆 CMS 用户。