Yeap. Your web development skills...
Can you just use MS Paint and draw what you want there? What do you want to see on your page.
[Runtime] [Widget] Embedding assets with Spine Web Player
In short I want to create static gallery in a grid view.
With iFrame all works great I can put player wherever I want nothing breaks. but I have no idea how to make the size dynamic. 100% height does not fill the parent container.
With HTML code it fills the parent as I expect, and mobile screen looks fine, but it breaks the site layout. it renders in different container together with the rest players.
https://drive.google.com/file/d/1jvLtWs3bCiCr0yLmdqPAC847QwsFuzfg/view
The right way to work on web UI junk is to press F12 to open the dev tools and adjust CSS. Once you figure out what HTML/CSS you need, then you can figure out what to change in WordPress. Web UI is nasty enough without WordPress between you and the HTML/CSS.
Find this DIV (a parent of the iframe):
Loading Image
To find it, right click the Spine player, Inspect (probably called something else in Chrome, I use FF), then look at the parents. Hover the DIV in the web tools with the mouse so you can see the bounds in the page. Its bounds are not the size you want, so the iframe inside it is not the size you want. That DIV's parent has a flex layout:
Loading Image
The flex layout doesn't know how tall you want its children.
You need a way to know how tall you want your player. You could make it a fixed height. More likely you probably want to use a CSS aspect ratio "hack" so that the player's height is based on its width, and then set a maximum width. We do this for example here (resize the page to see the first big player change width/height):
Blog: Spine 4.0 is here
Right click, Inspect, the first big player:
Loading Image
The aspect ratio sizing works because reasons:
https://css-tricks.com/aspect-ratio-boxes/
If you find all this to be a huge mess, that's because it is. WordPress adds a TON of HTML junk. Suffering through this is just what people do. I suggest creating a minimal HTML page where you can work on your HTML/CSS without WordPress or any other junk. Get it working like you want there, at the size you want and behaving like you want when the page is resized (eg drag the edge of the dev tools to make the page more narrow), then try to transplant your working thing into WP.
Oh, one more thing, browsers have a limit for how many WebGL canvases they can have on a single page. I think 4 is safe, but you might want to try it on a few browsers (including mobile) or research it further. On our demos page we remove canvases that are off screen and reuse them for different demos as you scroll down. It's ridiculous and complex, but it works! You'd have to make your browser extremely tall to be able to tell that only 4 demos can be visible at once.
Spine: Demos
Actually, it looks like we use 5. You can see it if you zoom your browser waaaay out. The top 2 demos don't render because there's 7 demos visible and we use only 5 canvases.
Loading Image
Ahhh, GIFs suck! :envy:
Well, that's an option too. =)
The problem is that this forum is not dedicated to teaching website layout, imho. I definitely don't have the time or desire to teach someone from scratch.
Perhaps you should ask around among your acquaintances who can help you with your site. For conditional 2-3 glasses of beer at the bar?
It sure would be so nice to have some minimal vanilla templates that do these things so that even the monkeys like me can replace/readapt the example to their needs.
(show multiple demos and dispose them off screen, example reusing the same player).
This would make displaying a portfolio online so much easier for artists. :think:
Erika wrote(show multiple demos and dispose them off screen, example reusing the same player).
Yeah. It would help me a lot. An official example instead of inventing his own bicycle, which possibly uses the wrong size wheels.
5 أيام لاحقا
The issue with the canvas shuffling is, that it's not trivial and very specific to the page you want to integrate it with.
In other news, @Drako, SpinePlayer.dispose() is now implemented in 4.0 and 4.1-beta. https://github.com/EsotericSoftware/spine-runtimes/issues/2020
عام واحد لاحقا
tried to play with data urls recently, and only thing I can get is Animation bounds are invalid error