course presentation - styling and customization

pernin's picture

We're doing a kiosk app for children at a museum. For that we've chosen the course presentation, as it's the closest to our needs (a series of screens interactive questions, drag'n'drop, video and other information).

There's some things we'd need to customize & style to conform to the exhibition's style guidelines. We'd need more html tags and been having some difficulty:

- the editor toolbar - combo button for paragraph format - has only a few limited choices (h2, h3, normal). I've found the css to style the output, but not where to activate/populate the missing tags.

-----
I haven't looked into the following yet, but in case you have documentation at hand, which files control:

- the download button? (we don't need one in a kiosk setup)

- customizing/styling the slideshow navigation?

We may be going at this completely wrong, and maybe we should do a module from scratch... but the course presentation module seems to have almost the exact functionality & format we need, soo...

Cheers,
Alfredo

pernin's picture

Found the download button: disappears when unchecking in drupal configuration. All's good, birds sing, sun shines... :)

While I was around in configuration, I tested checking for development mode, but they result in a lot of semantic errors, and bork the editor: can only write in 'comments', but not in 'text'. No problem for my part, I don't think I'll need that feature, but thought I'd report it. /A.

In Drupal you may use hook_h5p_semantics_alter to add more allowed tags to a field. I just pushed h5p.api.php to the drupal 7 repo. There you'll find an example implementation.

Adding css to override styles may be done with hook_node_view. To add css in H5Ps that are displayed in iframes you do like this:

if (H5PCore::determineEmbedType($node->embed_type, $node->main_library['embedTypes']) === 'div') {
  // Div
  drupal_add_css...

}
else {
  // Iframe
  $content_id = h5p_get_content_id($node);
  $settings['h5p']['cid-' . $content_id]['styles'][] = $module_path . 'You path';
  drupal_add_js($settings, 'setting');
}

pernin's picture

drupal 7, I missed specifying that ;)

I'll dive in and check this. Thanks !!

pernin's picture

A bit confused - do you mean I should edit and use the h5p.api.php as a file?. In that case, where? h5p barely uses any php, so I'm unsure...

the same question, I guess, for the css, as I was just planning on editing the existing css, but it's probably better this way

The libraries are continuously beeing improved. If you change the original css files or javascript files upgrading them later will be a lot harder.

The code in h5p.api.php is example code. You must create your own drupal module and put the code into that module. For instance you may create a module named "h5pcustomizations" and implement hook_h5p_semantics_alter as h5pcustomizations_h5p_semantics_alter there. The same goes for the css. h5pcustomizations_node_view

pernin's picture

Check. Right... I'm new to drupal, we all are here. Guess we're going to learn doing a module. How difficult can it be? (famous last words...)

I'll have a go and let you know how it went. Worst case, if we see it's too much and start to run out of time, we'll edit the original files and leave it at that. It's a kiosk installation running locally, so no upgrading of either h5p or drupal.

Thank you muchly. It's a great tool and we're all excited to work with this (new shiny toy) :)

pernin's picture

1) on adding tags for styling:
I'm missing something, I did a module with the code provided, just to test if the h4-tag appeared as allowed, but it doesn't do anything. The module shows up in the admin module list and enables correctly - I added error logging, but no error reports generated. Still no h4-tag, and there's a few other tags we'd need (images in comment field, for instance)

2) another customization question related the previous:
in the drag'n'drop of course presentation we're adding several images per slide, and with several presentations with 6-8 slides each. Each of the images loads as a thumbnail and must be resized for hand. As all the images in each slide must have the same dimensions, it's very fiddly.
- Ideally, I'd like to customize h5p to read the image's actual size and render that,
- or at least define a default width x height

Of course, doing things the right way is always better. In this case though, we really don't mind brute force (editing original files), as this is a locally running kiosk installation. Once delivered it will be set in stone for a very long time. Years. Until it's discarded in favour of a new one - done in a newer, bigger, meaner, sexier, version of hp5 :)

1) Did you replace "hook" with the name of your module? Could you post your code here? If you needs to change "hook" into the machine_name of your module remember to clear the drupal cache afterwards. Doing this change directly in a javascript file won't work because the backend strips away tags that aren't included this way for security reasons.

 

2) The aspect ratio should be correct from start. If you hold SHIFT while resizing the aspect ratio will be kept. If you want to add some of the change you mention above you'll have to add them to the javascript of the H5PEditor.CourePresentation library.

pernin's picture

We were talking a bit at cross purposes:

- The image resizing function you refer to is the one in the 'add image' module in course presentation. It captures original image size and shift-resizes conserving aspect ratio as you describe.

- I am using the 'drag and drop' module within the course presentation. There, original image size & shift-resize do not capture original size, just thumbnail, and do not conserve aspect ratio at resizing (with or without shift).

There are some other problems with apparent conflicts between comments field for different sub-modules. I'm doing a clean new installation so it's easier to differentiate what's what; the one I'm working on now has grown too much test-fungus ;) Report as to that will follow

I'll add this to our issue tracker now so that we can make those two libraries work the same way with images.

pernin's picture

1) Yes, I had replaced 'hook' with the module name & cleared the drupal cache (and the browser cache, for good measure). The code is basically the same you gave me, plus error logging. I post it at the bottom.

