Embed frame changing size

I’m running Sparkle Pro, 2.8.12 on Mac OS X Sierra (10.12.6). I’m trying to embed an album created with jAlbum. Here is what I do:

  1. I insert an Embed frame. The size is automatically set to 400x300. Since the jAlbum window frame is 560x420, I reset the Embed Frame to that dimension and lock it where I want on the page.

  2. I paste the Embed Code I get from jAlbum into the window in the side column under the proper section and click Save.

  3. I save my file, then check with Preview.

  4. If I try to move the 560x420 frame on the page, it suddenly expands to full length (560x1499). There is NO WAY to resize it, either manually or by entering numbers, except for the Width. The Height stays invariably at 1499.

  5. I tried Locking the frame, but that doesn’t prevent it from resizing itself to 1499 in height.

Any suggestions to what I’m doing wrong?

Thanks in advance.

Papadusha

Hello @papadusha and welcome!

I know jAlbum, but I haven’t used the software for many years, so my knowledge is not up to date. I no longer have jAlbum, so I can’t test this.

Is there anything in the “Embed Code” that may have an effect on the size of the frame?
So if there is a value for “height” in the “Embed Code”, the Sparkle frame should adjust to that size automatically …

If you embed an iframe, the width and height has to be set in the “Embed Code” and can not be changed with the Sparkle “Position and Size” settings.

I just tested this.

So my guess is, there is something in the “Embed Code” from jAlbum that triggers this behaviour.

But I’m not an expert, so I may be wrong …

Hi @papadusha, Sparkle tries to measure the embed to show it of the right size in the canvas, and it tries to determine whether the content is going to be of a flexible width. If the detection determines it won’t be flexible, it doesn’t give you resizing handles or lets you resize it.

Now the detection can be misled by how the code works. Sometimes you can solve this by wrapping the code with this above:

<div style="width: 100%; height: 100%">

and this below:

</div>

If this doesn’t help in making the content resizable you will have to paste the code here so we can take a look and give a better guess at solving it.

1 Like

Thanks for a prompt reply. Here’s the code I pasted;

.embed-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }