-
Posts
-
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.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,
NikkoThis 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.
*/We can’t get this to work, we only need to make this open in a new tab:
Is there any way we can make this happen
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,
NikkoHi 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,
Nikkoas 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)
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');Hi,
Great, I’m glad that you got it working. Thanks @guenni007 for helping out :-)
Best regards,
Rikard
- You must be logged in to reply to this topic.