profile pictures blocked

Hello,

Could you please help me with the following problem:

I have added the following code to index.php to get a "loading" picture to show as elgg is loading:

<head>
<link rel="stylesheet" href="loading.css" />
<script src="loading.js"></script>
 
</head>
 
<body>
<div class="se-pre-con"></div>
</body>

The code works correctly, and the loading image is showing while it loads, and it fades over into the elgg site.

But, the elgg site will no longer load the profile images, and the thumbnails. The outer border is also white making it look like the site is in an iframe. All other things load and function correctly.

What could be causing this? How could that code block the retrieval of the images from the data folder and cache? 

  • Hello,

    Thanks for your response. You've given me a lot to think about, which should help.

    Thinking about what you said about a network analysis tool, I decided to look at Chrome's developer's tools while loading my elgg site. It gave me these very interesting jquery error messages:

    GET https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.5.0/modernizr.js 404 ()
    jquery.js:1 Uncaught SyntaxError: Unexpected token <
    jquery-ui.js:1 Uncaught SyntaxError: Unexpected token <
    require_config.js:1 Uncaught SyntaxError: Unexpected token <
    require.js:1 Uncaught SyntaxError: Unexpected token <
    elgg.js:1 Uncaught SyntaxError: Unexpected token <
    lightbox.js:1 Uncaught SyntaxError: Unexpected token <

    All with red X next to them. Do you know what "uncaught"  and "unexpected token" means?

  • Its saying modernizr.js is taking 170ms to load. So, I adjusted it to: https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js

    Now I'm getting the following error:

    modernizr.js:815 [Deprecation] Application Cache is deprecated in non-secure contexts, and will be restricted to secure contexts in M69, around September 2018. Please consider migrating your application to HTTPS, and eventually shifting over to Service Workers. See https://goo.gl/rStTGz for more details.

    I have no idea what its talking about!

  • After removing my loading script, all errors above have gone, except this new error:

    Deprecated in Elgg undefined: lightbox.js library has been deprecated. Avoid using elgg_load_js("lightbox.js"), use elgg/lightbox AMD module instead

     

    I can also see that many of my js scripts are taking over 500ms to load.

  • Since Elgg 2.2 the lightbox code is provided by the "elgg/lightbox" AMD modul and no longer as lightbox.js library.

    What to do to fix the deprecation notice depends on how your plugin(s) make use of the Elgg lightbox so far.

    The short term "solution" would be to do nothing for now as it's just a deprecation warning and (not yet) an error. But sooner or later the plugin won't work anymore without a proper fix (i.e. don't expect it to work on Elgg 3 without fixing it).

    The easiest fix works in all cases where a view is just to be displayed in a lightbox popup with the "elgg-lightbox" class added in the "link-class" attribute. In these cases you can simply remove the lines that load the lightbox js and css. So, you would only have to remove the lines

    elgg_load_js('lightbox');

    and

    elgg_load_css('lightbox');

    in the code. This works now because Elgg loads the lightbox AMD module and css on all pages by default (whereas you had to load them specifically where needed in the past). So, you could simply search for these lines, remove them and see if everything still works.

    In more complicated cases you might need to rewrite your code (e,g. create an AMD module of your present JS code with the elgg/lightbox code as a requirement of the module) - see http://learn.elgg.org/en/stable/guides/javascript.html#module-elgg-lightbox. Or you could directly use the colorbox API (as Elgg lightbox is basically a wrapper for the colorbox code). But it's quite impossible to provide a general solution in these cases. If you would have trouble here, you would need to ask specifically.

    For the time being I would suggest to inspect the code of all your plugins if they make use of the lightbox of Elgg (and try if it still works by simply removing the corresponding elgg_load_js/elgg_load_css lines). And also to inspect the plugins for any JS code not yet implemented as AMD module. An indication for the old way would be any elgg_load_js() function usage (as opposed to elgg_require_js() to load an AMD module). Or if you find the <script> tag. Sometimes, it might still makes sense / is needed to make use of elgg_load_js and <script> tags. But if possible the conversion to AMD modules is better.

    You might want to look for the latest releases available for all your plugins (if you haven't done yet). Maybe the AMD modules approach is already used then. Or you might get in contact with the plugin developers for plugins where this is not yet the case to ask for an update. If this doesn't help (plugin no longer supported) I'm afraid the only long-term solution would be to try fixing it on your own.

  • Hello,

    Just to get some clarity:  the lightbox.js deprecation code was returned when I had removed my loading script. But when my loading script is included, there are error messages for jquery.js, jquery-ui.js, require_config.js, require.js, elgg.js, and lightbox.js, as I mentioned above. So, I dont think the lightbox.js would necessarily be the one that is conflicting with my script. Or are you sure that it is that one, and not any of the others? 

    It's interesting, though, that lightbox has something to do with icons, and the profile icons are missing when my loading script is included. But I dont know if this means its the lightbox.js that is causing the conflict. If it is, why would there be all those other js error messages?

  • You are pulling in a prehistoric version of jQuery, which breaks everything else.

    First of all, look in your browser developer tools and identify what the problem is: does the server take too long to respond, or does the page take too long to draw? If the former, you can add as many loading scripts as you want, they wont' help you.

    Slow server response can be a hard nut to crack, but for the very least, read the performance documentation and follow the tips there: enable all the caches, add simplecache symlink, install memcached etc. 

    Try a vanilla install (disable all third party plugins) and see if the response time improves. If it does, then debug your plugins - a badly written query might be pulling in thousands of records from the databse clogging up resources. If it doesn't, then deal with your hosting people.

  • Ismayil,

    You have put me on the right track.

    I deactivated all plugins, and the site is super fast! Ugly, and a mess, but fast! So I suppose I now have to add one plugin at a time to find out which one is causing the problem.

    I'll let you know when I discover it...

  • Well, the unexplainable has happened!

    Now its loading fast, with all plugins loaded! I activated them all, one by one, testing the site after each one. None made it slower, and the site is loading fast with all plugins! I'm baffled!

  • Well, I would think I suggested to test out if some plugin causes the slowness already in my postings. I also did tell you that you can't mix up different versions of jquery to be used at the same time.

    If the slowness has gone now even with all plugins still in use - but only after deavtivating and then re-activating them again - the likely reason is that you had some buggy code still in the Elgg caches that you might had already removed or fixed but you haven't flushed the cache after you changed it. If you make any modifications, the first thing I would suggest is to NOT do that on your production site without testing it properly on some separate test installation first. And if you make any changes on your site you always need to flush the cache afterwards for the changes to take effect (or if you would add a modified plugin the cache flushing would happen automatically if you disable/enable this plugin or any other plugin). When changing the code - on your test installation - it might also be useful to do that with cache settings on the advanced site settings page disabled at least during development to see you changes right away without the need to flush the cache all the time.

  • Thanks for your help.

     

    Strangely, since these things, the footer on the login page will not load. I had a link in the footer for visitors who want to join. It was working perfectly. Now it is not showing. I wrote it in footer.php. So now footer.php is not loading. I have uploaded it again numerous times, but no difference.

    Very strange.