Resize large images
Submitted by spennel on Fri, 06/09/2017 - 19:41
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.
Mon, 06/12/2017 - 09:47
The H5P Image content type is
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.
Mon, 06/12/2017 - 17:03
RE: Large images within H5P content type
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.
Thu, 08/24/2017 - 00:25
I've the same problem and my
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.
Thu, 08/24/2017 - 10:09
Hi,Are you just talking about
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-1416Best,Pål
Thu, 08/24/2017 - 15:37
I'm talking about images
I'm talking about images inside Column. In the other content types it's not a problem.
Mon, 08/28/2017 - 09:57
Thanks for your clarification
Thanks for your clarification :)
Tue, 06/13/2017 - 09:42
Ah, I understand. Currently,
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:
Hopefully, this will be fixed soon.
Mon, 06/26/2017 - 12:46
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.
Mon, 06/26/2017 - 12:49
Custom CSS Moodle
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.
Tue, 06/27/2017 - 11:04
Hi, you must create a new
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:
Secondly you must extend the hvp renderer, and tell the renderer where to find your .css file(s):
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.
Tue, 06/27/2017 - 12:03
Tue, 06/13/2017 - 17:58
Thanks, that should work!
Thu, 08/24/2017 - 10:17
Image inside column
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-1416Best,Pål
Thu, 08/24/2017 - 11:34
Max width for all column content
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)
Thu, 04/05/2018 - 03:27
Image resized in Documentation tool
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?
Thu, 04/05/2018 - 09:12
Hi Mark,There is task created
There is task created by fnoks that aims to do this. You can go to the link for updates.
Mon, 05/07/2018 - 20:07
This us very important imo
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.
Tue, 05/08/2018 - 03:13
Hi Maude,Thank you for the
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.
Mon, 10/15/2018 - 06:59
Problems uploading images
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
Mon, 10/15/2018 - 09:49
Hi Anais,I have replied to
I have replied to your post here. Fnoks also has some suggestion regarding this issue.
Thu, 03/07/2019 - 21:31
Same with video
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.
Fri, 03/08/2019 - 07:44
Hi Laurent,This seems to be
This seems to be an entirely different issue. Would you mind attaching a screenshot.
Fri, 03/08/2019 - 07:54
Video in Branching Scenario in full screen mode
Example of Video in Branching Scenario full screen mode - no video controls.
Tue, 03/12/2019 - 09:38
Update - no video controls in full screen mode
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
Wed, 03/13/2019 - 03:38
Hi Ubi,Would you mind
Would you mind providing a test content. I can't seem to reproduce the issue on my end.
Wed, 03/13/2019 - 07:14
I have used the Branching Scenario (Arts of Europe) on H5P.org in fullscreen mode.
Wed, 03/13/2019 - 08:12
Hi Ubi,Thank you for this. I
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.
Fri, 03/08/2019 - 14:22
Same with video
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.
Wed, 04/24/2019 - 16:11
Unfortunately, there's no
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.
Mon, 03/11/2019 - 15:22
100% width : CSS
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 (?)
Tue, 03/12/2019 - 01:02
Hi LauDai!Have you already
Have you already checked the documentation on visual changes? https://h5p.org/documentation/for-developers/visual-changes
Wed, 03/13/2019 - 17:51
I get around this problem with images by adding white "borders" to the sides of my image.