nathanmfarrugia

Forum Replies Created

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter nathanmfarrugia

    (@nathanmfarrugia)

    Thanks Alex, that worked!

    Thread Starter nathanmfarrugia

    (@nathanmfarrugia)

    Hi Alex,

    Sorry, I forgot to mention that I’m not using widgets at all.

    I’m using the Smart Countdown shortcode, but only on particular pages. Most of the website doesn’t use the countdown, so it’s a bit wasteful of me to load the scripts on those pages too.

    I would’ve thought it was one, maybe two functions I would need to dequeue. Is that not the case?

    Regards,
    Nathan

    Thread Starter nathanmfarrugia

    (@nathanmfarrugia)

    Thanks Frank!

    That should be all I need to fix my script and resolve the conflict. Makes sense now.

    A big fan of both Autoptimize and WPSSO, by the way!

    Nathan

    Thread Starter nathanmfarrugia

    (@nathanmfarrugia)

    Sure!

    The code above is stored as a separate file: localStorage-fonts.script.

    It’s called from my header.php:

    <!--Fast loading of WOFF2 fonts in localstorage -->
<?php // _e(file_get_contents('/home/nathanmf/public_html/wp-content/themes/nathanv2/localStorage-fonts.script')) ?>

    Unfortunately this script is hooked into a function where it fires after Autoptimize minifies JS. I tried to unhook it for you, but it won’t work at all (and then my fonts simply won’t load). So here is the function that loads the script after Autoptimize has processed the JS. This function also preloads a couple of images for me.

    function custom_autoptimize_html_after_minify($content) {
	$search = '<head>';
	$replace = '';
	$is_home = (function_exists('is_front_page') && is_front_page()) || is_home();
	if ($is_home) $replace .= '<img src="https://cdn.nathanmfarrugia.com/wp-content/uploads/2014/03/nathanheaderv3.jpg" style="display: none !important;" /></script>';
	if ($is_home) $replace .= '<img src="https://cdn.nathanmfarrugia.com/wp-content/uploads/2014/04/blur.jpg" style="display: none !important;" /></script>';
	$replace .= file_get_contents('/home/nathanmf/public_html/wp-content/themes/nathanv2/localStorage-fonts.script');
	$replace = $search . $replace;
	$content = str_replace($search, $replace, $content);
	$search = '</body>';
	$replace = '<script>jQuery(".home.page .vc_span2.wpb_column.column_container.col.padding-2-percent").eq(3).addClass("clearOnUnder1000");</script>';
	$content = str_replace($search, $replace, $content);
	return $content;
}

