search

h5p / h5p-wordpress-plugin

Adds support for H5P Content in WordPress.
https://wordpress.org/plugins/h5p/
71 stars 74 forks source link

Doesn't load the contents including the images #56

Open kudumi opened 7 years ago

kudumi commented 7 years ago

Freshly installed and it doesn't load the images, even the editor of "Course Presentation type" doesn't load the tool's image (pictures attached) and also the uploaded *.h5p file doesn't load the images when it is viewed (it is just blank, pictures attached) and edit picture from H5p plugin also doesn't load the image, but the WordPress media library does load it's picture and even it can be edited.

https://h5p.org/sites/default/files/Screen%20Shot%202017-09-02%20at%208.28.56%20PM.png https://h5p.org/sites/default/files/Screen%20Shot%202017-09-02%20at%208.29.13%20PM.png https://h5p.org/sites/default/files/Screen%20Shot%202017-09-02%20at%208.37.43%20PM.png https://h5p.org/sites/default/files/Screen%20Shot%202017-09-02%20at%208.37.53%20PM.png https://h5p.org/sites/default/files/Screen%20Shot%202017-09-02%20at%208.41.14%20PM.png

icc commented 7 years ago

Could you open your browser's console(Ctrl+Shift+J in Chrome) and check which URL the images are trying to load from? They should appear as error messages when not loading. Check that the URL is correct and that the file permission is correct for the paths failing.

kudumi commented 7 years ago

There should be no issue with the file permission as I did sudo chown -R http:http /srv/http/wordpress even tried sudo chmod -R 777 /srv/http/wordpress

For an uploaded file: Top of the week (downloaded from h5p.prg)

The following highlighted in red

h5p.js?ver=1.9.1:359 GET http://192.168.1.40/wp-content/uploads/h5p/cachedassets/fc3d5a1c7be98a50704f525a79794dcdf5e91128.js 404 (Not Found) (anonymous) @ h5p.js?ver=1.9.1:359 each @ jquery.js?ver=1.9.1:2 each @ jquery.js?ver=1.9.1:2 H5P.init @ h5p.js?ver=1.9.1:356 (anonymous) @ h5p.js?ver=1.9.1:2136 c @ jquery.js?ver=1.9.1:2 fireWith @ jquery.js?ver=1.9.1:2 ready @ jquery.js?ver=1.9.1:2 H @ jquery.js?ver=1.9.1:2 h5p.js?ver=1.9.1:861 Unable to find constructor for: H5P.CoursePresentation 1.16 H5P.error @ h5p.js?ver=1.9.1:861 H5P.newRunnable @ h5p.js?ver=1.9.1:784 (anonymous) @ h5p.js?ver=1.9.1:132 each @ jquery.js?ver=1.9.1:2 each @ jquery.js?ver=1.9.1:2 H5P.init @ h5p.js?ver=1.9.1:92 (anonymous) @ h5p.js?ver=1.9.1:2136 c @ jquery.js?ver=1.9.1:2 fireWith @ jquery.js?ver=1.9.1:2 ready @ jquery.js?ver=1.9.1:2 H @ jquery.js?ver=1.9.1:2 h5p.js?ver=1.9.1:981 Uncaught TypeError: Cannot read property 'getCopyrights' of undefined at Object.H5P.getCopyrights (h5p.js?ver=1.9.1:981) at HTMLDivElement. (h5p.js?ver=1.9.1:166) at Function.each (jquery.js?ver=1.9.1:2) at init.each (jquery.js?ver=1.9.1:2) at Object.H5P.init (h5p.js?ver=1.9.1:92) at HTMLDocument. (h5p.js?ver=1.9.1:2136) at c (jquery.js?ver=1.9.1:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.9.1:2) at Function.ready (jquery.js?ver=1.9.1:2) at HTMLDocument.H (jquery.js?ver=1.9.1:2) H5P.getCopyrights @ h5p.js?ver=1.9.1:981 (anonymous) @ h5p.js?ver=1.9.1:166 each @ jquery.js?ver=1.9.1:2 each @ jquery.js?ver=1.9.1:2 H5P.init @ h5p.js?ver=1.9.1:92 (anonymous) @ h5p.js?ver=1.9.1:2136 c @ jquery.js?ver=1.9.1:2 fireWith @ jquery.js?ver=1.9.1:2 ready @ jquery.js?ver=1.9.1:2 H @ jquery.js?ver=1.9.1:2

for new Course presentation

