Portfolio - Components

    • Home
    • 01. Universal Page - Content Type
View All Components

Universal Page - Content Type

Features:

  1. User defines whether to use sidebars on edit page
  2. User defines whether to use sticky functionality on edit page
  3. User chooses from 34 drag and drop components on edit page
  4. User defines section background images e.g. random images, fixed image or solid background on edit page

Notes:

  1. Gives content editor maximum flexibility
  2. On mobile sidebars drop into toggles to maximize ease of use
  3. Twig Tweak used to facilitate user define section backgrounds


 

Watch Short Video

page--node--universal-page.html.twig

 
{{ include('@hcann_subtheme/includes/header.html.twig') }}


	{% block content %}

		{{ page.content }}

	{% endblock %}


{{ include('@hcann_subtheme/includes/footer.html.twig') }}
node--universal-page.html.twig

 
<div role="main" class="main">


{% if node.field_page_section_type.value == '2' %}

	<section class="page-header page-header-modern page-header-background page-header-background-md parallax overlay overlay-color-dark overlay-show overlay-op-5 mt-0" data-plugin-parallax data-plugin-options="{'speed': 1.2}" data-image-src="{% if node.field_random_images.value == '1' %}{{ url('<front>')|render ~ file_url('public://random-images') }}/{{ random(1, 8) }}.jpg {% else %}{{ content.field_section_background_image.0 }}{% endif %}">

		<div class="container">

			<div class="row">

				<div class="col-md-12 align-self-center p-static order-2 text-center">

					<h1><b>{{ node.label }}</b></h1>

				</div>

				<div class="col-md-12 align-self-center order-1">

					{# {{ page.breadcrumb }}  #}

          {# Twig Tweak -  https://git.drupalcode.org/project/twig_tweak/-/blob/3.x/docs/cheat-she… #}

          {# see breadcrumb.html.twig for theme #}


         {{ drupal_breadcrumb() }}


				</div>

			</div>

		</div>

	</section>


{% else %}

  <section class="page-header page-header-classic mb-0 bg-tertiary">

					<div class="container">

						<div class="row">

							<div class="col-md-8 order-2 order-md-1 align-self-center p-static">

								<h1 class="font-weight-bold text-dark" data-title-border>{{ node.label }}</h1>

							</div>

						</div>

					</div>

				</section>

				<section class="page-header bg-color-light border-bottom border-width-2 py-4">

					<div class="container">

						<div class="row">

							<div class="col align-self-center p-static">

								<ul class="breadcrumb d-block">

									 {{ drupal_breadcrumb() }}

								</ul>

							</div>

						</div>

					</div>

				</section>

  {% endif %}


  <div class="container pt-3 pb-2">

      {% if ( node.field_sticky_sidebars.value != '1' )  %}

          <div class="row pt-2">

          {% if ( node.field_show_left_sidebar.value == '1' )  %}

                      <div class="col-lg-3 px-4">

                      {{ include('@hcann_subtheme/templates/content/universal-page/inc/left-sidebar.html.twig') }}

                        <aside class="sidebar d-none d-lg-block">

                        {{ content.field_left_sidebar_bundle }}

                        </aside>

                      </div>

          {% endif %}

          {# open dynamic width col #}

            {% if ( node.field_show_left_sidebar.value == '1' ) b-xor ( node.field_show_right_sidebar.value == '1' )   %}

                      <div class="col-lg-9 px-4">

            {% elseif ( node.field_show_left_sidebar.value == '1' ) and ( node.field_show_right_sidebar.value == '1' )   %}

                      <div class="col-lg-6 px-4">

            {% else %}

                      <div class="col-lg-12 px-4">

            {% endif %}

                        {{ content.field_main_bundle }}

                      </div>

          {# close dynamic width col #}

          {% if ( node.field_show_right_sidebar.value == '1' )  %}

                      <div class="col-lg-3 mt-4 mt-lg-0 px-4">

                      {{ include('@hcann_subtheme/templates/content/universal-page/inc/right-sidebar.html.twig') }}

                        <aside class="sidebar d-none d-lg-block">

                          {{ content.field_right_sidebar_bundle }}

                        </aside>

                      </div>

          {% endif %}

          </div>

      {% else %}

          <div class="row pt-2">

          {% if ( node.field_show_left_sidebar.value == '1' )  %}

                      <div class="col-lg-3 position-relative px-4">

                      {{ include('@hcann_subtheme/templates/content/universal-page/inc/left-sidebar.html.twig') }}

                        {# desktop open #}

                       <aside class="sidebar d-none d-lg-block" id="rsidebar" data-plugin-sticky="" data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}" style="">

                          {{ content.field_left_sidebar_bundle }}

                        </aside>

                         {# desktop close #}

                      </div>

          {% endif %}

          {# open dynamic width col #}

            {% if ( node.field_show_left_sidebar.value == '1' ) b-xor ( node.field_show_right_sidebar.value == '1' )   %}

                      <div class="col-lg-9 px-4">

              {% elseif ( node.field_show_left_sidebar.value == '1' ) and ( node.field_show_right_sidebar.value == '1' )   %}

                      <div class="col-lg-6 px-4">

              {% else %}

                      <div class="col-lg-12 px-4">

            {% endif %}

                        {{ content.field_main_bundle }}

                      </div>

          {# close dynamic width col #}

          {% if ( node.field_show_right_sidebar.value == '1' )  %}

                      <div class="col-lg-3 position-relative px-4">

                      {{ include('@hcann_subtheme/templates/content/universal-page/inc/right-sidebar.html.twig') }}

                        {# desktop open #}

                       <aside class="sidebar d-none d-lg-block" id="rsidebar" data-plugin-sticky="" data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}" style="">

                          {{ content.field_right_sidebar_bundle }}

                        </aside>

                         {# desktop close #}

                      </div>

          {% endif %}

          </div>

      {% endif %}


	</div>

</div>
header.html.twig

 
<header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 148, 'stickySetTop': '-148px', 'stickyChangeLogo': true}">

  <div class="header-body border-color-primary border-top-0 box-shadow-none">

    <div class="header-top header-top-default border-bottom-0 border-top-0">

      <div class="container">

        <div class="header-row py-0 my-0">

          <div class="header-column justify-content-start">

            <div class="header-row">

              <nav class="header-nav-top">

                {{ page.top_header }}

              </nav>

            </div>

          </div>

          <div class="header-column justify-content-end">

            <div class="header-row">

              {{ page.top_header_social }}

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="header-container container z-index-2">

      <div class="header-row py-2">

        <div class="header-column">

          <div class="header-row">

            <div class="header-logo header-logo-sticky-change">

										<a href="{{ front_page }}">

											<img class="header-logo-sticky opacity-0" alt="LOGO" width="100" height="48" data-sticky-height="30" data-sticky-width="62" data-sticky-top="85" src="/themes/custom/hcann_subtheme/assets/img/logos/logo-w.png">

											<img class="header-logo-non-sticky opacity-0" alt="LOGO" width="150" height="62" src="/themes/custom/hcann_subtheme/assets/img/logos/logo-b.png">

										</a>

									</div>

          </div>

        </div>

        <div class="header-column justify-content-end">

          <div class="header-row">

            {{ page.header_right }}

          </div>

        </div>

      </div>

    </div>

    <div class="header-nav-bar bg-primary" style="background: #ffffff;" data-sticky-header-style="{'minResolution': 991}" data-sticky-header-style-active="{'background-color': 'transparent'}" data-sticky-header-style-deactive="{'background-color': '#ffffff'}">

      <div class="container">

        <div class="header-row">

          <div class="header-column">

            <div class="header-row justify-content-end">

              <div class="header-nav header-nav-force-light-text justify-content-center py-0 py-lg-0" data-sticky-header-style="{'minResolution': 991}" data-sticky-header-style-active="{'margin-left': '135px'}" data-sticky-header-style-deactive="{'margin-left': '0'}">

              <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">

              <nav class="collapse">

                    {{ page.primary_menu }}

                </nav>

                </div>

                <button class="btn header-btn-collapse-nav my-2" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">

                  MENU <i class="fas fa-bars"></i>

                </button>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</header>
footer.html.twig

 
<footer id="footer" class="footer-texts-more-lighten">

        <div class="container">

          <div class="row py-4 my-5">

           {{ page.footer_first }}

           {{ page.footer_second }}

           {{ page.footer_third }}

           {{ page.footer_fourth }}

          </div>

        </div>

        <div class="container">

          <div class="footer-copyright footer-copyright-style-2 pt-4 pb-5">

            <div class="row">

              <div class="col-12 text-center">

                 {{ page.footer_fifth }}

              </div>

            </div>

          </div>

        </div>

      </footer>
right-sidebar.html.twig

 
{# mobile open #}

<div class="toggle toggle-primary toggle-simple d-lg-none" data-plugin-toggle="">

    <section class="toggle">

    <a class="toggle-title pt-1"><h2 class="mb-2" data-plugin-animated-letters data-plugin-options="{'animationName': 'fadeInUpShorter', 'animationSpeed': 10, 'startDelay': 0, 'minWindowWidth': 0}">Right Sidebar</h2></a>

    <div class="toggle-content my-4">

        <aside class="sidebar" id="rsidebar" data-plugin-sticky="" data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}" style="">

            {{ content.field_right_sidebar_bundle }}

        </aside>

    </div>

    <section>

</div>

{# mobile close #}
left-sidebar.html.twig

 
{# mobile open #}

<div class="toggle toggle-primary toggle-simple d-lg-none" data-plugin-toggle="">

    <section class="toggle">

    <a class="toggle-title pt-1"><h2 class="mb-2" data-plugin-animated-letters data-plugin-options="{'animationName': 'fadeInUpShorter', 'animationSpeed': 10, 'startDelay': 0, 'minWindowWidth': 0}">Left Sidebar</h2></a>

    <div class="toggle-content my-4">

        <aside class="sidebar" id="rsidebar" data-plugin-sticky="" data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}" style="">

            {{ content.field_left_sidebar_bundle }}

        </aside>

    </div>

    <section>

</div>

{# mobile close #}