Resize large images
Submitted by spennel on Fri, 06/09/2017 - 19:41
Forums:
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
Mon, 06/12/2017 - 09:47
Permalink
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.
Gumshoes
Mon, 07/18/2022 - 04:33
Permalink
Found the proper work around?
I may have found the proper work around for adjusting the image size.
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!
spennel
Mon, 06/12/2017 - 17:03
Permalink
RE: Large images within H5P content type
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
Thu, 08/24/2017 - 00:25
Permalink
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.
fnoks
Thu, 08/24/2017 - 10:09
Permalink
Hi,Are you just talking about
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ålDellaplane
Thu, 08/24/2017 - 15:37
Permalink
I'm talking about images
I'm talking about images inside Column. In the other content types it's not a problem.
Best regards,
Vittorio
fnoks
Mon, 08/28/2017 - 09:57
Permalink
Thanks for your clarification
Thanks for your clarification :)
icc
Tue, 06/13/2017 - 09:42
Permalink
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.
mic474
Mon, 06/26/2017 - 12:46
Permalink
custom CSS
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
mic474
Mon, 06/26/2017 - 12:49
Permalink
Custom CSS Moodle
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
Tue, 06/27/2017 - 11:04
Permalink
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.
mic474
Tue, 06/27/2017 - 12:03
Permalink
thxs!
thx!
Ogle
Mon, 05/25/2020 - 16:45
Permalink
Oversized and distorted background image
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
lupine
Tue, 06/02/2020 - 17:02
Permalink
Same issue. Have you found an
Same issue. Have you found an aspect ratio that works better?
spennel
Tue, 06/13/2017 - 17:58
Permalink
Thanks!
Thanks, that should work!
fnoks
Thu, 08/24/2017 - 10:17
Permalink
Image inside column
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ålfalcon
Thu, 08/24/2017 - 11:34
Permalink
Max width for all column content
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)
mj
Thu, 04/05/2018 - 03:27
Permalink
Image resized in Documentation tool
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
Thu, 04/05/2018 - 09:12
Permalink
Hi Mark,There is task created
Hi Mark,
There is task created by fnoks that aims to do this. You can go to the link for updates.
-BV52
maude
Mon, 05/07/2018 - 20:07
Permalink
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.
BV52
Tue, 05/08/2018 - 03:13
Permalink
Hi Maude,Thank you for the
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
AnaisDominguez
Mon, 10/15/2018 - 06:59
Permalink
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
BV52
Mon, 10/15/2018 - 09:49
Permalink
Hi Anais,I have replied to
Hi Anais,
I have replied to your post here. Fnoks also has some suggestion regarding this issue.
-BV52
LauDai
Thu, 03/07/2019 - 21:31
Permalink
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.
Laurent
BV52
Fri, 03/08/2019 - 07:44
Permalink
Hi Laurent,This seems to be
Hi Laurent,
This seems to be an entirely different issue. Would you mind attaching a screenshot.
-BV52
Ubi
Fri, 03/08/2019 - 07:54
Permalink
Video in Branching Scenario in full screen mode
Hi BV52,
Example of Video in Branching Scenario full screen mode - no video controls.
Ubi
Ubi
Tue, 03/12/2019 - 09:38
Permalink
Update - no video controls in full screen mode
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
Wed, 03/13/2019 - 03:38
Permalink
Hi Ubi,Would you mind
Hi Ubi,
Would you mind providing a test content. I can't seem to reproduce the issue on my end.
-BV52
Ubi
Wed, 03/13/2019 - 07:14
Permalink
Text content
Hi BV52,
I have used the Branching Scenario (Arts of Europe) on H5P.org in fullscreen mode.
Ubi
BV52
Wed, 03/13/2019 - 08:12
Permalink
Hi Ubi,Thank you for this. I
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
LauDai
Fri, 03/08/2019 - 14:22
Permalink
Same with video
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
Wed, 04/24/2019 - 16:11
Permalink
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.
LauDai
Mon, 03/11/2019 - 15:22
Permalink
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 (?)
otacke
Tue, 03/12/2019 - 01:02
Permalink
Hi LauDai!Have you already
Hi LauDai!
Have you already checked the documentation on visual changes? https://h5p.org/documentation/for-developers/visual-changes
Best,
Oliver
SparTacuS
Wed, 03/13/2019 - 17:51
Permalink
My Workaround
I get around this problem with images by adding white "borders" to the sides of my image.
lupine
Tue, 06/02/2020 - 17:00
Permalink
Also dealing with same issue.
Also dealing with same issue. Is there an aspect ratio that you prefer?
alaasaeed
Sun, 03/07/2021 - 12:10
Permalink
Resize large images
No solution yet
sfokt
Wed, 04/28/2021 - 16:26
Permalink
Money for solution
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:
Useful bonus feature:
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.
Would anyone be interested in taking such a job?
emilysmith2
Tue, 11/30/2021 - 13:40
Permalink
Alternative
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
Wed, 03/16/2022 - 08:13
Permalink
JS Workaround
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>alco
Fri, 08/18/2023 - 22:44
Permalink
re: js workaround
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.