2) The aspect ratio is not a problem - by the way, holding shift while resizing doesn't do anything, but it's not an issue for oss, as long as the aspect ratio *and* the size are conserved at upload. So I guess it's editing the javascript

- there's a placeholder thumbnail that flashes by when uploading, which I guess it's where the uploaded image gets its new size, but I couldn't find it anywhere, I think it may be embedded in the javascript

Here's the code for the api customization. Let's see if the forum lets me post it:

<?php
/**
* @file
* Describe hooks provided by the H5P module.
*/

/**
* Alter a library's semantics
*
* May be used to add more fields to a library, change a widget, add more allowed tags for
* a textfield etc
*
* @param array $semantics
* A libraries definition of the data the library uses
* @param string $machine_name
* The libraries machine name
* @param int $major_version
* Major version for the library
* @param int $minor_version
* Minor version fot the library
*/

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

function h5pcustomization_h5p_semantics_alter(&$semantics, $machine_name, $major_version, $minor_version) {
// In this example implementation we add <h4> as an allowed tag in H5P.Text 1.0
if ($machine_name == 'H5P.Text' && $major_version == 1 && $minor_version == 0) {
$semantics[0]->tags[] = 'h4';
}
}

The code works both in the dev version of D7 and in the stable version of D6, but not in the stable version of D7 which you are using. You'll need to patch your version of the H5P module and when you upgrade the patch is part of the new stable version. I hope we'll be able to release it soon.

In h5p.classes.inc replace line 380: "drupal_alter('h5p_semantics', $semantics);" with "drupal_alter('h5p_semantics', $semantics, $machineName, $majorVersion, $minorVersion);"

pernin's picture

brilliant! that hit the spot :)

With a caveat: it works in for the T-field, but not for the comments field(s)?

If you want it to work for all textfields you may write a recursive function that goes trough all parts of the semantics for any library and checks for a "tags" property and adds img to tags if tags exists. The comments field is part of the CoursePresentation library I think while the text field is part of the text library and the example code only targets the text library. If you get this working it would be nice if you could upload the code here and we would add it as a second example in the api file. There are probably others who would need this as well.

pernin's picture

Went through all the semantics for all the libraries. Tested with every library where semantics include 'tags' and it works perfectly well with each of them - blanks, summary, text, continuoustext, multichoice, exportablearea - but not with course presentation, not for the comments.

The semantics in course presentation include tags, and the field for comments is clearly referenced there, but it doesn't work. Any idea where else?

Maybe, if I sacrifice a chicken at the Altar of Murphy...

Could you paste the code here? Sounds strange that this doesn't work.

pernin's picture

same code, except for the reference to the library:

<?php
/**
* @file
* Describe hooks provided by the H5P module.
*/

/**
* Alter a library's semantics
*
* May be used to add more fields to a library, change a widget, add more allowed tags for
* a textfield etc
*
* @param array $semantics
* A libraries definition of the data the library uses
* @param string $machine_name
* The libraries machine name
* @param int $major_version
* Major version for the library
* @param int $minor_version
* Minor version fot the library
*/

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

function h5pcustomization_h5p_semantics_alter(&$semantics, $machine_name, $major_version, $minor_version) {
// In this example implementation we add <h4> as an allowed tag in H5P.Text 1.0
if ($machine_name == 'H5P.CoursePresentation' && $major_version == 1 && $minor_version == 0) {
$semantics[0]->tags[] = 'h4';
$semantics[0]->tags[] = 'img';
}

}

Yeah, you need the function to be recursive. It must loop through all the semantics for a library and look for a property named tags. Your function assumes that there is a property named tags at the first element in the semantics. It must loop through all the elements and if an element has a property with an array or object value you need to call the function on the value as well so that you find all text elements in the datastructure.

pernin's picture

I see, thanks! I'm guessing at a foreach loop, but sadly I'm not up to it. I'll leave this for now, as I have to present a proof of concept next Monday and there's quite few a other things to get ready by then. The guys who actually know their way around PHP & JavaScript will be returning from a trip next week, so maybe then

Are you making any progress on this?

pernin's picture

Sorry, no. We found that the plugin for wordpress had been released and we went over to that. This is a stand-alone kiosk, so drupal was sort of overkill. Besides, we know our way around wordpress a lot better than drupal ;)

We'll probably be diving a bit into the wordpress plugin, but that's a bit further down the road, summer project maybe?. We're now using the plugin as is, with just some styling and, so far, all functional customization is done in wordpress itself. I know it's not elegant, but it's effective (this was a rush job from the beginning).

I must say, everybody is absolutely delighted with h5p, both here and the users at the other end. Wonderful tool. We will certainly be contributing to this (as soon as we can come up for air)

Great! I hope your project is successfull and look forward to your contributions to H5P :)

pernin's picture

it already seems to work for all text fields - we're only planning on drag'n'drop, but we may end needing other libraries.

Apparently, as you say, text fields are part of the text library, so I'll give it a go with the presentation library, we really will need the capacity in the comment fields as well - I think this was asked regarding images in comments in another thread in the forum, and we're going to need this too. I'll see if I can make this work. Thx!!