search

h5p / h5p-question-set

6 stars 83 forks source link

Fix intro image scaling if used in compound content types #55

Open otacke opened 4 years ago

otacke commented 4 years ago

When using QS in compound content types (in Column in particular), the intro div may not have been rendered when determining its width. In consequence, instead of scaling the intro image to full width, it would be displayed in its natural dimensions in Column.

This pull request fixes this behavior and the intro image will scale properly in Column as well.

ilukanets commented 2 years ago

We have the same issue with intro image on our platform. It's really annoying and we have a lot of complaints from our users. Problem appears more often if image has large size and it takes more time to load it.

@otacke I'm not sure setTimeout is the best solution, but if it works... As an alternative I suggest an image could be created with JS and styles to be attached on image load event.

var bgImg = params.introPage.backgroundImage;
var bgImhPath = H5P.getPath(bgImg.path, contentId);
var bgImgRatio = (bgImg.height / bgImg.width);
var image = new Image();

image.onload = function() {
   $intro.css({
     background: '#fff url("' + bgImgPath + '") no-repeat 50% 50%',
     backgroundSize: 'auto 100%',
     minHeight: bgImgRatio * +window.getComputedStyle($intro[0]).width.replace('px','')
   });
}

image.src = bgImgPath;
otacke commented 2 years ago

@ilukanets Feel free to change the code the way you want to. I'm not attached to anything. Ultimately, it's not my decision, but the H5P core teams'.