Resize large images

When we add images using the H5P Image content type, they span the entire width of our page, but sometimes we don't want the images to be that big. Is there a way to control the image size/width from the H5P Image content type?

Alternatively, will there be a way to add images to the H5P Text or H5P Accordion content types? Even a function such as being able to add/edit source code may help us control the image size.

Thanks!

 

Content types: 
icc's picture

The H5P Image content type is designed to always use all the space available. It's the parent container's job to limit the size of the image. Is there any reason why would you wouldn't want to use all the space available to display an image to your user? 

I don't think images will ever be allowed inside H5P Text since it then would break many of the content types already using text. Perhaps there will be a separate Text & Image content type in the future.

I believe other content types inside Accordion has been requested a couple of times but so far no one has been willing to fund or work on implementing it.

Hello icc,

Thanks for the response. The reason why we wouldn't want to use all of the space available for an image is because we like to use small and regular size images. Just like when we create content using a "slide" option rather than an H5P option, it allows us to make an image any size we want. However we like using H5P, and want to use Column, accordion, etc. to make a much better page, but when we try adding images inside the Column type, they are too big. I attached a regular size example (for when we use a slide) and a large size example (for when we try to add an image within H5P content). How can I get the image from the Large-Size example to look more like the regular one? I hope this makes more sense. Thanks.

 

Dellaplane's picture

I've the same problem and my users are not able to modify CSS.

If I can't fix images dimension I'll stop using H5P and I'm so sorry.

 

fnoks's picture

Hi,

Are you just talking about images inside Column, or is this a problem for you in other content types as well?

I have created an issue for Column here: https://h5ptechnology.atlassian.net/browse/HFP-1416

Best,
Pål

 

Dellaplane's picture

I'm talking about images inside Column. In the other content types it's not a problem.

Best regards,

Vittorio

fnoks's picture

Thanks for your clarification :)

 

icc's picture

Ah, I understand. Currently, there's only two way of achieving this.
1. Add whitespace to the image before uploading it (so that it matches the page).
2. Create a custom CSS rule that sets the h5p-image width/height to "auto" when used inside Column. See the Visual Changes guide for more details. The rule would have to look like this:

.h5p-column-content.h5p-image > img {
  width: auto !important;
  height: auto !important;
  max-width: 100%  !important;
}

Hopefully, this will be fixed soon.

Hi,

We have the same problem. The images are way too large for our learning-games.

Can you tell me where exactly to put this this custom CSS code? I tried adding it to the 'custom-css' field of the Moodle-themes used, but to no effect.

Many thanks

Hi,

Thanks for your reply. We have the same problem with images displayed too large.

Can you tell me where exactly to put the custom CSS in Moodle? I've tried adding the code to the custom CSS fields in Moodle of the themes to no avail...

The Visual Changes document doesn't really clarify where exactly the code has to go.

 

Many thanks

thomasmars's picture

Hi, you must create a new theme, or alter your existing theme.
An example of setting css rules for a new theme is available at https://github.com/h5p/h5pmods-moodle-plugin
The most important elements to take notice of here is that in renderers.php you must require the H5P renderer:

require_once($CFG->dirroot . '/mod/hvp/renderer.php');

Secondly you must extend the hvp renderer, and tell the renderer where to find your .css file(s):

class theme_h5pmod_mod_hvp_renderer extends mod_hvp_renderer {
	public function hvp_alter_styles(&$styles, $libraries, $embedType) {
		global $CFG;
		$styles[] = (object) array(
			'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
			'version' => '?ver=0.0.1',
		);
	}
}

And finally you must make sure to use the theme. More info on theming in Moodle can be found at: https://docs.moodle.org/dev/Themes.

https://h5p.org/moodle-customization also gives more info on customizing H5P in Moodle in general.

thx!

Thanks, that should work!

fnoks's picture

Hi,

I think images inside H5P.Column never should scale up. I.e, an image of 100x100 pixels should never be displayed larger than 100x100 pixels. I have therefore created an issue here: https://h5ptechnology.atlassian.net/browse/HFP-1416

Best,
Pål
 
falcon's picture

Hi,

What do you guys think of having a max width setting for the entire column and/or for each element in a column? If would solve this issue, and probably many other issues as well?

(Do note that we have big plans for column. It is currently hard to use it if you have a lot of content in it, and there is a limited set of controls like this issue shows. In the future it will be expanded and be part of a graphical layout builder. It will be column on mobile, but on bigger screens you can have multiple columns in a grid layout)