CODEWITHSUNDEEP
wordpressadvanced-custom-fieldsimagefield
dadra
dadra

Reputation: 153

WP: acf image fields & simple lightbox plugin integration

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!

Upvotes: 1

Views: 4120

Answers (1)

manishie
manishie

Reputation: 5322

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); ?>

Upvotes: 1

Related Questions