LogoLogo
9.0.x
9.0.x
  • Overview
    • About Varbase
    • Roadmap
    • Release Cycle and Supported Versions
    • How to Get Support
  • Developers
    • Getting Started
    • Installing Varbase
      • Requirements
      • Installing Varbase with DDEV
      • Installing Varbase with Lando
    • Understanding Varbase
      • Basic Concepts
      • Core Components
        • Varbase Core
          • Varbase Admin
          • Varbase Page
          • Varbase Security
          • Varbase Webform
          • Varbase Default Content
          • Varbase Tour
        • Varbase Media
        • Varbase Editor
        • Varbase Email
        • Varbase SEO
        • Varbase Workflow
        • Varbase Layout Builder
          • Varbase Landing page (Layout Builder)
          • Varbase Heading Block
          • Varbase Rich Text Block
          • Varbase HTML Code Block
          • Varbase Media (Image/Video) Block
          • Varbase Gallery Block
        • Varbase Total Control Dashboard
        • Vartheme Claro
        • Vartheme BS4
      • Optional Components
        • Varbase API
        • Varbase Internationalization
        • Varbase Media Hero Slider
        • Varbase Carousels
        • Varbase Blog
        • Varbase Search
        • Varbase Social Single Sign-On
        • Varbase Media Twitter
        • Varbase Media Instagram
        • Varbase Content Planner
        • Varbase Bootstrap Paragraphs
          • Varbase Bootstrap Paragraphs Text and Image
        • Varbase Landing Page (Paragraphs)
      • Additional Components
        • Varbase Media Header
        • Varbase FAQs
        • Varbase Reports
        • Varbase Commerce
        • Varbase YouTube Import
      • Development Components
        • Varbase Development
        • Varbase Style Guide
        • Reroute Email
        • Varbase Updates Helper
    • Configuring a Varbase Site
      • Navigation
        • Defining Active Menu Trail Using Menu Position
      • Using View Modes Inventory
      • Content Moderation and Workflows
      • URL Aliases in Varbase/Drupal
        • Configuring URL Aliases
        • Managing URL Aliases
      • Managing URL Patterns for Multilingual Websites
      • Managing Date and Time Formats to Display Across the Site
      • Using Varbase Layout Builder
        • Creating a Landing Page With Varbase Layout Builder
        • Activating Varbase Layout Builder for Content Types
      • Configuring Pathologic When Going Live
      • Configuring SEO Features
        • Disallow Oembed Media Links
      • Configuring Security Features
        • Spam Protection
        • Password Policies
        • Other Security Kits
        • Flood Contorl
        • Enable HTTP Password Authentication
      • Configuring JSON:API Features
      • Configure Varbase Media Hero Slider
      • Configuring Varbase Media Header
      • Configuring Varbase Mailer Settings
        • Configure Symfony Mailer
        • Configure Swift Mailer
        • Switch From Swift Mailer to Symfony Mailer
      • Entity Definition Update Manager Class
      • Module Installer Factory Class
    • Theme Development with Varbase
      • Understanding The Vartheme Base Theme
      • Creating Your Own Theme
      • Local Tasks and Moderation Sidebar
      • Add Preloaded Fonts in Vartheme
      • Switch From Node SASS to Dart SASS for Old Sub-Themes
    • Launching a Varbase Site to Production
    • Updating a Varbase Site
      • Understanding Varbase Updater Package
      • Handling Patches When Updating
      • Handling Configuration Updates
      • Updating Varbase to work with Composer 2.0
      • Updating Drush to the Latest Stable Version
      • Version Update Guides
        • Updating Varbase ~9.0 to Drupal 10
        • Switch from CKEditor 4 to CKEditor 5 in Varbase ~9.1.0
        • Updating from Varbase 8.x to 9.x
    • Varbase Patches
    • Frequently Asked Questions (FAQs)
    • Extending Varbase
      • Overriding Varbase
      • Creating Your Own Feature
      • Creating A Sub Profile From Varbase
        • Varbase Sub Profile Generator
        • Varbase Sub Profile Basic Template
        • Varbase Sub Profile Basic Project Template
      • Install Needed YARN and Gulp Tools
      • Compiling Provided Component Styles
      • Check Standards/Practice Coding And Linting
  • Content Designers
    • Terminology
    • Accessing the Administration Area
      • Website Environments
    • User Management
      • Allow Email/Username Login & Registration
      • Default Roles and Site Personas
        • Edit Roles' Permissions
        • Managing Roles
      • Add User
      • Edit User
      • Masquerading as another user
    • Dashboard
      • Reports
    • Content Structure
      • EntityQueues
      • Menu Management
        • Add Menu Items
        • Update Menu Items
        • Adding a Page to the Menu
      • Taxonomies
        • Manage Vocabulary
        • Edit Vocabulary
        • List Terms
        • Add Terms
        • Reorder and Edit Terms
      • Webforms
        • Setting up Emails Handler Conditions
        • Setting up Confirmations Message Settings Types
    • Content Management
      • Create Content
        • Add a Basic page
        • Add a Landing page
        • Add Blog
        • Add Media
          • Image
          • Remote video
          • Video
      • Modify Content
      • Delete Content
      • Preview Content
      • Bulk Edit Content
      • Content Moderation
      • Publish Content
      • URL Alias
    • About Layout Builder
      • Section
      • Custom Blocks
        • Heading Block
        • Basic Block
        • Media Block(Image/Video)
        • Rich-Text Editor “WYSIWYG”
      • Managing Blocks
    • Search Engine Optimization
      • XML Sitemap
      • Meta Tags in Varbase
      • URL Redirects
      • Domain Redirects
      • Prevent a Single Content From Being Indexed
    • Site Configuration
      • System
        • Clearing Varbase Cache
        • Google analytics
        • Mail templates
      • User interface
      • Development
      • Varbase settings
      • Web services
    • Common Error Handling Tips
  • Contributing
    • Contributing to Documentation
