$subtitle = $this->get_settings('subtitle');
$images = $this->get_settings('images');
+ if (!$images || count($images) < 1) return false; // Must have images to display
+
+ // Use first image in gallery to set size of slideshow
+ $image_meta = wp_get_attachment_metadata($images[0]['id']);
+ $image_ratio = round($image_meta['height'] / $image_meta['width'] * 100, 2) . '%';
+
// When this element is present, add a class to the body so the header can be styled differently (transparent background)
add_filter('body_class', function($classes) {
$classes[] = 'header-slideshow-present';
After recent updates, the parent must also have the class "elementor" for animations to work.
*/
?>
- <div class="header-slideshow-content">
- <div class="header-slideshow-content-inner elementor-element elementor-invisible" data-settings='{"animation":"fadeInUp","animation_delay":0}' data-element_type="section">
- <h1 class="header-slideshow-title"><?= $title ?></h1>
- <h2 class="header-slideshow-subtitle"><?= $subtitle ?></h2>
- </div>
+ <?php // Todo: add simple image slideshow with crossfade + nav (no need for a library) ?>
- <!-- Todo: handle images and simple carousel. See Elementor image-carousel.php -->
-
- </div>
+ <div class="header-slideshow-sizer" style="padding-bottom: <?= $image_ratio ?>; background-image:url(/wp-content/uploads/<?= $image_meta['file'] ?>);">
+ <div class="header-slideshow-content mx-2v elementor-element elementor-invisible" data-settings='{"animation":"fadeInUp","animation_delay":0}' data-element_type="section">
+ <h1 class="header-slideshow-title">
+ <span class="header-slideshow-title-text"><?= nl2br($title) ?></span>
+ <span class="header-slideshow-subtitle"><?= $subtitle ?></span>
+ </h1>
+ </div>
- <div class="header-slideshow-background-container">
- <div class="header-slideshow-background"></div>
</div>
-
</div>
<?php
--- /dev/null
+<?php
+
+namespace App\Composers;
+
+use Roots\Acorn\View\Composer;
+
+class Header extends Composer
+{
+ protected static $views = [
+ 'partials.header',
+ ];
+
+ public function with() {
+
+ // To allow for better management of the URLs and titles when translating,
+ // header buttons are stored in a separate menu location. Due to the design,
+ // there should only be a maximum of 2 links so these are extracted here.
+ $cta_nav = wp_get_nav_menu_items(get_nav_menu_locations()['cta_navigation']);
+ $button_1 = $cta_nav[0] ?? false;
+ $button_2 = $cta_nav[1] ?? false;
+
+ return compact('button_1', 'button_2');
+ }
+}
* @link https://developer.wordpress.org/reference/functions/register_nav_menus/
*/
register_nav_menus([
- 'primary_navigation' => __('Primary Navigation', 'sage')
+ 'primary_navigation' => __('Primary Navigation', 'sage'),
+ 'cta_navigation' => __('Header Buttons (2 items max)', 'cube')
]);
/**
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="26.073" height="26.074" viewBox="0 0 26.073 26.074">
+ <g id="Phones-Mobile-Devices_Phone-Actions_phone-actions-ring" data-name="Phones-Mobile-Devices / Phone-Actions / phone-actions-ring" transform="translate(-618.833 -488)">
+ <g id="Group_52" data-name="Group 52" transform="translate(619.749 488.75)">
+ <g id="phone-actions-ring">
+ <path id="Shape_194" data-name="Shape 194" d="M632.354,512.03l.011.008a4.88,4.88,0,0,0,6.074-.667l.682-.682a1.629,1.629,0,0,0,0-2.3l-2.878-2.876a1.629,1.629,0,0,0-2.3,0h0a1.626,1.626,0,0,1-2.3,0l-4.6-4.6a1.626,1.626,0,0,1,0-2.3h0a1.629,1.629,0,0,0,0-2.3l-2.877-2.876a1.628,1.628,0,0,0-2.3,0l-.683.682a4.88,4.88,0,0,0-.666,6.074l.007.011a44.024,44.024,0,0,0,11.834,11.832Z" transform="translate(-619.749 -488.394)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <path id="Shape_195" data-name="Shape 195" d="M630.25,496.25a4.882,4.882,0,0,1,4.881,4.881" transform="translate(-618.859 -488.115)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <path id="Shape_196" data-name="Shape 196" d="M630.25,492.5a8.949,8.949,0,0,1,8.949,8.949" transform="translate(-618.859 -488.432)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <path id="Shape_197" data-name="Shape 197" d="M630.25,488.75a13.017,13.017,0,0,1,13.017,13.017" transform="translate(-618.859 -488.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ </g>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="31.092" height="25.92" viewBox="0 0 31.092 25.92">
+ <g id="Group_502" data-name="Group 502" transform="translate(-83.941 -511.537)">
+ <g id="Group_501" data-name="Group 501" transform="translate(87.701 512.337)">
+ <line id="Line_144" data-name="Line 144" x2="11.693" transform="translate(8.338 24.321)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+ <line id="Line_145" data-name="Line 145" x2="15.905" transform="translate(10.451 16.585)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+ <path id="Path_601" data-name="Path 601" d="M86.893,524.11v-9.753a2.019,2.019,0,0,1,2.01-2.019h22.5a2.026,2.026,0,0,1,2.019,2.019v16.593a2.026,2.026,0,0,1-2.019,2.019H96.026" transform="translate(-86.893 -512.337)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+ </g>
+ <path id="Path_602" data-name="Path 602" d="M93.037,533.136l4.48-13.763-12.776,6.8,4.141,1.132-3.361,4,2.361,2.123,3.361-4Z" transform="translate(0 2.643)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>
+ </g>
+</svg>
--- /dev/null
+header.site
+ .header-slideshow-present &
+ position: absolute
+ top: 0
+ left: 0
+ width: 100%
+ background-color: transparent
+ z-index: 20
--- /dev/null
+$title_bg = rgba(#fff, 0.88)
+
+.header-slideshow
+ position: relative
+
+ &-sizer
+ @apply bg-cover bg-center
+
+ &:before
+ content: ''
+ position: absolute
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
+
+ &-content
+ position: absolute
+ constrain(left, 5vw)
+ constrain(bottom, 10vw)
+
+ // Note: for the title to have a semi-transparent background,
+ // we're limited by the font properties because the inline
+ // backgrounds can't overlap so we need to get the line-height
+ // and padding just right. Maybe it would be better if it was
+ // solid white... More details:
+ // https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
+ &-title
+ position: relative
+ line-height: 1.27
+ padding-right: 1rem // To match inline text below
+
+ &:before
+ top: 0.6em
+ left: -0.5em
+ width: 0.7em
+
+ // For multi-line padded text effect
+ // Ref: https://css-tricks.com/multi-line-padded-text/
+ &-text
+ @apply text-3xl
+ box-decoration-break: clone
+ display: inline
+ padding: 0 1rem
+ background-color: $title_bg
+
+
+ // Need to position this absolutely so it sits properly
+ // right at the bottom but without overlapping...
+ // (due to also having a semi-transparent background)
+ &-subtitle
+ background-color: $title_bg
+ position: absolute
+ top: 100%
+ left: 0
+ width: 100%
+ font-size: 23px
+ padding: 0 1rem 0.5em
<html {!! get_language_attributes() !!}>
@include('partials.head')
- <body @php(body_class('font-body font-light text-dark flex flex-col min-h-screen'))>
+ <body @php(body_class('font-body font-light text-dark'))>
- <div class="wrapper">
+ <div class="wrapper flex flex-col min-h-screen">
@php(wp_body_open())
@php(do_action('get_header'))
@include('partials.header')
-<header class="font-display font-medium uppercase text-sm">
- <div class="container px-2v pt-8 pb-12 flex items-center justify-between">
+<header class="site bg-white font-display font-medium uppercase text-sm">
+ <div class="container relative pl-2v pr-1v pt-8 pb-12 flex items-center justify-between">
<a class="flex-shrink-0 mr-4" href="{{ home_url('/') }}" aria-label="<?= _("Go to the home page") ?>">
<img class="header-logo" src="@asset('images/logo.svg')" alt="{{ get_bloginfo('name', 'display') }}">
</a>
@if (has_nav_menu('primary_navigation'))
- <nav class="nav-primary">
+ <nav class="nav-primary self-end">
{!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'menu-list', 'echo' => false]) !!}
</nav>
@endif
+
+ <div class="nav-secondary absolute top-0 right-0 flex items-center">
+
+ {{-- TODO: Add real language switcher here --}}
+ <ul class="flex mr-2">
+ <li><a href="#" class="mr-4 border-b-2 border-pink">FR</a></li>
+ <li><a href="#" class="mr-4">EN</a></li>
+ <li><a href="#" class="mr-4">AR</a></li>
+ <li><a href="#" class="mr-4">RU</a></li>
+ </ul>
+
+ @if ($button_1)
+ <a href="{{ $button_1->url }}" class="btn flex items-center">
+ <img src="@asset('images/teleconsultation.svg')" class="mr-2">
+ {{ $button_1->title }}
+ </a>
+ @endif
+
+ @if ($button_2)
+ <a href="{{ $button_2->url }}" class="btn flex items-center bg-teal">
+ <img src="@asset('images/rendezvous.svg')" class="mr-2">
+ {{ $button_2->title }}
+ </a>
+ @endif
+ </div>
</div>
</header>
'light': '#F6F5F5', // Light grey backgrounds
'purple-dark': '#2E2C40', // Footer and other dark sections
'pink': '#FF078B', // Accent colour
+ 'teal': '#2CC4CF', // Accent colour
},
fontFamily: {
'display': ['Dosis', 'sans-serif'], // Headings, labels, menus etc
projects / ccv-wordpress.git / commitdiff
