Memory Game image sizes

Submitted by Cyndi K on Wed, 08/05/2020 - 19:05
Forums: 
General discussion

Hi all! Glad to be here. I like what I've seen of H5P interactive content so far. I've only implemented a simple memory game, to date.

I'd discontent with the image size that shows when a match is made. That's the time to show a lovely big version of the matched image. Instead, it's a teeny tiny image in a big gray box.

What's the CSS I need to add to my child theme to make that image much larger on desktop (and appropriately responsive on tablet/phone? (The actual image dimensions I'm using are 640x640 px.) I've made a few stabs at it but haven't hit the mark.

https://fools-walk.com/puzzled-2/deja-vu-europe/


Content types: 
Memory Game

Cyndi K

Wed, 08/05/2020 - 21:58

.h5p-memory-game .h5p-memory-pop (and) .h5p-memory-game .h5p-memory-image

seem to be the two descriptors I need. I can edit them in Chrome, and changing widths to a percentage gives me the look I want. But, when I edit the actual file under H5P cached assets, it still uses the old css code.

I am very used to WordPress, where I'd add style changes to a child css file rather than editing a file in WP-Content. If anyone has any suggestions, I'd be very glad to hear them.

otacke's picture

otacke

Thu, 08/06/2020 - 15:33

Hi Cyndi!

You don't have to (and shouldn't) rewrite the original code (because your changes will be overwritten with every update of the content type). You can add your own custom stylesheet files using the alter_styles hook described at https://h5p.org/documentation/for-developers/visual-changes I think there's also a WordPress plugin that offers a simple text input field that you can add you stylesheet overrides to.

Best,

Oliver 

Cyndi K

Thu, 08/06/2020 - 15:47

Thanks, Oliver. I am more a designer than a developer but I'll try the changes recommended. I agree about not directly altering source files.

I'm used to adding changes to the child theme's css file. I'm also new to using CloudFlare, so it's possible the CSS changes worked when I did that but the caching prevented me from seeing resultst right away. I'll check back in when I have it working, just to mention how it went.

Thanks for the info!

Cyndi K

Thu, 08/06/2020 - 15:47

Thanks, Oliver. I am more a designer than a developer but I'll try the changes recommended. I agree about not directly altering source files.

I'm used to adding changes to the child theme's css file. I'm also new to using CloudFlare, so it's possible the CSS changes worked when I did that but the caching prevented me from seeing resultst right away. I'll check back in when I have it working, just to mention how it went.

Thanks for the info!

otacke's picture

otacke

Thu, 08/06/2020 - 19:28

Hi Cyndi!

Adding stylesheets to themes doesn't work for H5P, because it is usually inside an iframe that WordPress can't access. But you can just install the wordpress plugin that's linked to from the customization page, remove all the bits except for the alter_styles hook, set the path to your CSS file and then it's like changing the child theme. The remaining code could look like

if (!defined('WPINC')) {
  die;
}

define( 'VERSION', '0.0.1' );

function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
  $styles[] = (object) array(
    'path' => plugin_dir_url( __FILE__) . 'mystyles.css',
    'version' => '?' . VERSION // Cache buster
  );
}
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

And then you simply put your CSS classes into mystyles.css inside the plugin folder on your server.

Best,
Oliver

Cyndi K

Thu, 08/06/2020 - 19:35

Intimidating but I will try. :-)

Cyndi K

Thu, 08/06/2020 - 20:19

I wasn't sure where the customize page was but I downloaded this from github. (I wish I was better with hooks but I mostly use PHP for styling. Copy/paste snippets is the most I usually do with functions/actions.) I wanted to ask if this looks right to you. Even though the comments say it's for altering the scoring in the drag-and-drop task, the code looks like your suggestion, to me. I also wondered if I made a mistake by trying to put the css file somewhere other than the plugin folder? I can put it there if it must be that location only. 

I really appreciate the handholding. I think I'm going to be using H5P a lot.

========
add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

 

/**

* Allows you to alter which stylesheets are loaded for H5P. This is

 * useful for adding your own custom styles or replacing existing once.

 *

 * In this example we're going add a custom script which keeps track of the

 * scoring for drag 'n drop tasks.

 *

 * @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.

    'path' => 'http://fools-walk.com/wp-content/themes/kadence-child/custom-h5p-styling...',

    'version' => '?ver=1.3.7' // Cache buster

  );

}

add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);

Cyndi K

Thu, 08/06/2020 - 21:10

Glory be! It seems to be working, so I guess I answered my own questions after the help you gave me. :-) Thanks, again.

https://fools-walk.com/puzzled-2/find-the-words-california/