[Support request] H5P snippet using custom CSS file shows generatepress URL at top of screen

Home Forums Support [Support request] H5P snippet using custom CSS file shows generatepress URL at top of screen

Home Forums Support H5P snippet using custom CSS file shows generatepress URL at top of screen

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2376222
    dkrgen

    Hello! I am using the H5P plugin which so far works very well with generatepress.

    However, H5P’s method of customizing fonts is to add a PHP handler script, and to upload an H5P static css file, as using Simple CSS or Additional CSS is not recommended.

    I got the PHP handler script from here:
    https://h5p.org/documentation/for-developers/visual-changes

    I added the this script to the Snippets plugin, set to “run snippet everywhere”:
    function MYPLUGIN_alter_styles(&$styles, $libraries, $embed_type) {
    $styles[] = (object) array(
    // Path must be relative to wp-content/uploads/h5p or absolute.
    ‘path’ => bloginfo(‘template_directory’) . ‘/custom-h5p.css’,
    ‘version’ => ‘?ver=0.1’ // Cache buster
    );
    }
    add_action(‘h5p_alter_library_styles’, ‘MYPLUGIN_alter_styles’, 10, 3);

    I uploaded my custom H5P css file to this location:
    /public_html/wp-content/uploads/h5p/custom-h5p.css

    RESULTS
    The custom H5P fonts appeared correctly, both in administrative and front-end views.

    However, certain pages (including admin and front-end) also show for a split second the following link at the top of the screen:
    https://mywebsite.com/wp-content/themes/generatepress

    TROUBLESHOOTING
    I uploaded a blank CSS file which took away my custom fonts, but the link still shows up.

    I disabled the h5p handler snippet, and the link went away. So the problem is with the snippet.

    HELP
    Is there anything I should be doing with the snippet or the css file location to make it work properly with generatepress?

    Happy to provide credentials and specific URLs if needed.

    Thank you!

    #2376297
    David
    Staff
    Customer Support

    Hi there,

    can i see the site where the link is appearing ?

    #2376476
    dkrgen

    Sure, it is under development, providing credentials below…

    Correction: the front-end view of the link is not temporary, as you’ll see in the link below.

    #2377092
    David
    Staff
    Customer Support

    I assume if you remove that H5P snippet then the URL goes away ?

    #2377337
    dkrgen

    That is correct.

    #2377382
    David
    Staff
    Customer Support

    Does that developer provide support ?
    As we would need to know what this h5p_alter_library_styles hook is doing.
    It shouldn’t be returning anything inside the post content.

    #2379024
    dkrgen

    Thanks David. It’s very difficult to get help from H5P but here’s what I learned. The bloginfo function was the culprit, causing the generatepress link to appear at the top of the page.

    They advised that I use a different wordpress function. This may not be in your scope to help, but if not please refer me, I’m happy to hire someone.

    As per their advice, I used the plugin_dir_url instead of bloginfo. I moved the CSS file into this location:
    /public_html/wp-content/plugins/h5p/admin/styles

    This results in no error, but the fonts don’t get updated either. Perhaps I’m having trouble placing the CSS file in the correct folder, or referring to it properly? I’m at a loss and very grateful for any advice that could point me in the right direction…

    /**
     * Allows you to alter which stylesheets are loaded for H5P. This is
     * useful for adding your own custom styles or replacing existing once.
     *
     * The path can be relative to wp-content/uploads/h5p, so
     * 'path' => '/mystyles.css',
     * would try to load wp-content/uploads/h5p/mystyles.css
     *
     * The path can be absolute, so
     * 'path' => 'http://mydomain.org/custom-h5p-styling.css',
     * would to try to load the styles from the URL
     *
     * The path can be retrieved using WordPress functions, so for instance
     * 'path' => plugin_dir_url( __FILE__ ) . 'styles/general.css',
     * will try to load styles/general.css inside this plugin's folder
     *
     * @param object &styles List of stylesheets that will be loaded.
     * @param array $libraries The libraries which the styles belong to.
     * @param string $embed_type Possible values are: div, iframe, external, editor.
     */
    function h5pmods_alter_styles(&$styles, $libraries, $embed_type) { 
        $styles[] = (object) array( 
            /*
             * Path can be relative to wp-content/uploads/h5p or absolute or set using
             * WordPress functions
             */
            'path' => plugin_dir_url( __FILE__ ) . 'styles/custom-h5p.css', 
            'version' => '?ver=1.3.7' // Cache buster
        ); 
    } 
    add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);
    #2379739
    David
    Staff
    Customer Support

    Where is the style sheet saved ?

    #2379894
    dkrgen

    Okay, I got it to work. I just had to figure out how to interpret the comments in the above code snippet, and get the file location to match the path function called by the hook. I had to remove the [ plugin_dir_url( __FILE__ ) . ] function as I couldn’t figure out what path it was pulling up.

    Still a mystery to me how their hook works, but an H5P contributor pointed me here if anyone’s interested:
    https://github.com/h5p/h5pmods-wordpress-plugin/blob/master/h5pmods.php#L115

    Code that worked when css file was uploaded into the folder /wp-content/uploads/h5p:

    function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
      $styles[] = (object) array(
        /*
         * Path can be relative to wp-content/uploads/h5p or absolute or set using
         * WordPress functions
         */
        'path' => '/custom-h5p.css',
        'version' => '?ver=1.3.7' // Cache buster
      );
    }
    add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

    Thanks for your help, David!!

    #2379923
    David
    Staff
    Customer Support

    So glad to hear you got that working, and thanks for sharing… as i too have no idea what that hook is doing or why they would choose to do it that way lol

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.