Image Hotspot pop up sizes

Submitted by brigette_pusello on Thu, 04/19/2018 - 01:50
Forums: 
Feature requests

Hi there, 

I have been using the image hotspot tool and have had trouble determining what size to make my pop up images. They seem to be enlarged to fill the opposite (of the hotspot) side of the background. My current work around is making images with unique widths depending on where the hotspot appears in the background. Is there an easier way to retain the size of my image when inserted as a Popup?

Please see screenshots attached. 

The image with the large text is only 300px wide on a 918px background. 

The second image was my work-around of 520 wide x 400 high.

I hope there is an easier way to achieve pop ups of the correct size :)

Thanks in advance!

 

Attachments: 
Image icon Overlay_306x456.png
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network

brigette_pusello

Thu, 04/19/2018 - 01:50

Here is 2nd image that was my work around

Attachments: 
Image icon TextOverlay_520x400.jpg
BV52's picture

BV52

Thu, 04/19/2018 - 08:36

Hi Brigette,

I'm afraid there isn't but you gave me a very neat idea.

Why not have a manual option to position the pop-up as well as the size of it, what do you think?

BTW thank you for sharing how you achieved the workaround.

-BV52

brigette_pusello

Fri, 04/20/2018 - 00:35

Hi BV52, 

Just an update, I still had trouble aligning the hotspots to keep all the pop ups the same size. I attempted to place the hotspots on as if they were mirrored (so that the pop ups would fill the same amount of space depending if on the left or right half of the canvas) - however there is still something strange going on: on one side the pop up image fills the entire width, on the other it does not (despite it being the same file and the hotspot - as close as I could get it to the same amoun of px from the edge.)

But yes, having this content type maintain the image size in pixels would make for efficient production. One more suggestion :) When you place the hotspots during edit mode the placement field/preview is incredibly tiny!! I had to zoom my browser to 400% to see what I was doing. Furthermore to get the actual green hotspot to appear where I wanted I had to place it (in comparison to the image) about 20/30 pixels lower than looked aligned in edit mode. 

With thanks

*My file has been uploaded to this comment. 

Brigette

H5P file: 
Binary Data hoplite-image-hotspots-in-label-190418-1128-226179.h5p

brigette_pusello

Fri, 04/20/2018 - 01:07

Here is an image comparing the H5P layout and my illustrtor, just thought you may be interested. Cheers, Brigette.

Attachments: 
Image icon aI VS h5p.PNG
BV52's picture

BV52

Fri, 04/20/2018 - 05:33

Hi Briggette,

Thank you for the additional information. I think there really is need for some improvements on this sepcific content to make it more flexible and easier to use. I've moved this post to the feature request forum for better visibility.

-BV52

brigette_pusello

Fri, 04/20/2018 - 08:32

Hi,

This is a screen shot from phone, as you can see the hotshopts are enlarged when viewed in landscape mode. 

Attachments: 
Image icon IMG_1601.PNG
BV52's picture

BV52

Mon, 04/23/2018 - 09:16

Hi brigette,

Afaik this is by design to make sure that the button is not too small when using mobile phones.

-BV52

peterjonker

Wed, 05/01/2019 - 16:29

Hi having the same issue any idea when this feature request would be implemented?

Peter Jonker

BV52's picture

BV52

Thu, 05/02/2019 - 05:44

Hi Peter,

I wish I have good news but no one has picked up this project yet.

-BV52

otacke's picture

otacke

Thu, 05/02/2019 - 10:15

Hi Peter!

As you are probably aware of, posting a feature request doesn't necessarily mean that it will be implemented any time soon or at all.

Having said that: The development version of Image Hotspots already contains a magnifying option for more exact placing of hotspots, and being able to influence the popup size (in %, pixels don't make much sense here IMHO)/positioning wouldn't be difficult to do. Let me have a look at it tonight.

Best,
Oliver

peterjonker

Thu, 05/02/2019 - 14:19

I understand the status of feature requests but thought I could always ask.

I have an example of the customer issue which I attached.

Attachments: 
Image icon Screenshot 2019-05-02 om 14.18.40.png
otacke's picture

otacke

Thu, 05/02/2019 - 19:32

Hi Peter!

There you go: https://github.com/h5p/h5p-image-hotspots/pull/42. In addition to the magnifying option that was implemented by Sir Falcon himself, my new code will allow to set a maximum width for a popup and also allow you to explicitly tell the content type to put it left or right of a hotspot. That should give you some more flexibility.

I hope the core team will find some time (or sponsor) to do the code review for this one.

Best,
Oliver

peterjonker

Fri, 05/03/2019 - 13:43

Truly awesome and thanks very much on behalf of endusers!
Peter

BV52's picture

BV52

Mon, 05/06/2019 - 04:44

Hi Oliver,

I created a task in the public board for review. Thank you for the code.

-BV52

peterjonker

Wed, 06/05/2019 - 13:03

Hi there, any idea when this code will be released and therefore we can update the contenttype?

Thanks again,

Peter Jonker

BV52's picture

BV52

Thu, 06/06/2019 - 05:20

Hi Peter,

I'm not sure about the timeline but once you see that the pull request of Oliver has been merged it usually takes about a month for it to be released.

-BV52

Johannes G

Wed, 10/27/2021 - 13:45

I know its long time ago, but i want to use the Fix aswell.
Peters Solution for this Problem did never get patched into the core h5p version?

Parul504

Thu, 04/28/2022 - 11:05

Hello H5P Team, 
While testing the Image Hotpsot Activity on iPhone, it is been found that full screen mode is not working properly; that is in iPhone we are not able to enter into full screen mode.
Can you please verify whether this issue is fixable or not?

Best Regards,

Parul

Parul504

Tue, 05/03/2022 - 09:14

 

Hello H5P Team, 
While testing the Image Hotpsot Activity on iPhone, it is been found that full screen mode is not working properly; that is in iPhone we are not able to enter into full screen mode.
Can you please verify whether this issue is fixable or not?

Thank you in advance, waiting for your response!

Best Regards,

Parul