History: Topbar hero

Source of version: 6

{layout header="y" footer="y" leftcolumn="n" rightcolumn="n" fullwidth="y" nosidemargins="y" bgrepeat="repeat" actionbuttons="y" topbar="y" pagetopbar="y" pagebottombar="y"} {img fileId=182 class="top-image" width="100%" height="auto"} {HTML()}<style> .toggle-container, .col2, .col3 { display: none; } .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; } </style>{HTML} {DIV(class="container")} 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: {CODE()} {img fileId=136 class="top-image" width="100%" height="auto"} {CODE} The CSS in the plugin will probably be moved to Tiki's -+ tiki-base.css +- stylesheet later on. This is the custom module content: {CODE()} <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> {CODE} !!! 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 < st~tc~~/tc~yle > tags): {CODE()} /* 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; } {CODE} If the image is to be the full width of the viewport (screen), then this CSS should also be used: {CODE()} .container.container-std.topbar-wrapper { max-width: 100%; } {CODE} 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.: {CODE()} $( 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') ); } {CODE} !!! 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 {JQ()}$( 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') ); }{JQ} {DIV}

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

Information	Version
Wed 13 of Jul, 2022 16:37 GMT chibaguy Changed the image.	7
Wed 13 of Jul, 2022 16:36 GMT chibaguy Added a description.	6
Wed 13 of Jul, 2022 16:25 GMT chibaguy Use CSS to hide side columns.	5
Wed 13 of Jul, 2022 16:23 GMT chibaguy	4
Wed 13 of Jul, 2022 16:20 GMT chibaguy Applied the CSS and JS.	3
Wed 13 of Jul, 2022 16:06 GMT chibaguy Removed irrelevant image.	2
Wed 13 of Jul, 2022 16:04 GMT chibaguy Page created and content copied from localhost.	1

Select action to perform with checked... Remove OK