Powered by GitBook
On this page
  • Activate Media Header For Content Types
  • Varbase Media Header Settings
  • Hide breadcrumbs
  • Place The Varbase Media Header Block
  • Example Basic Page With Media Header
  • 1. Activate Media Header
  • 2. Check Manage Fields For Basic Page Content Type
  • 3. Check Manage Form Display For Basic Page Content Type
  • 4. Create Basic Page Form
  • 5. Filling Data and Adding Media then Saving
  • 6. Configuring the Block
  • 7. Check the Front End Page
  • 8. Check Reflection on Change of Options
  • Activate Media Header For Taxonomy Terms
  • Example Blog Categories Teams With Media Header
  • Change The Default Height and Background Color
  1. Developers
  2. Configuring a Varbase Site

Configuring Varbase Media Header

PreviousConfigure Varbase Media Hero SliderNextConfiguring Varbase Mailer Settings

Last updated 1 year ago

Having a universal media header style on top of web pages.

Site builders can activate that for content types.

Activate Media Header For Content Types

Varbase Media Header Settings

  • Navigate to Configuration \ Varbase settings \ Varbase Media Header settings

  • Landing on the "/admin/config/varbase/varbase-media-header" admin link. A list of content types are listed with activated or not activated media header.

  • Select entity types which are going to use the varbase media header. To enable varbase media header for these selected entity types and bundles.

  • Press the Save Configuration submit button to activate new configs for the selected content types.

This will add two new fields to each selected content type:

  • Main media (field_media): to store the media for the header

  • Page header style (field_page_header_style):

Which stores the choice of header as :

  • Standard (standard)

  • Media Header (media_header)

For sure more custom page header styles could be added to the field. But that will need a custom template logic to follow with that.

Hide breadcrumbs

  • Check Hide breadcrumbs to prevent the breadcrumbs from appearing in the Media Header automatically. To control where the breadcrumbs appear using the normal block placement from Block layout page.

Place The Varbase Media Header Block

  • Navigate to Structure \ Block layout and place the Varbase Media Header block

    (usually at the top of the top bar)

  • Configure the block by choosing 'main media'for each activated content type. Or other media field which are selected to work as the background image for the media header.

  • Choose 'Media header' for the media view mode. Unless you want a particular view mode, but 'Media header' will ensure the module template will be used and give you control

    of the display settings.

Example Basic Page With Media Header

1. Activate Media Header

Activate the Varbase Media Header for the Basic page content type. By navigating to "/admin/config/varbase/varbase-media-header". And checking the Basic page check box and press "Save configuration".

After saving the configuration the system will process the selected content types, and import new configs for them.

On the case of a successful activation the following message will show up

Status Message:

The configuration options have been saved.

2. Check Manage Fields For Basic Page Content Type

Navigate to "/admin/structure/types/manage/page/fields"

Notice two new fields:

  • Main media (field_media)

  • Page header style (field_page_header_style):

In case that the (field_media, and field_page_header_style) fields are not listed in the page. That is indication that the activation process did not work in the right way.

3. Check Manage Form Display For Basic Page Content Type

Navigate to "/admin/structure/types/manage/page/form-display"

The Page header style field should have the "Check boxes/radio buttons" widget.

The Main media field should have the "Media Library" widget. And Tab order: Image, Remote video, Video.

4. Create Basic Page Form

Navigate to Content \ Add content \ Basic page . Then the new two fields should show up in the form. Under the Media Header sidebar form region.

5. Filling Data and Adding Media then Saving

  • Fill in the "About Us" for the Title filed.

  • Fill in the Body field with needed content.

  • Add a media image file for example to the Main media field. Make sure that the width and height are good to fit for wide screens. At lest 1600px width and 800px height.

  • Select "Media Header" for the Page header style.

After saving the "Basic page About Us has been created." and the page will look with no media header yet.

6. Configuring the Block

  • Navigate to Structure \ Block layout for your default theme

  • Click on the "Place Block" button for the "Content" region ( or any custom region the theme could have for a project ).

  • Select the Varbase Media Header block and click on the "Place block" button next to the name.

  • Un-check the "Display title" check box

  • Select "Main media" field name for the "Basic page" content type. To use this field as the source for the media background for the header.

  • Select "Media Header" for the "Media view mode" config option to size the background media. media header is the default view mode. But it can be changed to any other custom media view mode.

