PHPackages                             hashandsalt/hero - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. hashandsalt/hero

ActiveKirby-plugin[Utility & Helpers](/categories/utility)

hashandsalt/hero
================

Plugin for creating Hero Banners

v1.0(5y ago)334MITPHP

Since Mar 22Pushed 5y ago1 watchersCompare

[ Source](https://github.com/HashandSalt/kirby3-hero)[ Packagist](https://packagist.org/packages/hashandsalt/hero)[ RSS](/packages/hashandsalt-hero/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

*Hero* is a plugin for making hero banners using Pages, Slides, Videos, Colour Panels, and Single Images. It was built to power the hero banners on [The Work of Others](https://theworkofothers.com/). It is a little opinionated and out of the box requires a couple of other plugins:

- [Webp](https://github.com/HashandSalt/kirby3-webp) by **Hash&Salt**
- [Color Picker](https://github.com/TimOetting/kirby-color) by **Tim Ötting**
- [Focus Crop](https://github.com/flokosiol/kirby-focus) by \**Flo Kosiol*

It was also built around [Tiny Slider](https://github.com/ganlanyuan/tiny-slider). If you use a different slider or need to amend the classes or html markup, you can do so by overriding the snippets. The CSS is up to you, but an example sass file is provided and depends on Tiny Slider. You can find this in the css folder in the plugin.

Setting up
----------

[](#setting-up)

### Composer install

[](#composer-install)

```
composer require hashandsalt/kirby3-hero

```

### Manual install

[](#manual-install)

Download the files and place in `site/plugins/kirby3-hero`

Using the plugin
----------------

[](#using-the-plugin)

For the plugin to work, it needs to added to your blueprints, controllers and templates.

### Add to your controllers

[](#add-to-your-controllers)

Add to each page controller you wish to use Hero on.

```

```

### Initialise Tiny Slider in your build proccess

[](#initialise-tiny-slider-in-your-build-proccess)

Heres how Tiny Slider is configured

```
// Tiny Slider
import {
  tns
} from 'tiny-slider/src/tiny-slider.js';

// HERO Slider
let heroslides = document.querySelectorAll('.hero-slider');

if (heroslides) {
[].forEach.call(heroslides , function(el) {
  tns({
    container: el,
    items: 1,
    slideBy: 'page',
    autoplay: true,
    mode: "gallery",
    controls: false,
    nav: false,
    speed: 500
  });
});
}

```

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1882d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d18b7200637c15341417dfabb7c51c7ec3fda44f6a24cb4780b5e7c14f309118?d=identicon)[hashandsalt](/maintainers/hashandsalt)

---

Top Contributors

[![HashandSalt](https://avatars.githubusercontent.com/u/28439755?v=4)](https://github.com/HashandSalt "HashandSalt (1 commits)")

### Embed Badge

![Health badge](/badges/hashandsalt-hero/health.svg)

```
[![Health](https://phpackages.com/badges/hashandsalt-hero/health.svg)](https://phpackages.com/packages/hashandsalt-hero)
```

###  Alternatives

[distantnative/retour-for-kirby

Manage redirects and track 404s right from the Kirby CMS Panel

14689.4k1](/packages/distantnative-retour-for-kirby)[mzur/kirby-uniform

A versatile Kirby plugin to handle web form actions.

26068.3k13](/packages/mzur-kirby-uniform)[arnoson/kirby-vite

Vite helper for Kirby CMS

9759.2k3](/packages/arnoson-kirby-vite)[thathoff/kirby-git-content

Plugin to track changes to content in a git repository.

15343.7k](/packages/thathoff-kirby-git-content)[sylvainjule/locator

A map & geolocation field, built on top of open-source services / Mapbox

11237.3k1](/packages/sylvainjule-locator)[tobimori/kirby-seo

The default choice for SEO on Kirby: Implement technical SEO & Meta best practices with ease and provide an easy-to-use editor experience

10039.7k1](/packages/tobimori-kirby-seo)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)