Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 23, 2023 at 1:01 pm #1423400
    whdsolutions

    Masonary Gallery
    How do we have only one image open custom link in a new tab. All the rest are to stay within https://localcleaningservices-co-uk.stackstaging.com/xxx
    The ‘Bird and Pest Control’ link.

    October 23, 2023 at 4:37 pm #1423440
    Nikko

    Hi whdsolutions,

    Can you try the solution posted on this thread: https://kriesi.at/support/topic/portfolio-items-wont-open-in-a-new-window-from-the-masonry-grid/
    Hope it helps.

    Best regards,
    Nikko

    October 24, 2023 at 9:01 am #1423519
    whdsolutions

    I tried this and it does not work.

    October 24, 2023 at 9:03 am #1423520
    whdsolutions

    I have deleted the code now as it is uneccessary if not working.

    October 24, 2023 at 9:06 am #1423522
    whdsolutions

    This is what is in Enfold Child: Theme Functions (functions.php)

    <?php
    function masonry_links () {
    ?>
    <script>
    window.addEventListener(‘DOMContentLoaded’, function() {
    (function ($) {
    $(document).ready (function () {
    var url = new RegExp(location.host);

    $(‘.av-masonry-entry’).each(function () {
    if( ! url.test($(this).attr(‘href’)) ) {
    $(this).attr(‘target’, ‘_blank’);
    }
    });
    });
    }) (jQuery);
    });
    </script>
    <?php
    }
    add_action (‘wp_footer’, ‘masonry_links’);

    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */

    • This reply was modified 1 year, 2 months ago by whdsolutions.
    October 25, 2023 at 10:22 am #1423662
    whdsolutions

    We can’t get this to work, we only need to make this open in a new tab:

    Screenshot-2023-10-25-102058

    Is there any way we can make this happen

    October 25, 2023 at 1:13 pm #1423686
    Nikko

    Hi whdsolutions,

    Can you give us temporary admin access on the staging site? so we can try to check on the issue further.

    Best regards,
    Nikko

    October 25, 2023 at 2:45 pm #1423693
    whdsolutions

    Of course

    October 26, 2023 at 11:18 am #1423763
    Nikko

    Hi whdsolutions,

    Thanks for giving us admin access.
    I have made the changes on functions.php of your child theme, please review your website.

    Best regards,
    Nikko

    October 28, 2023 at 2:39 pm #1423968
    Guenni007

    as far as I understood it, only the one link should open in a new tab. The others should open on the same page.

    so maybe use instead:

    function open_custodiapestcontrol_links(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
    (function($) {     
        $('.av-masonry-entry[href*="custodiapestcontrol"]').attr('target', '_blank');
    })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'open_custodiapestcontrol_links');

    or – if you like to open all external links ( links that have a different domain ) in a new tab ( with some exceptions like mailto etc. )
    use:

    function open_external_links_in_newtab(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
    (function($) {
      var url = window.location.origin;
      $('a').not('a[href*="'+url+'"], a[href*="mailto:"], a[href^="#"], a[href*="tel:"], a[href*="javascript:;"] ').attr({
        'target':'_blank',
        'rel': 'noopener',
      })
    })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'open_external_links_in_newtab');

    (remove rel attribute if you do not like to set)

    October 28, 2023 at 2:59 pm #1423969
    Guenni007

    There is one small catch – both Nikko’s and my solution. Masonries that load further elements with the More Link are not affected by this. You would then have to add attributes, e.g. with MutationObserver, at the moment of entry into the DOM.

    f.e. ( in this case for all links in a Masonry )

    function open_masonry_entries_in_new_tab(){
?>
<script>
(function($) {
  MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  var observer = new MutationObserver(function() {
    $("a.av-masonry-entry").attr("target", "_blank");
  });
  observer.observe(document, {
    subtree: true,
    childList: true
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'open_masonry_entries_in_new_tab');
    October 30, 2023 at 2:37 pm #1424132
    whdsolutions

    Works a treat – Thank you so much!

    October 30, 2023 at 5:26 pm #1424157
    Rikard

    Hi,

    Great, I’m glad that you got it working. Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.