Support » Plugin: Simple Lightbox » Implement URL custom field

  • Resolved marianssen

    (@marianssen)


    Hi,

    I have a custom field set-up for media files (images), where I can insert a URL. I’ve managed to show the field on the front end, but I’m not able to figure out, how to insert the href link – since the {{item.code}} function always adds inline styling to the selected field. Is there a way, how to insert a field without the automatic inline styling? Could you please suggest on how to proceed?

    Regards,
    Marian

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Archetyped

    (@archetyped)

    Hi, are you wanting to add a link with the custom URL to the lightbox?

    If so, then a custom lightbox template tag is required to generate the link from the custom field’s value, as tags are rendered as DOM elements in the lightbox so that they can be properly updated for each item displayed in the lightbox. A link template tag is planned, but no release date is set.

    If not, please provide more details on what you’re wanting to do. Alink to a page that exhibits the issue you are experiencing would also be very helpful to evaluate your issue more fully.

    Hi,

    yes, that is right. I’ve created the custom field. In the controller.php file, I’m assigning this field in the $props_map array. Then, in the baseline layout.html template, I’m calling the object with {{item.koupiturl}}. This works correctly, and the field is shown.
    However, when I do it inside , the code gets messed up, since your jquery inserts inline span styles with the code.
    I’ve tried using PHP inside of the layout.html, but this does not get printed.

    Could you please direct me, on how to proceed with the custom template tag? Or how to echo this url field inside a href tag correctly?

    Thank you very much

    Plugin Author Archetyped

    (@archetyped)

    Hi, directly editing SLB’s code is not recommended as any modifications will be overwritten when the plugin is updated.

    That said, the basic approach would be to output a full <a href...> link element when the custom tag is rendered, not just the bare URL.

    For example:

    // Not recommended: Bare URL
    $url = 'http://...';
    
    //Recommended: Full Link Element
    $link = 'Click here';
    

    This would allow the link to be displayed in the lightbox’s layout without conflicting with SLB’s inner workings.

    Let me know if you have any other questions, and I’ll see what I can do.

    Thanks for the reply. I created another meta field, to which I copy the value from the first field along with the html href tags. Then I echo this second field in the lightbox, and it works correctly 🙂

    • This reply was modified 5 months, 1 week ago by marianssen.
    Plugin Author Archetyped

    (@archetyped)

    Awesome, glad to hear it 🙂

    Hello,

    I’m trying to do the same but I can’t get it. could someone explain to me the concrete steps please?

    I don’t manage well with php…

    thanks

    marianssen

    (@marianssen)

    Hi,

    you can actually create a custom template for the lightbox in your child theme. You should be able to find the details somewhere on the developers website. In this custom template I used the {{item.url}} shortcode to echo a custom url field created with ACF for media files (you have to substitute the “url” part in item.code with the ACF field name).

    When trying to echo the shortcode within html, it did not work.

    <a href="{{item.code}}">Button</a>

    The problem was, that the plugin wraps the shortocode in span tags, so it broke the code within the my a href code.

    So you have 2 options:
    1. in the custom URL ACF field, enter the whole html code including your link (e.g. BUTTON).
    2. The work around is to create another ACF custom field and a function in functions.php. This functions servers to copy the value from the “url” field and add the required HTML a href tags automatically. I actually have another field set up, where I can change the text of the button. Here is the function in my functions.php.

    /*----------------------------------------------------------------------------*
     	* Auto-populate end_url media custom field, if URL custom field is filled
     	*----------------------------------------------------------------------------*/
        function update_end_url( $value, $post_id, $field ) {
    
           $end_url = get_post_meta( $post_id, 'updatedurl', true );
           $start_url = get_post_meta( $post_id, 'url', true );
           $text_tlacitka = get_post_meta( $post_id, 'text_koupit', true );
    
           if ($end_url == '' && $start_url == '') {
              $value = '';
           }
            elseif ($end_url != '' && $start_url == '') {
              $value = '';
           }
            elseif ($end_url == '' && $start_url != '') {
              $value = '<a class="koupitbutton" href="'. $start_url . '" target="_blank">' . $text_tlacitka . '</a>';
           }
            elseif ($end_url != $start_url) {
              $value = '<a class="koupitbutton" href="'. $start_url . '" target="_blank">' . $text_tlacitka . '</a>';
           }
    
           return $value;
    
        }
        add_filter('acf/update_value/name=updatedurl', 'update_end_url', 10, 3);

    updatedurl – final url field
    url – url field
    text_koupi – text between the and tags

    I actually hid the updatedurl ACF field from the admin, so it’s not confusing for the administrators.

    I hope this helps.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.