Размер и макет

<caputchin-game> может рендериться в трёх макетах (задаются атрибутом layout): inline, modal и fullscreen. Как ты задаёшь его размер, зависит от макета, потому что макеты modal и fullscreen показывают две отдельные коробки:

• Элемент на странице: то, что сидит в потоке твоей страницы. В inline это вся панель игры; в modal / fullscreen это маленькая галочка, которую посетитель кликает, чтобы открыть игру.
• Коробка игры: диалог, который открывается сверху в modal / fullscreen, с игрой внутри. (В inline отдельного диалога нет: панель и есть игра.)

Четыре атрибута задают размер этих двух коробок. Каждое значение это одно из auto (по умолчанию), full (охватывает доступное пространство) или положительное число пикселей вроде 480.

Inline

У inline одна коробка, поэтому width / height задают размер всей панели. overlay-width / overlay-height тут ничего не делают и игнорируются (виджет выводит предупреждение, если ты их задаёшь).

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal и fullscreen

Здесь две коробки независимы. width / height задают размер входной галочки на твоей странице; overlay-width / overlay-height задают размер диалога и игры, которые открываются, когда посетитель её кликает.

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

overlay-width="full" заставляет игру заполнить диалог вдоль этой оси; значение в пикселях прикрепляет игру к этому размеру (модал плотно облегает её). В fullscreen диалог уже покрывает вьюпорт, так что overlay-* управляет тем, растягивается ли игра, чтобы заполнить его, или сидит по центру в своём собственном размере.

Когда ты оставляешь коробку игры незаданной

Если ты не задаёшь overlay-width / overlay-height, коробка игры берёт размер, который автор игры выбрал для игры (её предпочитаемый след, объявленный в caputchin.json игры). Так что большую часть времени тебе нужны только width / height для макета твоей страницы, а игра задаёт свой размер разумно сама. Задавай overlay-* только когда хочешь это переопределить.

Значения в пикселях

Простое число это CSS-пиксели: width="500" и width="500px" эквивалентны. Нулевые, отрицательные и нечисловые значения отвергаются (атрибут откатывается к своему значению по умолчанию, а виджет выводит предупреждение).

См. также

• Элемент игрового виджета: полный набор атрибутов <caputchin-game>.
• Методы и события виджета: управлять виджетом и реагировать на него.