Related Posts Pro Help

[4gcoukParticipant]

Hi,

We are using your Related Posts Pro plugin our WordPress website with the Ribbon theme.

We’re having a little issue with the integration because when enabled the plugin makes our articles images go to the right hand side of the screen. The problem only seems to happen on Firefox and the issue disappears when the plugin is disabled.

I’ve attached a screenshot showing the problem.

Best regards,
Simon Thomas
4G.co.uk LTD

[Ernest MarcinkoKeymaster]

Hi!

Could you please link me to a page where this issue is present? It’s probably a styling or a javascript problem. I might be able to tell if I see it live.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[4gcoukParticipant]

Hi Ernest,

It seems to happen on all our content pages, but only appears in Firefox (35.01) and it doesn’t happen every time a page is rendered (perhaps 1 in 4 times). It only affects the headline image for the articles.

An example of the type of page would be:
http://www.4g.co.uk/4g-news/news-features/top-10-reasons-switch-3g-4g_300111782.html
http://www.4g.co.uk/4g-news/news-features/bts-4g-service-need-know_30017983.html
http://www.4g.co.uk/4g-news/phones/coventry-set-get-boost-4g-speeds_300111899.html

When we disable the Related Posts Pro plugin the issue disappears entirely.

[Ernest MarcinkoKeymaster]

Hi!

Thanks for the links.

I’ve tried each of them a couple dozen times, but it always appears all right. I also tried CTRL + SHIFT + R for no-cache refreshing, but still working as expected.

Just to make sure it’s not my firefox only, I’ve also tried with a win 7 virtual machine with the latest firefox freshly installed, but I get the same results – the images are showing correctly.

Would you please try completely clearing your cache and cookies on that site? I’m suspecting this might be related to that as I was unable to replicate the issue on two separate installs.
You should also try on a different computer if you have one accessible.

Let me know how it goes!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[4gcoukParticipant]

I’ve already cleared my cache numerous times and also tried on two different computers. Happens on both.

[Ernest MarcinkoKeymaster]

Hi!

Could you please check the error log on the frontend (F12 opens the console, the refresh), if it shows anything. Mine was empty, didn’t show any errors unfortunately.

Also, the your system specs, operation system version, screen resolution, list of plugins installed in firefox might help.

Are you logged in by any chance? Is the same if you are not logged in on your site? WordPress outputs different html for logged in and non logged in users.

In the meantime I tried multiple web proxies, another computer, 5 VPNs but it’s still ok for me. I honestly have no idea what’s the difference and why is it happening on your side.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Ernest MarcinkoKeymaster]

I just checked with browserstack as well, here are the results for different systems: http://www.browserstack.com/screenshots/8e21e2cf1b582b84050f0d287a147440dc24e2ef

Do you see anything unusual on those screenshots? Those screens only show the first picture of course, because of the image lazy load script.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[4gcoukParticipant]

Hi Ernest,

Thanks for the help so far and understand such issues can be difficult to test and debug.

I’ve just now checked it myself a third computer and the issue was replicated after clicking through around 5 articles. I’ve attached what I think is the log you requested. Apologies if it isn’t what you wanted.

Two of the computers have resolution 1680*1050 on Windows 7 Home Premium. While, the other on the same operating system with a resolution of 1366*768. As part of the testing process we disabled all Firefox plugins.

Hope that helps,
Simon

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Indeed, they are extremely hard. I’ve tried to set up another virtual mashine with windows7 and tried these resolutions, but still no luck.
I’ve done some research in the meantime, and it turns out this is not going to be a direct CSS issue, since CSS is rendered the same way each and every time, so there is no way that some refreshes work, some not. Let’s rule out CSS as the direct cause for now. The next in line is javascript then.

Since I’m still unable to replicate the issue, I have an idea which should solve this once and for all. I’m going to instruct you to make a modification to a certain file in the plugin. We are going to put a 2 second delay to the plugin slider loader script. This way, if this was a synchronization issue, then 2 seconds after the page load should be more than enough for any other script to do it’s things.

Open up the wp-content/plugins/related-posts-pro/includes/hooks.php file and right at the beginning at lines 11-36 you should see this code:

