Inspired by react-banner from SharePoint Starter Kit.
This web part provides the ability to add a variable height image banner with a title and link. Supported in SharePoint Online (Modern pages).
Uses Image Helper API. This allows for customers to store high-resolution images in SharePoint but not pay the download time penalty when those images are used.
For more information see CHANGELOG file.
The Banner webpart can be configured with the following properties:
| Title | Type | Description |
|---|---|---|
| Image URL | string | The url of the banner image. Supports files from sharing links or relative/absolute urls. |
| Label | string | The text message or title you want displayed on the banner image. (Max. two lines.) |
| Banner height | number | Provides the fixed height in px of the banner image. (Default: 200px) |
| Link URL | string | The banner hyperlink. |
- Add
spfx-banner.sppkgto SharePoint AppCatalog and deploy - Add the web part
Bannerto a SharePoint page and enjoy - Configure the web part to update its properties.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Licensed under the MIT License.
-
Download this repository
-
Install development toolchain prerequisites
The SharePoint Framework development and build toolchain leverages various popular open-source tools. While most dependencies are included in project, you need to install a few dependencies globally on your workstation.- Install Gulp:
npm install gulp-cli --global - Install Yeoman:
npm install yo --global
Important: Yeoman v4.x is required by the SPFx v1.13 forward.
- Install Gulp:
-
In the command line (in a package directory) run:
- Install the dependencies to the local node_modules folder:
npm install - Create the solution package (sppkg file) in sharepoint\solution folder:
npm run dist
- Install the dependencies to the local node_modules folder: