WP: acf image fields & simple lightbox plugin integration

Question

I'm trying to integrate the Simple Lightbox plugin into Advanced Custom Fields image fields.

Basically I want any images on a page (populated via acf image fields) to open in the lightbox when clicked, and also be grouped together with all other images within the lightbox so they can be navigated through like a slideshow. This is built-in functionality for the Simple Lightbox plugin, but I don't know how to integrate it with my template code for image fields.

For acf WYSIWYG fields I'm using this...

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

...which works great, but adapting that to image fields is eluding me.

Here's my template code for image fields (without any attempts at integrating 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 } ?>

Any suggestions for how to integrate Simple Lightbox into this? Thanks in advance!

manishie · Accepted Answer · 2014-09-26T23:05:43.463

Use php output buffering to store your template in a variable. Put ob_start() at the top, then at the bottom ob_get_clean() will stop the output buffering, and you can save the return value to a variable. Then pass that to 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); ?>

Thanks so much, but unfortunately there's no change to the html output when using this code. The output looks just the same as when using my original code above. Any other ideas? — dadra, Sep 26 '14 at 22:49
made a mistake on the last line. previously we were echoing the unchanged $content. this should work now. — manishie, Sep 26 '14 at 23:06

WP: acf image fields & simple lightbox plugin integration

1 Answers1