Overview
This plugin provides an easy way to have a custom background image for every page of the forum. It allows you to upload this image in the dashboard and access it through a Smarty Template or Customize Theme.
It also allows you override the main image on a per-category basis. A category can optionally have its own background image. Any child categories inside this category will inherit from the parent category, unless it has its own image set. Discussions will always user their category’s image.
In order to be flexible this plugin does __not__ provide an out of the box solution for existing themes. Integrating the image will require custom theming work to be done. It's best to be knowledgeable in both HTML and CSS before using this plugin. See our Custom Theme Guide and Theming Quickstart Guidefor tips and guides on getting started.
Setup
- Visit the addon’s page of the dashboard. (
dashboard/settings/addons) - Enable the HeroImage plugin.
Set the hero image
- Click on the settings icon next to the plugin.
- Click on the file picker to select your image
Override the hero image for a category.
- Navigate to the category page of the dashboard. (
/vanilla/settings/categories) - Edit a category.
- Scroll to the Hero Image section.
- Use the file picker to upload a file.
Which image will show up for a page?
The default image is the one set in plugin’s setting. This image will always be returned for pages like activity, profile, search, and many category & discussion pages.
A discussion page will always return the same image as the category it is in.
A category page will return the default image (set in the plugin’s setting) unless: - It has an image override set in the category settings. - One of its parent categories has an image override set in the category settings.
Usage in Smarty
The URL of the image for the current page will be made available to Smarty Templates and customize theme with the tag:
{hero_image_link}
If you place this custom smarty tag in your Customize Theme, and disable the Hero Image plugin you site will break until you either remove the tag or re-enable the plugin.
Usage in PHP
Alternatively, this image url is made available through PHP (such as in a themehooks file) with the function call:
if (class_exists("HeroImagePlugin")) {
$link = HeroImagePlugin::getCurrentHeroImageLink();
}
Example usage
Simple example
The easiest way to use the hero image url is through and image tag.
<img src="{hero_image_link}" class="MyHeroImage"/>
Advanced Usage
Sometimes you need more flexibility than an <img>tag can provide. If so you can set an inline background-image. This usage requires both HTML and CSS. An example might look like the following:
HTML
<div class="MyHero" style="background-image: url('{hero_image_link}')">
<h1>{$Title}</h1>
<p>{$Description}</p>
{breadcrumbs}
</div>
Styles
This plugin doesn’t provide styles for a background image. You will need to set them yourself in the CSS portion of Customize Theme. See the Vanilla Forums Theme Guide for tips and tricks on using Customize Theme.
.MyHero {
width: 100%;
height: 300px;
background-color: grey;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Note that the actual image is set using the inline style.