jquery.js?ver=1.9.1:4 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/DroidSans.ttf b.expr.b.expr.filters.b.expr.filters.hidden @ jquery.js?ver=1.9.1:4 b.expr.b.expr.filters.b.expr.filters.visible @ jquery.js?ver=1.9.1:4 (anonymous) @ jquery.js?ver=1.9.1:3 s @ jquery.js?ver=1.9.1:3 wt @ jquery.js?ver=1.9.1:3 st @ jquery.js?ver=1.9.1:3 st.matchesSelector @ jquery.js?ver=1.9.1:3 filter @ jquery.js?ver=1.9.1:3 is @ jquery.js?ver=1.9.1:3 H5PEditor.CoursePresentation.appendTo @ VM181:53972 ns.processSemanticsChunk @ h5peditor.js?ver=1.9.1:231 ns.Form.processSemantics @ h5peditor-form.js?ver=1.9.1:89 (anonymous) @ h5peditor-library-selector.js?ver=1.9.1:166 ns.libraryRequested @ h5peditor.js?ver=1.9.1:85 success @ h5peditor.js?ver=1.9.1:134 c @ jquery.js?ver=1.9.1:2 fireWith @ jquery.js?ver=1.9.1:2 k @ jquery.js?ver=1.9.1:4 r @ jquery.js?ver=1.9.1:4 /wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/H5P.ttf?7pqlet:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/H5P.ttf?7pqlet /wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/DroidSans-Bold.ttf:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/DroidSans-Bold.ttf /wp-content/uploads/h5p/libraries/FontAwesome-4.5/fontawesome-webfont.woff?v=4.5.0:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/FontAwesome-4.5/fontawesome-webfont.woff?v=4.5.0 /wp-content/uploads/h5p/libraries/H5P.FontIcons-1.0/fonts/h5p.ttf?w3m2qr:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/H5P.FontIcons-1.0/fonts/h5p.ttf?w3m2qr /wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/H5P.woff?7pqlet:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/H5P.CoursePresentation-1.16/fonts/H5P.woff?7pqlet /wp-content/uploads/h5p/libraries/FontAwesome-4.5/fontawesome-webfont.ttf?v=4.5.0:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/FontAwesome-4.5/fontawesome-webfont.ttf?v=4.5.0 404 (Not Found) /wp-content/uploads/h5p/libraries/H5P.FontIcons-1.0/fonts/h5p.woff?w3m2qr:1 GET http://192.168.1.40/wp-content/uploads/h5p/libraries/H5P.FontIcons-1.0/fonts/h5p.woff?w3m2qr

icc commented 7 years ago

Try opening one of the files or images in a new browser window. Does the URL match the file system path? If so, it may be that your web server is blocking/hiding the resources from loading. You can check to see for any .htaccess files or try to check your web server's log file.

kudumi commented 7 years ago

None of the above link loads (404 error) but all those URL match with the local file path. You mean .htaccess of wordpress directory?

icc commented 7 years ago

Yes, or if there are any extra ones added to wp-content, uploads or similar folders. If you can't open the files in your browser it's most likely an issue with the web server setup or file permissions. What happens if you just upload a regular file via ftp or similar, are you able to view it in your browser?

Remember to check the permissions on the parent folders as well

kudumi commented 7 years ago

the problem was the path, wordpress was installed in a subfolder /srv/http/wordpress rather than the root folder i.e., /srv/http/

Wordpress does work very well under this subfolder but H5p doesn't. Wordpress does load all images and files with correct path i.e., http://192.168.1.40/wordpress/wp-content/.... but H5p plugin generates the path without subfolder "wordpress" as below and that is wrong http://192.168.1.40/wp-content/uploads/....

so, I installed the wordpress in the root directory i.e., /srv/http/ and everything works well

icc commented 7 years ago

That's strange, and you're certain the URL is correct under the Settings -> General page? Do you mind adding some debug code to check the path variables? If you add the following code and reload the page you should see the full path variable and the relative one. Add it to line 692 of the public/class-h5p-plugin.php file:

echo '<pre>'; print_r($url); echo '</pre>';

So that it looks like this:

      // Relative URLs are used to support both http and https in iframes.
      $url['rel'] = '/' . preg_replace('/^[^:]+:\/\/[^\/]+\//', '', $url['abs']);

echo '<pre>'; print_r($url); echo '</pre>'; 

      // Check for HTTPS
      if (is_ssl() && substr($url['abs'], 0, 5) !== 'https') {

Post your results here and remove the code when you're done.