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!

 

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.

I may have found the proper work around for adjusting the image size.

  1. Size your image to the size you want it, then create a new COLLAGE.
  2. Select the SINGLE PICTURE collage.
  3. You should be able to alter the HEIGHT of the frame.
  4. Shrink the height until it perfectly fits the height of your image.

The width of the image will now stay as you want it because it'll conform to fit the height of the frame first.

Hope this helps someone!

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!

I was surprised to see that many other users are having this problem; I thoght that as a very new user, I must have been doing something wrong. In a sense, it was a relief to know.

I have found that the smaller the image used the more distorted it becomes; I therefore play around with the size of the image prior until I get an acceptable result.

Hopefully a better solution will be developed soon

 

Same issue. Have you found an aspect ratio that works better?

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)

Hi ,

the same issue occurs in this tool where images are stretched beyond the intended size to . fit the width of the tool container...results in huge images of poor quality,! Can a 'preserve original size' option be added?

thanks
Mark

BV52's picture

Hi Mark,

There is task created by fnoks that aims to do this. You can go to the link for updates.

-BV52

Same wth multiple hotspots.  The high resolution photos even look somewhat grainy on our large screen... we can't anticipate all screen sizes but limiting to 100% without resorting to a child theme helps to maintain professional visuals.

BV52's picture

Hi Maude,

Thank you for the information. Afaik this will be fixed in general since images are handled in a separate file which is separate from specific contents.

-BV52

I understand what are you talking about, but I can't upload my images, I've been reducing the images in kb, and even that a just can´t

BV52's picture

Hi Anais,

I have replied to your post here. Fnoks also has some suggestion regarding this issue.

-BV52

The same problem also appears for (interactive) videos that extend across the entire width of the screen,which can be an UI problem when the screen is wide and low because the controls are not visible.

Laurent

 

BV52's picture

Hi Laurent,

This seems to be an entirely different issue. Would you mind attaching a screenshot.

-BV52

Hi BV52,

Please see screenshots

Screen resolution: 1920x1080 - no video controls

Screen resolution: 2160x1440 - video controls ok + white strip at the bottom

Screen resolution: 1280x800 - video controls visible - almost ok

Ubi

 

BV52's picture

Hi Ubi,

Would you mind providing a test content. I can't seem to reproduce the issue on my end.

-BV52

Hi BV52,

I have used the Branching Scenario (Arts of Europe) on H5P.org in fullscreen mode.

Ubi

BV52's picture

Hi Ubi,

Thank you for this. I now know why I can't reproduce the issue, my laptop is limited 1280x800 :-( but I was able to see what you mentioned above in this resolution. Anyway I filed a bug report here.

-BV52

Hi,

I think the problem is still the same : the incapacity to set properly the size of the objet (100% wide mandatory) make sometime problems. In the following snapshot, it can be seen the view we get of a video on a macbook pro when the windows maximized on the screen. As you can see, the learner does not see the video control. So access to the control, he has to scroll down, but in this cas, he does not see the upper part of the video.
Then only way to see the video properly is to modify the window ratio (second snaphot).

Moreover, the videos (and the images) appears very big compared to the rest of the course when the windows is maximized.

I think a single css is not sufficient because we need sometime to have 100% wide and sometime not. It could be interested e.g., to have a max width for video, or to setup a possible marge. For picture, it is sometime interesting to havec100% width, but it should be possible to set the max-size to the real size of the picture (logo case).

Thanks for your help.
Laurent

icc's picture

Unfortunately, there's no easy solution for this. However, a rule of thumb for the content to look great is to ensure that the main content view is never wider than 16:9. I believe this should be achievable with some CSS rules for the .h5p-iframe-wrapper, e.g. max-width: 991px which is typically the highest responsive breakpoint. It isn't perfect but an easy way to get around the problem.

Hi, Is there any standard way to change the css (these problem could be resolved easily if so) without having to hack the moodle theme ? For example it could be possible on the H5P Moodle pluggin to have a field that allow to add css instructions to the main one (?)

otacke's picture

Hi LauDai!

Have you already checked the documentation on visual changes? https://h5p.org/documentation/for-developers/visual-changes

Best,

Oliver 

SparTacuS's picture

I get around this problem with images by adding white "borders" to the sides of my image.

Attachments: 

Also dealing with same issue. Is there an aspect ratio that you prefer?

No solution yet

I have some funding I could spend on solving this issue. How would I go about finding someone willing to make changes?

I see two ways to approach this, and the second one is probably better as it is more universal: 

1. Develop a new content type, Image and Text. Basically the same thing as Image & Text in Articulate Rise, or as Bootstrap Columns where one column is a pic, the other text. Requirements:

  • capacity to decide whether image is on left or right
  • responsive design, changing to full-width on mobile devices
  • can be inserted anywhere - in books, columns, accordions, etc.
  • Capacity to determine the relative size of the columns (can be within set types: 50/50, 33/67, etc.)

Useful bonus feature:

  • Lightbox function - click on image to open it in full size

 

2. Develop a new content type, Columns. Basically Bootstrap Columns, where we can put any other content type within each column. Thus we can simply add text to one column, and add an image to the other, with the image being 100% width of the column.

  • As before, requires responsive design, capacity to determine relative width of columns, and can be used within other content types.

 

Would anyone be interested in taking such a job?

I have been having the same issue with images in the interactive book.  The image option stretches the images so much they become grainy and unviewable.  I have instead been adding a fill in the blank question with no actual fill in the blank text but instead just text about the image and unticking all options in the behaviour settings.  This gives me a little image that has the option to be enlarged. 

It would be great if you could add the image options that are in the question type activities to all image types.

If I want just the image I no text have been added a course presentation with 1 slide and no navigation tools.  It is easier to adjust the size without having to do it on my pc and reupload the image each time.

daniel.hefley's picture

Hi all,

Recently had a client dealing with this issue so came up with a JS/jQuery workaround which I hope will be useful to someone. It does not require any access to the backend. Just copy/paste the script into the Additional HTML 'Within HEAD' section. The size of the image may be adjusted by changing the 'max-width' value.

<script> $(document).ready(function(){ $('[id^="h5p-iframe-"]').on("load", function() { let iframehead = $('[id^="h5p-iframe-"]').contents().find("head"); let iframecss = '<style type="text/css">.h5p-column-content.h5p-image > img {max-width: calc(100% - 600px) !important; margin: auto !important;}</style>'; $(iframehead).append(iframecss); }); }); </script>

Hi Daniel,

When I edit an H5P, such as an "H5P multiple choice" there is nowhere to paste that code. I'm using h5p in moodle. If you add an image to a multiple choice it displays too big. And nowhere to change that. For me, 100 pixel width will blow up to 200 or 300 pixels.