25 November 2014
User level: All
Required Adobe products (retail)
Additional recommended products (third-party/labs/open source)
In any DPS app that includes direct entitlement, you can add an HTML banner at the top of the library. The banner can include multiple slide images and can reference the Library and Store APIs. You can add actions to different slides to allow various actions, such as tapping a banner slide to display a sign-in or subscription dialog box, tapping a different slide to download a preview, and tapping another slide to display a Web view.
Note: Although DPS App Builder requires you to create an app with direct entitlement in order to specify a banner, you can add a banner without actually providing direct entitlement. You basically need to specify dummy URLs for the entitlement settings and turn off entitlement sign-in options. For details, see Adding HTML banners to non-entitlement apps.
For iOS apps, the banner HTML is stored on a server, which makes it convenient for you to update the content at any time without having to edit the app. For Android apps, the assets are stored in a .zip file that references the server.
The Store Configurator is a great way to create a basic banner with a set of images with different actions. After you specify the banner information, the banner HTML is hosted on an Adobe server (https://www.dpsapps.com/). If you want to change the banner, such as adding a new ad, you can go back into the Store Configurator, make the changes, and click Publish. The banner is updated immediately.
You can use the Adobe server for your banner, or you can transfer the files to your own server.
Note that the Store Configurator is not required to create a library banner. You can use any HTML editor to create the HTML files used in your banner, and you can host the HTML banner content on any valid server. In this article, I’m going to show you how to use the Store Configurator to create a slideshow banner.
Before we start using the Store Configurator, let us make sure we create all the images to be used for the banner slides. I will use examples and screen shots for my app, DPS Tips. To get the context for these examples, download the iOS app and experiment with the library banner.
Step 1. Create the banner images
Use your favorite design tool—Photoshop, Illustrator, or InDesign—to create the images for your banner. For example, you can use InDesign to create 1024x100 images for a 125-pixel banner (the banner is 25 pixels larger than the images). If your library is dual-orientation, you’ll want to account for the cropping that occurs in the 768-pixel portrait library. If your banner is portrait-only, create portrait-only images such as 768x140 for a 165-pixel banner.
If you prefer using images with a higher resolution (such as 2048x200 instead of 1024x100), you can do so. When you use the Store Configurator to upload the image files, you may want to select the option to scale the images by 50%, described later in this article.
Export the images to PNG.
Remember the height you use for your images. You’ll specify that height value in the Store Configurator.
If your banner includes slides that jump to Web sites, consider creating one or more separate images to appear in case the readers are not connected to the Internet. See Step 3 for details.
Step 2: Sign in to Store Configurator
Open the Store Configurator website.
Select “Slideshow Entitlement Banner” and sign in using the Application role in which the banner will appear.
Step 3 (0ptional): Create offline banner
If you are going to use the same banner assets for when your users are not connected to the Internet, skip to the next step. If you are using a separate banner image for offline behavior, do this:
Another option is to use a different account to create offline banner assets. Offline banner assets require an exported .zip file, so it doesn't matter which account you use.
Step 4: Specify settings and images for the live banner
Specify the page height of the banner images using standard definition (1024x768) values. The banner itself is 25 pixels taller than the page height.
Add the slides. For each slide, browse to select an image.
If you have created HD images (such as 1536x280), select the “HD Image (scale image 50%)” option.
If you want the slide to appear only if the user is not entitled to the latest issue, such as for a “Please sign in” banner, select the “Hide if entitled to the latest issue” option. Optionally specify a Product ID of a specific folio.
Step 5: Specify an action for each slide
For each slide, specify an action. In the DPS Tips banner I am using as the example, one slide does nothing when tapped, a couple of slides open Web views, and a pair of conditional slides in which one image appears only if the user is signed in (“Thank you for signing in”) and the other appears only if the user is not signed in (“Please sign in”).
After you select an action such as Open URL, go into the slide settings and specify the URL.
When you have the images and actions added, click Publish. Your HTML banner content is uploaded to a server, and the Hosting URL field is populated. You’ll need this URL when building the app.
Step 6: Build the app
In Store Configurator, click Publish if you haven’t already done so. Copy the host URL and download the .zip file for the offline banner (unless you used a different image for the offline banner as described in Step 3).
Then use DPS App Builder to specify your banner information.
Test the banner in the development app. If you need to make edits, remember that your Hosting URL does not change, so you do not need to rebuild the app unless you want to update the .zip file for offline assets.
Whenever you want to change a banner slide image or action, sign in to Store Configurator, edit the slide, and click Publish. The changes appear in your app immediately.
The Store Configurator offers an easy way to create banner slideshows for your library. Once you specify the banner URL in your app, you can use the Store Configurator to update your banner immediately, without having to update your app.
In addition to adding the custom slideshow banner, here are some other ways in which you can customize the app library:
Add custom navigation icons (custom slots).
Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.