Badge A Title In A Lockup

I'd like to display a playback state indicator in my application and whilst the documentation says that a badge can be a subelement of a title (https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/SimpleDisplayElements.html#//apple_ref/doc/uid/TP40015064-CH19-SW11) I'm not having much luck with it.


If I put the badge before or after the title tags it displays but on the line before or after the title. If I enclose it within the title tags to try to get it to show on the same line it doesn't display at all.


My overall hierarchy is:


Stack Template -> collectionList -> grid -> section -> lockups

Each lockup consists of an image element and a title element and this is where I'd also like to display the badge (on the same line as and before the title text).


Any help or advice would be gratefully received, even if it is just confirmation that what I want to do can't be done.

Replies

I finally figuered this out so I'm adding a comment here in case anyone finds it useful in the future.


Incode the lockup I now have the image, an overlay and the title.


To put my playback indicator image in the bottom right of the image I use the following:


<lockup ...>
   <img src=... /> 
    <overlay style="padding-bottom: 7px; padding-right: 7px;">
        <badge src="${path_to_icon}" width="20" height="20" style="tv-position: bottom-right; tv-align: right;"></badge>
    </overlay>
   <title ... </title>
</lockup>