<?php echo $scope; ?>(document).ready(function ($) {
    $('div[id^="relatedpostspro_<?php echo $id; ?>_"]').relatedpostspro({
        "node": null,
        "elements": ".rpp_item.rpp_visible",
        "elementsAll": ".rpp_item",
        "visibleClass": "rpp_visible",
        "fadeoutClass": "rpp_fadeout",
        "titleSelector": ".rpp_title",
        "loadingSelector": ".rpp_cssloading_container",
        "relevanceSelector": ".rpp_relevance",
        "type": "<?php echo $options['layout_type'] ?>",
        "isotopeLayout": "<?php echo $options['isotope_type']; ?>",
        "transitionAnimation": "<?php echo $options['transitioning_type']; ?>",
        "initialFilter": "post_type",
        "autoplay": <?php echo ($options['autoplay']==1?"true":"false"); ?>,
        "autoplayTime": "<?php echo $options['autoplay_time']; ?>",
        "overrideFilter": <?php echo ($options['combine_filters']==1?"true":"false"); ?>,
        "minShow":  <?php echo $options['items_count']; ?>,
        "defSortValue": "<?php echo $options['default_sorting'] ?>",
        "defSortOrder": "<?php echo $options['default_sorting_order'] ?>",
        "showSettings": <?php echo $options['show_options_visibility'] ?>,
        "showSearchByDefault": <?php echo $options['show_search_filter'] ?>,
        "exactSearchMatchOnly": <?php echo $options['search_exact_matches_only'] ?>,
        "dots": true
    });
});

Now, we need to add a timeout to the inner function to wait after the document ready event fires. Change that code snippet to this:

<?php echo $scope; ?>(document).ready(function ($) {
  setTimeout(function(){
    $('div[id^="relatedpostspro_<?php echo $id; ?>_"]').relatedpostspro({
        "node": null,
        "elements": ".rpp_item.rpp_visible",
        "elementsAll": ".rpp_item",
        "visibleClass": "rpp_visible",
        "fadeoutClass": "rpp_fadeout",
        "titleSelector": ".rpp_title",
        "loadingSelector": ".rpp_cssloading_container",
        "relevanceSelector": ".rpp_relevance",
        "type": "<?php echo $options['layout_type'] ?>",
        "isotopeLayout": "<?php echo $options['isotope_type']; ?>",
        "transitionAnimation": "<?php echo $options['transitioning_type']; ?>",
        "initialFilter": "post_type",
        "autoplay": <?php echo ($options['autoplay']==1?"true":"false"); ?>,
        "autoplayTime": "<?php echo $options['autoplay_time']; ?>",
        "overrideFilter": <?php echo ($options['combine_filters']==1?"true":"false"); ?>,
        "minShow":  <?php echo $options['items_count']; ?>,
        "defSortValue": "<?php echo $options['default_sorting'] ?>",
        "defSortOrder": "<?php echo $options['default_sorting_order'] ?>",
        "showSettings": <?php echo $options['show_options_visibility'] ?>,
        "showSearchByDefault": <?php echo $options['show_search_filter'] ?>,
        "exactSearchMatchOnly": <?php echo $options['search_exact_matches_only'] ?>,
        "dots": true
    });
  }, 2000);
});

Hopefully I didn’t make any mistakes. The two snippets only differ in two lines.

After making the change make sure you clear every cache including browser and site. I’m expecting one of two possibilities after implementing this:

1. The problem goes away
2. The problem will appear after each page load

Let me know how it goes 😉

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[4gcoukParticipant]

Hey,

I implemented what you suggested. Unfortunately, the problem still remains.

I would just browse around this section and view maybe the first 2 pages and see if it happens. Sometimes it happens very infrequently. Other times it can happen twice in a row. Doesn’t seem to be any consistency.

http://www.4g.co.uk/4g-guides/

[Ernest MarcinkoKeymaster]

Well, that means it’s not the javascript either.

So it’s not the CSS because first of all there is not a single rule in the plugin CSS file that can apply to any other content than the plugin itself. Second of all it’s rendered the same way each and every page refresh.

But it’s not the javascript either, because no events are fired for at least 2 seconds and if I understand correctly the issue appears almost instantly, right after the page is loaded.

I’ve spent an hour refreshing the browsers on 2 machines like 500 times, but every single time the page is rendered correctly. I’ve tried lower, higher resolutions, clicking randomly, refreshing, interrupting the requests, but nothing at all.

I’m afraid that this is going to be something else. The fact that any computer in my location renders the page correctly at any given time, and for you is the opposite I suspect there is something wrong with the connection either on the server side or somewhere inbitween. What I mean is that either one or more of the CSS or javascript files doesn’t load, or loads incorrectly, or it’s a cache miss or something.

I honestly never encountered a strangest issue ever, and I honestly have no idea why the page is different for us.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[4gcoukParticipant]

Okay thanks for your help.

It’s a shame because it’s such a great looking plugin with a great look. I’ll check with the next release of Firefox if the issue gets resolved our end. I’ve also tried replicating the issue in a different location and happens too very strange.

Thanks,
Simon

[Author]

Posts