Topbar hero

A common and attractive feature on the web is a full-width image above the text content that reflects the content of the page or sets its tone. In this implementation of a page-top hero image, the source image plugin (PluginImg) is actually here in the page content but it, along with the page title and description, are relocated to the page top by a few lines of JavaScript.

Possible in all content sections

This page-top image implementation can be done on one or more (or all) wiki pages, blog posts, and articles, as well as other pages, as long as they have a wiki text section where the image can be specified.

Uniform appearance

For a uniform treatment where all such pages have an image, for pages that don't have a specific image indicated, the hero area could also have a general background image or color, etc. that served the purpose or, for example, one image for wiki pages without a specific image, another image for all blog posts without a specific image, and so on. These background images would be set by CSS, and then would be covered by page-specific images for pages that have that information set.

Standard Tiki components used

A custom module (for now) has the HTML that is the target of the relocation. This module is in the topbar module zone, which spans the content columns of the page, just below the navbar. The custom module probably should be the only content of the module zone or, if other modules are used, they could be above or below the image.

The image for the hero is indicated with a CSS class, top-image . The complete image plugin syntax looks like this:

{img fileId=136 class="top-image" width="100%" height="auto"}

The CSS in the plugin will probably be moved to Tiki's tiki-base.css stylesheet later on.

This is the custom module content:

<div id="pagetop-hero" class="pagetop-hero w-100">
    <div class="bg-image-wrapper" id="bg-image-wrapper"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-8 offset-sm-2 text-center" id="page-header-title-wrapper">
                </div>
            </div>
        </div>
</div>

The CSS

This is the CSS originally put together for this feature, but it will be improved shortly. Currently this needs to be put in the Look & Feel Custom CSS textarea, or in the page (in a PluginHTML and < style > tags):

/* Pagetop Hero */
.pagetop-hero {
  min-height: 459px;
  position: relative;
}
.pagetop-hero .bg-image-wrapper {
  max-height: 459px;
  max-width: 100%;
  overflow: hidden;
}
.pagetop-hero .bg-image-wrapper .top-image.img-fluid {
  height: auto !important;
  width: 100% !important;
}
.pagetop-hero .container {
  padding-top: 120px;
}
.pagetop-hero .container .row {
  display: flex;
  align-items: center;
  padding: 0 15px;
  margin: 0;
  flex: 1;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.topbar_modules { flex-wrap: wrap !important; }
.pagetop-hero .container .row h1.pagetitle, .pagetop-hero .container .row .pagetitle.h1 {
  margin: 0 0 20px;
  /* font-family can be specified */
  font-size: 67px;
}
.pagetop-hero .container .row h1.pagetitle, .pagetop-hero .container .row .pagetitle.h1, .pagetop-hero .container .row h1.pagetitle a, .pagetop-hero .container .row .pagetitle.h1 a, .pagetop-hero .container .row .page-header .author, .pagetop-hero .container .row .page-header .author a, .pagetop-hero .container .row .page-header .container, .pagetop-hero .container .row .page-header .description, .pagetop-hero .container .row .page-header .pagetop-hero .container .row .page-header .title {
  color: #fff;
}
.pagetop-hero .container .row .hestia-title {
  line-height: 1.4;
}
.pagetop-hero .container .row .wikiinfo {
  display: block;
  margin: 10px 0 0;
  /* font-family can be specified */
  font-size: 1.3rem;
  color: #fff;
}
.pagetop-hero .container .row .float-start {
  float: none !important;
}
.bg-image-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-position: center center;
  background-size: cover;
}

If the image is to be the full width of the viewport (screen), then this CSS should also be used:

.container.container-std.topbar-wrapper { max-width: 100%; }

Otherwise, the image will be limited to the container width of the page (the width of the content columns below the image.

The JavaScript

This is the JavaScript that's needed (some improvements are possible here and in the CSS to prevent display of unneeded icons, etc.:

$( init );

function init() {
    $('#page-header-title-wrapper').append( $('body:not(.tiki_blogs) #col1 h1.pagetitle') );
    $('#page-header-title-wrapper').append( $('#col1 .wikiinfo') );
    $('#page-header-title-wrapper').append( $('header.articletitle h1') );
    $('#page-header-title-wrapper').append( $('.blog-postbody-title') );
    $('.bg-image-wrapper').append( $('.top-image') );
    $('#bg-image-wrapper').append( $('.top-image') );
}

Looking ahead

Probably in the near future we will have a PluginPagetopHero* with a GUI to enter not only the image for the page but also the text color (for good color contrast), font family, and so on.

Working with this will be a new PagetopHero module, containing the HTML shown above so it doesn't have to be created as a custom module at the Tiki site. Since it's a module, it's visibility can be controlled per-page, per-category or other filter, like all modules.

*Name subject to change