[Support request] Add Text on Image lightbox

Hi,

I’m not sure I fully get what you mean but perhaps what you’re trying to achieve is similar to this:
https://wpshowposts.com/support/topic/add-title-to-image-lightbox/page/2/#post-26221

Give it a try and let us know how it goes. 🙂

We can assign the custom field as <a> tags attribute by using the wpsp_image_data filter.

add_filter('wpsp_image_data',function(){
$field = get_field('your_acf_field_slug');
return 'slick-caption="'.$field.'"';
});

This will add slick-caption="[acf_field_value]". We can fetch this as the caption for the featherlight image.

After applying this filter, we can modify the script to take the slick-caption attribute value.

add_action( 'wp_footer', function () { ?>
<script>
jQuery( document ).ready( function( $ ) {
    $.featherlightGallery.prototype.afterContent = function() {
        var caption = this.$currentTarget.find('img').parent().attr('slick-caption');
        this.$instance.find('.caption').remove();
        $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
    };
} );
</script>
<?php } );

There is any hook to put them inside the lightbox?

There’s no hook within the lightbox gallery as the gallery img itself is generated by a script.

I don’t think the previously provided solution would work well if the $field you have outputs an unordered list rather than a simple text caption string. The filter snippet was made for simple text strings for captions, not for inserting HTML structure.

In that case, I think we need to do something else.

Try doing this:

Instead of inserting it as an attribute, lets hook it in on wpsp_inside_image_container as a content.

add_action('wpsp_inside_image_container',function(){
$field = get_field('your_acf_field_slug');
echo $field;
});

After hooking it in, we can modify the script to fetch your unordered list and append it as caption.

add_action( 'wp_footer', function () { ?>
<script>
	
jQuery( document ).ready( function( $ ) {
    $.featherlightGallery.prototype.afterContent = function() {
        var caption = this.$currentTarget.find('img').parent().prev();
        this.$instance.find('.caption').remove();
        $('<div class="caption">').html(caption).appendTo(this.$instance.find('.featherlight-content'));
    };
} );
</script>

<?php } );

After this, we may have to style it with CSS. Let me know once you’ve done this so I could check and help out with the CSS write up.