Module Pagetop Hero
This module, designed to be placed in the topbar module zone and being as wide as the page, displays an image of the editor's choice with a text heading or other content superimposed over it. This is a common display arrangement at news and magazine websites and blogs.
An easy page-top hero section located in Tiki's topbar module zoneGo to the source code
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
description |
||||
breadcrumbs |
Allows you to specify the navigation paths to arrive at the current page, Separate items to display with commas | |||
bgimage |
Enter image URL, in the case of a single image. | |||
pagetitle |
Page title | |||
usepagename |
Allows the page title to be used as title of the pagetop module (y|n) | n | ||
content_position |
center leftcenter topleft topcenter topright bottomleft bottomcenter bottomright |
Content position inside the hero image | center |
Additional Information:
- In a test in Tiki 27, it was necessary to add, when assigning the module, a "Containing Class" parameter of
w-100. Otherwise, the module won't expand horizontally to accommodate the image's full width. - If the page description and/or page title text isn't readable over the background image because of color contrast problems, Bootstrap text classes such as "text-light fw-bold" can also be input in the "Containing Class" parameter. (See https://getbootstrap.com/docs/5.3/utilities/colors/#colors and https://getbootstrap.com/docs/5.3/utilities/text/#font-weight-and-italics.
- Use the "Page Filter" parameter under the "Visibility" tab on tiki-admin_modules.php to limit the use of the module to a particular page, if desired.
- Normally the pagetop hero image is limited to the standard width of the topbar module zone, which is wide enough to span the three (at most) content columns below it. To make the module zone (and therefore the pagetop hero image) the full width of the page, add this CSS to the site's Look & Feel Admin custom CSS:
.topbar.container.container-std { max-width: 100%; }.
Useful links: