Unfortunately, doesn’t work. Two things happens:
- A simple link appear instead
<a><img /><a>
;
- The lightbox doesn’t work
The code I have tried to use before:
<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
<a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>">
<img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
</a>
</div>
<?php } ?>
The code that I have tried to use, provided by you:
<?php if ( get_field( 'upload_img' ) ) { ?>
<div class="upload_img">
<?php $selector = 'upload_img_'.get_the_ID(); ?>
<a href="<?php the_field( 'upload_img' ); ?>" data-lightbox="<?php the_field( 'upload_img' ); ?>" data-title="<?php the_field( 'titulo_do_clipping' ); ?>" class="<?php echo $selector;?>">
<img src="<?php the_field( 'upload_img' ); ?>" alt="<?php the_field( 'titulo_do_clipping' ); ?>" />
</a>
</div>
<?php echo do_shortcode('[lightbox selector=".'.$selector.']'); ?>
<?php } ?>
I’m using into a custom post with ACF, described here: https://theme.co/apex/forum/t/pro-acf-post-show-meta/18308/5
The echo do_shortcode
output:
<span id="x-lightbox-1" data-x-element="lightbox" data-x-params="{"selector":".x-img-link","deeplink":false,"opacity":"0.85","prevScale":"0.85","prevOpacity":"0.65","nextScale":"0.85","nextOpacity":"0.65","orientation":"horizontal","thumbnails":false}"></span>
Thank you very much.