Configuring Varbase Media Header

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

Site builders can activate that for content types.

Varbase Media Header

Activate Media Header For Content Types

Varbase Media Header Settings

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

Admin Menu link to 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.

Varbase Media Header Settings Page

• 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".

Checked Basic Page Content Type Under Varbase Media Header Settings

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.

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):

Manage Fields For Basic Page Content Type

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.

Manage Form Display For Basic Page Content Type

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.

Create Basic Page After the Activation for Varbase Media Header

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.

Filled Data in the Create Basic Page Form with Varbase Media Header

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

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 ).

Place Block Next to Content Region for the Current Default Theme

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

Varbase Media Header - Place Block

• 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.

Varbase Media Header - Place Block - Configurations

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.

Initial Order for the Varbase Media Header Block

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

Re-ordered the Location on Top of the Main Page Content

• 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.

Basic Page - Example With Media Header

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.

Basic Page - Example With Media Header but no Media

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".

Checked Blog Categories Taxonomy Terms Under Varbase Media Header Settings

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.

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 ).

Place Block Next to Content Region for the Current Default Theme

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

Varbase Media Header - Place Block

• 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.

Place Block Next to Content Region for the Current Default Theme

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.

Initial Order for the Varbase Media Header Block

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

Re-ordered the Location on Top of the Main Page Content

• Save Blocks in the Block layout admin page

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

Add Media Header for Taxonomy Term

Open the example "Sport" term page.

Blog Category Sport Term with a Media Header

• 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

Varbase Components has a Media Header component with all custom styling and variables.

Follow with:

Customize a Varbase Single Directory Components (SDC) In a Custom Theme

The Media Header Component

The universal media header style on top of web pages.

Properties:

• media_type: Media entity type. (image, video, remote_video).

• provider: Video provider for remote videos. (youtube, vimeo).

• utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to this to this component.

Attributes:

• N/A

Slots:

• page_breadcrumbs: Media Header page breadcrumbs.

• page_title: Media Header page title.

• background_media: Background media (Image, local or remote videos).

Examples of Using in Custom Templates:

Example #1: Default use in Varbase Media Header

{%
  include 'varbase_components:media-header' with {
    media_type: vmh_media_type|default(''),
    provider: provider|default(''),
    background_media: vmh_background_media|default(''),
    page_breadcrumbs: vmh_page_breadcrumbs|default(''),
    page_title: vmh_page_title|default('')
  }
%}

Example #2: Page title with custom prefix

{%
  include 'varbase_components:media-header' with {
    media_type: '',
    provider: '',
    background_media: '',
    page_breadcrumbs: breadcrumb,
    page_title: 'Custom title prefix -' ~ page_title
  }
%}

Example #3: Media Header for node with no breadcrumbs

{%
  include 'varbase_components:media-header' with {
    media_type: '',
    provider: '',
    background_media: '',
    page_breadcrumbs: '',
    page_title: node.label
  }
%}

Styling Variables for Varbase Media Header

// -----------------------------------------------------------------------------
// 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;