TVML Banner Sizes

Question

I am using the MenuBar template along with a catalog template and a stack template. When using the stack template, there is a carousel in the collection list at the top. According to the apple stack template, those images should be sized 1740x500. I have made my images to that size, but when I add them into the javascript file and run on the simulator, all of the banners seem to have the top lobbed off of them. It is driving me totally insane.

Has anyone noticed this, and if so, did you find a solution? Am I only used to use the first bottom 400 pixels of height or something? Banners look fine when I don't use the menuBar template, say, if I begin my app with a list template. As you can see in the pictures, I am not referring to when the menu bar is on screen. Even when the menuBar is not there the image is getting lobbed off!

Also, all other graphics look find just by using the sizes in the templates (i.e. movies, the cd square shapes etc). It is only the carousel banner images that do not display correctly.

Here is the banner without inserting it into the template: Banner Not in Template

Here is the banner when it shows in the Apple TV Simulator: Apple TV Banner Top Lobbed Off

Thank you everyone for your patience. I am new to TVML and have almost everything working in my app, but this is driving me crazy. Any help is greatly appreciated.

Answer 1

I ran into the same problem as you with the banners being cut off at the top. This just seems to be the way that Apple has decided to format the document given those specific set of tags. The trick is to add an identityBanner before the collectionList. This will trick the rendering engine to add the appropriate padding at the top.

<stackTemplate>
   <identityBanner>
      <title></title>
   </identityBanner>
   <collectionList>
   ...