Only Place one Varbase Media Header block. which will work for all activated content types.

Having more than one will have a duplicate header and duplicate processing.

One will work. Varbase Media Header block handle all needed restrictions and access process.

After saving the block configs, the block will be placed in the content region, but not in the right order.

At lest it should be re-ordered on top of the "Main page content" block

  • Save Blocks in the Block layout admin page

7. Check the Front End Page

  • Open the example "about us" Basic page.

  • Check if the text is visible on top the image.

8. Check Reflection on Change of Options

If the Main media field was removed on editing the page. But kept the "Media Header" option selected for the Page header style field. The page will show the header with a default background color.

Activate Media Header For Taxonomy Terms

Example Blog Categories Teams With Media Header

Activate the Varbase Media Header for the Blog Categories term. By navigating to "/admin/config/varbase/varbase-media-header". And checking the Blog Categories check box under Taxonomy terms and press "Save configuration".

After saving the configuration the system will process the selected taxonomy terms, and import new configs for them.

On the case of a successful activation the following message will show up

Status Message:

The configuration options have been saved.

  • Navigate to Structure \ Block layout for your default theme

  • Click on the "Place Block" button for the "Content" region ( or any custom region the theme could have for a project ).

  • Select the Varbase Media Header block and click on the "Place block" button next to the name.

  • Un-check the "Display title" check box

  • Select "Main media" field name for the "Blog Categories" Taxonomy term. To use this field as the source for the media background for the header.

  • Select "Media Header" for the "Media view mode" config option to size the background media. media header is the default view mode. But it can be changed to any other custom media view mode.

Only Place one Varbase Media Header block. which will work for all activated taxonomy terms and content types.

Having more than one will have a duplicate header and duplicate processing.

One will work. Varbase Media Header block handle all needed restrictions and access process.

After saving the block configs, the block will be placed in the content region, but not in the right order.

At lest it should be re-ordered on top of the "Main page content" block

  • Save Blocks in the Block layout admin page

  • Create a new term "Sport" in the Blog Categories taxonomy

  • Open the example "Sport" term page.

  • Check if the text is visible on top the image.

  • Change the Image to fit needed term with images, or videos.

Change The Default Height and Background Color

  • Check if the text is visible on top the image.

Override the varbase_media_header/media_header_styling library in the custom default theme

media_header_styles:
  css:
    component:
      css/components/media-header.component.css: {}

Varbase Media Header default variables are:

// -----------------------------------------------------------------------------
// Varbase Media Header.
// -----------------------------------------------------------------------------

// Varbase Media Header container height.

$vmh-container-v-padding: 3.75rem;
$vmh-container-h-padding: 1rem;

$vmh-container-min-height: 300px;
$vmh-container-max-height: 300px;

$vmh-container-min-height-lg: 300px;
$vmh-container-max-height-lg: 300px;

$vmh-container-top-margin: 0;
$vmh-container-bottom-margin: 0.6875rem;

// Varbase Media Header fallback container background color.
$vmh-fullback-container-background-color: #338ec7;

// Varbase Media Header content text general style.
$vmh-content-text-color: #fff;

// Varbase Media Header title style.
$vmh-title-color: #fff;
$vmh-title-font-size: 1.875rem;
$vmh-title-font-size-lg: 3.625rem;

// Varbase Media Header breadcrumb style.
$vmh-breadcrumb-color: #fff;
$vmh-breadcrumb-font-size: 0.75rem;
$vmh-breadcrumb-font-size-lg: 0.875rem;

After compiling SCSS files to CSS files and having the custom styling library.

Use the libraries-override method to replace the library in custom themes.

libraries-override:
  varbase_media_header/media_header_styling: custom_theme/custom_header_styling

Copy the files if you are working with SASS, and change values in the file.

SCSS
variables.scss
Varbase Media Header
Admin Menu link to Varbase Media Header Settings
Varbase Media Header Settings Page
Checked Basic Page Content Type Under Varbase Media Header Settings
Status Message: The Configuration Options Have Been Saved
Manage Fields For Basic Page Content Type
Manage Form Display For Basic Page Content Type
Create Basic Page After the Activation for Varbase Media Header
Filled Data in the Create Basic Page Form with Varbase Media Header
No Media Header Yet
Place Block Next to Content Region for the Current Default Theme
Varbase Media Header - Place Block
Varbase Media Header - Place Block - Configurations
Initial Order for the Varbase Media Header Block
Re-ordered the Location on Top of the Main Page Content
Basic Page - Example With Media Header
Basic Page - Example With Media Header but no Media
Checked Blog Categories Taxonomy Terms Under Varbase Media Header Settings
Status Message: The Configuration Options Have Been Saved
Place Block Next to Content Region for the Current Default Theme
Varbase Media Header - Place Block
Place Block Next to Content Region for the Current Default Theme
Initial Order for the Varbase Media Header Block
Re-ordered the Location on Top of the Main Page Content
Add Media Header for Taxonomy Term
Blog Category Sport Term with a Media Header