interactive book content type Images issue

Submitted by [email protected] on Sat, 03/04/2023 - 17:38
Forums: 
Content creation

The interactive book content type Images is having below issue please advice to sort this out:


Images are automatically fitting in full size in the interactive book - I have smaller dimension image which is filling in the whole page how to avoid this.

Secondly we dont know where the images are getting saved, is there a way to select the image from already uploaded images list from wordpress media gallery 

BV52's picture

BV52

Mon, 03/06/2023 - 18:16

Hi,

  1. There is no "fix" for the image as it was designed to occupy the whole width of the container and then adjust the height to scale. What you can do is add a plain "background" to the image to make the wifth longer. You can check this simple content that shows how I "adjusted" the image.
  2. No you cannot use a previously uploaded image in another content.

-BV

Realia

Wed, 03/22/2023 - 18:51

Hi Abash !

I had the same probleme with images in column ; I didn't want the images to spread on the entire width of the container because sometimes I am using small pictures. The solution provided by BV works all right but I find it a bit tedious when working with a lot of images. So, as for me, I have altered the CSS following these instructions : https://h5p.org/documentation/for-developers/visual-changes (I explained here in 2016 how I made the CSS alterations on Wordpress : https://h5p.org/comment/4494#comment-4494) I inserted the following code :

.h5p-column-content.h5p-image img { width: initial !important; max-width: 100%; height: initial !important; margin: auto; }

 

Here is the result I get :

instead of :

 

Hope this helps !

Cheers,

Isabelle

Attachments: 
Image icon Capture d’écran 2023-03-22 à 18.42.15.png
Image icon Capture d’écran 2023-03-22 à 18.44.55.png

Realia

Wed, 03/22/2023 - 18:51

Hi Abash !

I had the same probleme with images in column ; I didn't want the images to spread on the entire width of the container because sometimes I am using small pictures. The solution provided by BV works all right but I find it a bit tedious when working with a lot of images. So, as for me, I have altered the CSS following these instructions : https://h5p.org/documentation/for-developers/visual-changes (I explained here in 2016 how I made the CSS alterations on Wordpress : https://h5p.org/comment/4494#comment-4494) I inserted the following code :

.h5p-column-content.h5p-image img { width: initial !important; max-width: 100%; height: initial !important; margin: auto; }

 

Here is the result I get :

instead of :

 

Hope this helps !

Cheers,

Isabelle

Attachments: 
Image icon Capture d’écran 2023-03-22 à 18.42.15.png
Image icon Capture d’écran 2023-03-22 à 18.44.55.png

[email protected]

Sat, 03/25/2023 - 07:56

Thank you I will see if this fixed for us and update you. Did you find any issue like the fill in the blanks are non-editable in the first load of the page?

Realia

Mon, 04/03/2023 - 16:02

Nope, sorry, I don't have this issue on the interactive books that I have made. Hope you'll find a solution :)

[email protected]

Sat, 03/25/2023 - 07:57

https://h5p.org/node/1359993

Realia

Fri, 04/07/2023 - 11:09

This post : https://h5p.org/comment/14787 could be useful too regarding the image's width issue in Column content. There are several workarounds pointed out by users (I didn't test them though) and at the end an user gives a little piece of code (Jquery script) that I've set up on my Wordpress and that works perfectly :)