With Higher Logic Vanilla's (Vanilla) Foundation theme, you can specify different responsive breakpoints to control how the theme banner and content banner images in your community display on various devices.
Desktops, tablets, and mobile devices have different screen sizes, so it's important that your images adapt to look as good as possible on each type of device. To ensure a clean look, you can upload different-sized images for when your banners display on desktops, tablets, and mobile devices.
✔️ TIP: See Image notes, below, for image-file types and Vanilla's size recommendations.
Enable Responsive Breakpoints
There are two toggles in the Theme Editor that can be enabled to accommodate different-sized images for each device type.
You can enable responsive breakpoints for the Banner and Content Banner:
- The Banner displays on various pages of your Vanilla community, such as Categories, My Bookmarks, My Discussions, and Recent Discussions.
- The Content Banner (which is optional) displays on pages that contain content, such as community posts (including discussions, ideas, questions, polls, events) and knowledge base articles.
- To access, click Content Banner from the Styles menu.
- To learn about this banner, see Content Banner.
When you enable the option for these two banners, the panels expands to display two fields: Mobile and Tablet.
Choose banner images
The steps for selecting mobile and/or tablet images is the same for both banners.
✔️ TIP: See Image notes, below, for information on preparing your images.
To choose images for the banners:
- Click Choose Image to navigate to and choose an image for that device type. The image displays as the banner in the "design canvas" and in the ellipsis field.
- Click the ellipsis and choose Revert to re-apply the previous selection or click Delete to remove the image, leaving no image.
Image notes
This section provides helpful information for preparing your images for use in your Vanilla community.
Image file types
Banner images can be:
✔️ TIP: Vanilla recommends .JPG because this file type can be optimized.
Resizing images
If you want to use the same image for all device types, you must resize the image in an image editor. You cannot resize the image after you've uploaded it to Vanilla.
Desktop device image sizes
To ensure that your full-width images look good on any desktop device, Vanilla recommends an image size of 1920 x 322 pixels.
Tablet device image sizes
To ensure that your full-width images look good on any tablet device, Vanilla recommends an image size of 768 x 255 pixels.
Mobile device image sizes
To ensure that your full-width images look good on any mobile device, Vanilla recommends an image size of 414 x 120 pixels.
Test your images
The dimensions listed above are the recommended image sizes.
We also recommend that you try these sizes on your images in your Staging site. If they display properly, you can commit them to your Production site.
