Images as tab banners

You can display a custom image as a tab banner to give patrons a visual reference for the tab's content. You can use a logo, illustration, branded graphic, or another image that represents the content.

Banner images can be useful for tabs that feature themed collections, seasonal content, community resources, or other content that benefits from a visual identifier.

The following example shows how to create a tab with a custom banner image on the app home screen. In this example, the Library App tab displays a custom banner image.

Configure a tab with a banner image

The example shows one possible configuration. You can follow the example to create the same configuration or use your own image, text, and content.

To configure a tab with a banner image:

1. In the CMS, select Mobile Apps from the left navigation menu, and then select the mobile app or template where you want to create the tab.

2. In the Tab Manager, locate the list of existing tabs.

   Home Screen typically appears as the root tab.

3. To expand or collapse the tabs, select the + or - next to a tab name.

4. Select where you want to create the new tab:

   • Select Home Screen to create the new tab as a main tab on the app home screen. In this example, The Library App tab is created under Home Screen.

   • Select an existing tab to create the new tab as a nested tab within it.

5. At the top of the Tab Manager, select Create.

   This option is represented by a folder with a yellow star.

6. In the New Tab pop-up window, enter a name for the new tab.

   For this example, enter The Library App.

7. Select Create.

8. Select The Library App tab, and then select Edit Tab: The Library App.

   The Edit Tab page opens.

9. In the Title field, enter a title for the tab.

   For this example, enter The Library App.

   The title won't appear in the standard app view when you use a full-width banner. However, you should still provide a title for patrons who use screen readers or have enabled the simplified app view.

10. (Optional) If your library supports multiple languages in the app, you can provide language-specific versions of the title.

    Select the flag icon next to an editable text field and provide the appropriate text for each available language.

    The languages available depend on the languages enabled for your app. When patrons switch the app to one of these languages, the corresponding version of the text is displayed.

11. In the Subtitle field, enter a subtitle that describes the purpose of the tab.

    For this example, enter Learn more about The Library App.

    The subtitle won't appear in the standard app view, but it provides information for patrons who use screen readers.

12. In the Button section, upload the image that you want to use for the tab:

    1. Turn on Image.

    2. Select Choose File.

    3. Select the image that you want to use.

       The image should be no larger than 880 × 240 px.

13. Turn on Use image as banner.

14. Set the visibility of The Library App tab:

    • Always: Displays the tab on your app home screen regardless of whether the patron is signed in or not.

    • Pre-Login: Displays the tab on your app home screen before the patron signs in and hides it after the patron signs in.

    • Post-Login: Displays the tab on your app home screen after the patron signs in and hides it after the patron signs out.

    • Staff Only: Displays the tab on your app home screen when a staff user is signed in.

    • Never: Hides the tab on your app home screen for all users.

15. To keep the tab at the top of the tabs on the app home screen, turn on Pinned Notification.

    Patrons can't change the position of a pinned tab in their app preferences. For example, you can pin a tab containing an important announcement, such as an unexpected library closure, so that it appears first when patrons open the app.

    If you pin multiple tabs, they're displayed in the order in which they appear in the Tab Manager.

16. In the Tab Type section, select the content or destination that you want to associate with the tab.

    In this example, the tab links to the Every Town home page through a previously created Live Webpage Content Item, where patrons can find more information about the Vega Mobile app.

17. Select Save at the bottom of the page.

18. If the app is already open, reload it to view your changes:

    1. Open the hamburger menu in the upper-right corner, and select Preferences.

    2. Select Reload.

    After the app reloads, the tab displays your custom banner image.