add_filter('autoptimize_html_after_minify', 'custom_autoptimize_html_after_minify', 10, 1);

    If I disable this function, the add head attributes tag works fine. But with this function enabled, the add head attributes tag seems to override it. So my website still loads, but the images aren’t preloaded and my fonts won’t load.

    And then we have the debug error as mentioned:
    Warning: Cannot modify header information - headers already sent by (output started at /home/nathanmf/public_html/wp-content/plugins/post-types-order/include/cpto-class.php:3) in /home/nathanmf/public_html/wp-content/themes/nathanv2/functions.php on line 348

    Line 348 refers to the function I quoted above.

    The website in question:
    https://nathanmfarrugia.com

    Thanks for looking into it, much appreciated! Would be at least interesting to know what exactly is causing the conflict, even if it can’t be fixed.

    Nathan

    Thread Starter nathanmfarrugia

    (@nathanmfarrugia)

    Sorry, that code didn’t wrap on this page properly. Here it is as normal text:

    <script>function loadFont(a,b,c,d){function e(){if(!window.FontFace)return!1;var a=new FontFace(“t”,’url(“data:application/font-woff2,”) format(“woff2”)’,{}),b=a.load();try{b.then(null,function(){})}catch(c){}return”loading”===a.status}var f=navigator.userAgent,g=!window.addEventListener||f.match(/(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/)&&!f.match(/Chrome/);if(!g){var h={};try{h=localStorage||{}}catch(i){}var j=”x-font-“+a,k=j+”url”,l=j+”css”,m=h[k],n=h[l],o=document.createElement(“style”);if(o.rel=”stylesheet”,document.head.appendChild(o),!n||m!==b&&m!==c){var p=c&&e()?c:b,q=new XMLHttpRequest;q.open(“GET”,p),q.onload=function(){q.status>=200&&q.status<400&&(h[k]=p,h[l]=q.responseText,d||(o.textContent=q.responseText))},q.send()}else o.textContent=n}}</script>
    <script>
    loadFont(‘fonts’, ‘https://cdn.nathanmfarrugia.com/wp-content/themes/nathanv2/css/fonts/woff.css&#8217;, ‘https://cdn.nathanmfarrugia.com/wp-content/themes/nathanv2/css/fonts/woff2.css&#8217;);
    </script>

    Thread Starter nathanmfarrugia

    (@nathanmfarrugia)

    Apologies for not testing this, thanks for the suggestion.

    I found no issues currently – at least not what I was describing. Perhaps a recent theme update has resolved this. However I have noticed that it blocks at least one of my fonts from loading. My fonts are called through localstorage.

    With the head tag suggested above, the font does not appear. No errors are generated, debugging or in Chrome’s Developer Tools. If I revert to the normal <head> tag, the font displays correctly.

    If you’re curious, here is the localstorage script I use, which might be conflicting with the head tag somehow:

    <script>function loadFont(a,b,c,d){function e(){if(!window.FontFace)return!1;var a=new FontFace("t",'url("data:application/font-woff2,") format("woff2")',{}),b=a.load();try{b.then(null,function(){})}catch(c){}return"loading"===a.status}var f=navigator.userAgent,g=!window.addEventListener||f.match(/(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/)&&!f.match(/Chrome/);if(!g){var h={};try{h=localStorage||{}}catch(i){}var j="x-font-"+a,k=j+"url",l=j+"css",m=h[k],n=h[l],o=document.createElement("style");if(o.rel="stylesheet",document.head.appendChild(o),!n||m!==b&&m!==c){var p=c&&e()?c:b,q=new XMLHttpRequest;q.open("GET",p),q.onload=function(){q.status>=200&&q.status<400&&(h[k]=p,h[l]=q.responseText,d||(o.textContent=q.responseText))},q.send()}else o.textContent=n}}</script>
<script>
	loadFont('fonts', 'https://cdn.nathanmfarrugia.com/wp-content/themes/nathanv2/css/fonts/woff.css', 'https://cdn.nathanmfarrugia.com/wp-content/themes/nathanv2/css/fonts/woff2.css');
</script>

    Regards,
    Nathan

    Ah, it was my parent theme!

    The developer gave me this to add to my functions.php:

    function nectar_after_setup () {
    remove_action( 'wp_head', 'add_opengraph', 5 );
}
add_action('after_setup_theme', 'nectar_after_setup");

    Thanks for your help, js!

    Hi JS,

    I have purchased the Pro version for both my websites now.

    See this page, debugging enabled:
    https://thrilleredge.com/9-special-ops-secrets-for-seeing-in-the-dark/

    The featured image I’m using is media id 1891. it is 1600 x 603 pixels.

    My minimum size is now set to 800 x 400, no cropping.

    I receive errors for several images but no error for this image. Having said that, it doesn’t show as an option when I try to share on Facebook. Only a few post images do.

    I also have specific large images set for my home page, https://thrilleredge.com. This image is about 2000 x 1000 pixels. Media ID is 692.

    It does not show as an option when sharing on Facebook. I’ve tried setting the URL in the NGFB panel, and I’ve also tried the media ID number. Neither have any effect.

    In the NGFB settings, I have a Default Image ID set for the same image, 692. Just in case a page has no decent image.

    I’ve disabled the CDN and the minify plugin for now. Thanks for taking a look, JS!

    Nathan

    Hi js,

    Actually it is recognizing featured images now.

    Just to clarify, when setting minimum image dimensions in NGFB settings, how does the Crop checkbox function?

    I don’t want NGFB to crop the image down to the minimum dimensions I’ve set, I just want it to be a minimum requirement. Is that how this works?

    For example, I’ve set mine to 700W x 300H. But I don’t want my taller images to be forcibly cropped down to 300 pixels in height. If they’re taller, then all the better.

    Thanks!

    Thanks for the clarification, js.

    This means that NGFB is ignoring the featured image on all my pages, posts and portfolio items. This might be an issue with the theme so I’ll look into it. Thanks!

    Nathan

    Hi JS,

    I use NGFB pro and I’d really like to have the option to suppress these. On some WordPress pages I receive about 20 of your warnings whenever I update the post. Also for websites that I run for other users who are less technically inclined, they think these are errors or viruses and freak out.

    I have plenty of large images that NGFB uses, but I still get warnings for smaller images on the page. It’s a bit of a problem when the page has several dozen images.

    Perhaps an option to suppress the warnings as long as NGFB has found > 0 image with sufficient dimensions?

    Thanks!
    Nathan

Viewing 11 replies - 1 through 11 (of 11 total)