[Support request] Add Text on Image lightbox

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Add Text on Image lightbox

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #26858
    Andreas
    Participant

    Hi,

    There is any way when i have enabled the image lightbox to display some more info of the post there?

    If there is any chance for acf fields or simple text please i would really apreciate that if is possible

    #26868
    elvin
    Moderator

    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. 🙂

    #26873
    Andreas
    Participant

    Hi Elvin i saw this post,

    Yes is something like that except of custom text in each post.

    #26877
    elvin
    Moderator

    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 } );
    #26879
    Andreas
    Participant

    Hey Elvin that was epic !

    It displays the caption with the custom field but not in the lightbox but insted over the image in the related posts

    You can see here , this li elements are the custom fields – > https://active-energy.bee.backtobuzz.com/v1/trinasolar/tsm-deg18mc-20ii-475wp-505wp/

    There is any hook to put them inside the lightbox?

    Once again thank you a ton man!

    #26900
    elvin
    Moderator

    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.

    • This reply was modified 2 months, 3 weeks ago by elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.