WP：acf 图像字段和简单的灯箱插件集成

Question

我正在尝试将 Simple Lightbox 插件集成到高级自定义字段图像字段中。

基本上，我希望页面上的任何图像（通过 acf 图像字段填充）在单击时在灯箱中打开，并且还与灯箱中的所有其他图像组合在一起，以便可以像幻灯片一样浏览它们。这是 Simple Lightbox 插件的内置功能，但我不知道如何将它与我的图像字段模板代码集成。

对于 acf WYSIWYG 字段，我正在使用这个...

<?php
    $content = get_field('wysiwyg');
    if ( function_exists('slb_activate') )
    $content = slb_activate($content);
    echo $content;
?>

...效果很好，但是让我无法适应图像字段。

这是我的图像字段模板代码（没有任何集成 Simple Lightbox 的尝试）：

<?php
    $image = get_field( 'img' );

    if( ! empty( $image ) ) {
    $url    = $image['url'];
    $alt    = $image['alt'];
    $caption = $image['caption'];
    $size   = 'large';
    $thumb    = $image['sizes'][ $size ];
    $width  = $image['sizes'][ $size . '-width' ];
?>

<?php if( $caption ): ?>

    <div class="wp-caption" style="width: <?php echo $width; ?>px">

<?php endif; ?>

<a href="<?php echo $url; ?>">

    <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />

</a>

<?php if( $caption ): ?>

        <p class="wp-caption-text"><?php echo $caption; ?></p>

    </div>

<?php endif; ?>

<?php } ?>

关于如何将 Simple Lightbox 集成到其中有什么建议吗？提前致谢！

Answer 1

使用 php 输出缓冲将模板存储在变量中。将 ob_start() 放在顶部，然后放在底部 ob_get_clean() 将停止输出缓冲，您可以将返回值保存到变量中。然后将其传递给 slb_activate。

<?php
    ob_start();

    $image = get_field( 'img' );
    if( ! empty( $image ) ) {
    $url    = $image['url'];
    $alt    = $image['alt'];
    $caption = $image['caption'];
    $size   = 'large';
    $thumb    = $image['sizes'][ $size ];
    $width  = $image['sizes'][ $size . '-width' ];
?>
<?php if( $caption ): ?>
    <div class="wp-caption" style="width: <?php echo $width; ?>px">
<?php endif; ?>
<a href="<?php echo $url; ?>">
    <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
</a>
<?php if( $caption ): ?>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
    </div>
<?php endif; ?>
<?php } ?>
<?php $content = ob_get_clean(); ?>
<?php echo slb_activate($content); ?>