Resize large images

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.

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,

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

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

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.

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

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

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 (?)

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

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.

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.

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.