Add banner theme setting.

Author: kimisgold

asset/css/style.css

@@ -374,9 +374,16 @@ header a {
     max-width: 100%;
 }
 
-#header-image img {
-    max-width: 100%;
-    vertical-align: top;
+.banner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    @include container;
+}
+
+.banner img {
+    width: 100%;
 }
 
 #search-container {

asset/sass/_screen.scss

@@ -12,6 +12,29 @@ elements.logo.name = "logo"
 elements.logo.type = "Omeka\Form\Element\Asset"
 elements.logo.options.label = "Logo"
 
+elements.banner.name = "banner"
+elements.banner.type = "Omeka\Form\Element\Asset"
+elements.banner.options.label = "Banner"
+elements.banner.options.info = "A large image at the top of the page"
+
+elements.banner_height.name = "banner_height"
+elements.banner_height.type = "Text"
+elements.banner_height.options.label = "Banner height"
+elements.banner_height.options.info = "The maximum height the banner should use. Use valid CSS length units (px, em, rem, etc.)"
+
+elements.banner_height_mobile.name = "banner_height_mobile"
+elements.banner_height_mobile.type = "Text"
+elements.banner_height_mobile.options.label = "Banner height for mobile devices"
+elements.banner_height_mobile.options.info = "The maximum height the banner should use at smaller resolutions. Use valid CSS length units (px, em, rem, etc.)"
+
+elements.banner_position.name = "banner_position"
+elements.banner_position.type = "Laminas\Form\Element\Select"
+elements.banner_position.options.label = "Banner position"
+elements.banner_position.options.info = "Where to affix banner image when scaling down using a fixed height."
+elements.banner_position.options.value_options.center = "Fix to center"
+elements.banner_position.options.value_options.flex_start = "Fix to top"
+elements.banner_position.options.value_options.flex_end = "Fix to bottom"
+
 elements.nav_depth.name = "nav_depth"
 elements.nav_depth.attributes.id = "nav_depth"
 elements.nav_depth.type = "Number"
@@ -29,7 +52,7 @@ elements.footer.attributes.value = "Powered by Omeka S"
 
 elements.browse_layout.name = "browse_layout"
 elements.browse_layout.attributes.id = "browse_layout"
-elements.browse_layout.type = "Zend\Form\Element\Select"
+elements.browse_layout.type = "Laminas\Form\Element\Select"
 elements.browse_layout.options.label = "Layout for Browse Pages"
 elements.browse_layout.options.value_options.grid = "Grid"
 elements.browse_layout.options.value_options.list = "List"

config/theme.ini

@@ -13,6 +13,10 @@ $this->headScript()->prependFile($this->assetUrl('js/centerrow.js'));
 $this->headScript()->prependFile($this->assetUrl('js/jquery-accessibleMegaMenu.js'));
 $this->headScript()->prependFile($this->assetUrl('js/global.js', 'Omeka'));
 $this->headScript()->prependFile($this->assetUrl('vendor/jquery/jquery.min.js', 'Omeka'));
+$banner = $this->themeSettingAssetUrl('banner');
+$bannerHeight = $this->themeSetting('banner_height');
+$bannerHeightMobile = $this->themeSetting('banner_height_mobile');
+$bannerPosition = ($this->themeSetting('banner_position')) ? str_replace('_','-', $this->themeSetting('banner_position')) : 'center';
 $this->trigger('view.layout');
 $userBar = $this->userBar();
 ?>
@@ -24,6 +28,19 @@ $userBar = $this->userBar();
         <?php echo $this->headLink(); ?>
         <?php echo $this->headStyle(); ?>
         <?php echo $this->headScript(); ?>
+        <style>
+            .banner {
+                height: <?php echo ($bannerHeight !== '') ? $bannerHeight: 'auto'  ?>;
+                align-items: <?php echo $bannerPosition; ?>;
+            }
+        <?php if ($bannerHeightMobile !== ''): ?>
+            @media screen and (max-width:640px) {
+                .banner {
+                    height: <?php echo $bannerHeightMobile; ?>;
+                }
+            }
+        <?php endif; ?>
+        </style>
     </head>
 
     <?php echo $this->htmlElement('body'); ?>
@@ -45,6 +62,12 @@ $userBar = $this->userBar();
                     <button type="button" class="search-toggle" title="Toggle search"></button>
                 </div>
                 <?php echo $site->publicNav()->menu()->setPartial('common/accessible-mega-menu.phtml')->renderPartial(); ?>
+
+                <?php if ($banner): ?>
+                <div class="banner">
+                    <img src="<?php echo $this->themeSettingAssetUrl('banner'); ?>" title="Banner">
+                </div>
+                <?php endif; ?>
             </header>
 
             <div id="content" role="main">