Backport from Azbalac WordPress Theme, header image improvementsv0.3.0

7 files changed, 176 insertions, 196 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1aea823..7b5f476 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,38 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## 0.3.0 - 2020-12-20
+
+### Changed
+
+- Header image handling backported from Azbalac WordPress theme, now the header image loads with picture element, removed JavaScript code to load header image
+- Cleanup of JavaScript code due to header image settings
+- width and height options in the section `[params.theme.header]` are not used anymore, you can just delete them
+
+### Added
+
+- New option to move title and subtitle above the header image (if it is placed on the header image) on small displays. Previously this was done automatically, now the behavior can be customized. See option `moveTitle` in the `[params.theme.header]` section in config.toml of `exampleSite` folder.
+
+## 0.2.8 - 2020-06-10
+
+### Changed
+
+- Fix: https://github.com/geschke/hugo-tikva/issues/6 (Switch to UMD version of popper.js)
+
+## 0.2.7 - 2020-05-31
+
+### Changed
+
+- Fix: https://github.com/gohugoio/hugoThemes/issues/858 (Broken Themes on the Hugo Showcase)
+
+## 0.2.6 - 2020-02-20
+
+### Changed
+
+- Bootswatch and modified themes update
+- jQuery, Bootstrap, popper.js update
+
 ## 0.2.5 - 2019-08-28
 
 ### Changed
@@ -15,7 +47,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Example content in sidebar, footer and subfooter will be shown as default when the section content folders are missing. The example content comes from the config.toml file, so just delete these lines or deactivate the section concerned.
 
-
 ## 0.2.4 - 2019-07-26
 
 ### Changed
diff --git a/README.md b/README.md
index a4f0545..0a2012d 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Tikva Theme for Hugo
 
 Tikva is a minimalistic Hugo theme, based on [Bootstrap v4](https://getbootstrap.com/) CSS framework.
-It is a port of the Tikva theme which I developed a while ago for Grav CMS and WordPress, but there are also some features added from the (currently unpublished) Azbalac Theme for WordPress.
+It is a port of the Tikva theme which I developed a while ago for Grav CMS and WordPress, but there are also some features added from the (still unpublished) Azbalac Theme for WordPress.
 Tikva integrates multiple Bootstrap styles from the Bootswatch project and adds some customized styles.
 It's also possible to edit some color options by config option.
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 0908e6e..3d61259 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -86,8 +86,9 @@ paginate = 2
 
     image = 'img/header_bg_example.jpg' # Use header image. This option is only valid if the theme is configured to the "header" style. 
     
-    width = 2512 # Width of header image. Please set this value to the correct size, because it will be used for size calculation.
-    height = 673 # Height of header image. Please set this value to the correct size, because it will be used for size calculation.
+    # width and height settings are not used anymore
+    #width = 2512 # Width of header image. Please set this value to the correct size, because it will be used for size calculation.
+    #height = 673 # Height of header image. Please set this value to the correct size, because it will be used for size calculation.
     altText = 'alt text for header image' # Set alt text for header image, default empty
     displayHeaderText = true # display the title and subtitle - yes or no?
     titleOnImage = true # true|false, default false. Display title and subtitle as overlay in the foreground of the image. It is only possible to set the title as image overlay if an image is available. If no image is configured, the theme will do a fallback to non-overlay, i.e. title and subtitle will be displayed above the main navigation. 
@@ -99,6 +100,8 @@ paginate = 2
     overlayDistanceBetween = '0' # Distance between title and subtitle 
     overlayBackgroundColor = '#000000'
     overlayTransparency = '0' # default 70%, allowed values from 0 - 100 (without % sign!). This option enables a transparent background of title and subtitle. This is useful if the "titleOnImage" option is true, so the title is placed as overlay above the image. If this option is set to 0 or an empty value, the transparency color setting will be disabled. 
+    moveTitle = false # If title is placed as overlay: Move title above the header image on small smartphone displays, default false
+
 
 # Footer configuration
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 1567ac1..f184e7d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -20,9 +20,7 @@
 
 
 <script type="text/javascript">
-    var azbalacHeaderImage = [{"url":"{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }}",
-    "height": '{{ .Site.Params.Theme.Header.Height }}',
-    "width": '{{ .Site.Params.Theme.Header.Width }}'},"","",""];
+    var azbalacSettingHeaderMoveTitle = '{{ .Site.Params.Theme.Header.MoveTitle }}';
 </script>
 <script src="{{ .Site.BaseURL }}js/jquery-3.4.1.min.js"></script>
 <script src="{{ .Site.BaseURL }}js/functions.js"></script>
diff --git a/layouts/partials/header_default.html b/layouts/partials/header_default.html
index 2b6ffbb..ef1baff 100644
--- a/layouts/partials/header_default.html
+++ b/layouts/partials/header_default.html
@@ -53,7 +53,15 @@
             
 
             <div id="site-header-above">
-                {{- if .Site.Params.Theme.Header.Image -}}<a href="{{ .Site.BaseURL }}" rel="home"><img id="site-header-image" src="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }}" width="1" height="1" data-width="{{ .Site.Params.Theme.Header.Width }}" data-height="{{ .Site.Params.Theme.Header.Height }}" alt="{{ .Site.Params.Theme.Header.AltText }}">
+                {{- if .Site.Params.Theme.Header.Image -}}<a href="{{ .Site.BaseURL }}" rel="home">
+                <picture>
+                        <source media="(min-width: 1200px)" srcset="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }} 1110w">
+                        <source media="(min-width: 992px) and (max-width: 1199.98px)" srcset="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }} 930w">
+                        <source media="(min-width: 768px) and (max-width: 991.98px)" srcset="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }} 690w">
+                        <source media="(min-width: 576px) and (max-width: 767.98px)" srcset="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }} 510w">
+                        <source media="(max-width: 575.98px)" srcset="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }} 476w">
+                        <img id="site-header-image" src="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }}" style="max-width: 100%; width: 100%">
+                </picture>
                 </a>{{- end -}}
 
                 {{ if and .Site.Params.Theme.Header.TitleOnImage .Site.Params.Theme.Header.DisplayHeaderText }}
diff --git a/static/css/custom.css b/static/css/custom.css
index dccfc08..fbfdca0 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -58,8 +58,7 @@
 
 /* default: hidden, will be shown by JavaScript */
 #site-header-above {
-  display: none;
-  position: relative;
+   position: relative;
 }
 
 #site-header-above img {
diff --git a/static/js/functions.js b/static/js/functions.js
index 6d5c800..bf188eb 100644
--- a/static/js/functions.js
+++ b/static/js/functions.js
@@ -6,163 +6,104 @@
  *
  */
 ( function( $ ) {
-	var body    = $( 'body' );
-		//_window = $( window );
+  var body    = $( 'body' );
+    //_window = $( window );
+
+
+  var mediaSize = '';
+  var azbalacHeaderImageClassPos = '';
+
+  $.moveHeader = function(moveAbove) {
+    // if title and subtitle is placed as overlay of the header image, 
+    // move this above the header image
+    var headerImage = $('#site-header-container-overlay');
+    if (! headerImage.length) {
+      return false;
+    }
+
+    if (azbalacHeaderImageClassPos == '' ) { // only check once when page is loaded
+      if (headerImage.hasClass('fixed-top')) { // store for later usage
+        azbalacHeaderImageClassPos = 'fixed-top';
+        
+      } else if (headerImage.hasClass('fixed-bottom')) {
+        azbalacHeaderImageClassPos = 'fixed-bottom';
+      }
+    }
+    if (moveAbove == true) {
+
+      headerImage.appendTo($('#site-header-container-above')).removeClass('position-absolute');
+    
+      headerImage.removeClass(azbalacHeaderImageClassPos);
+      $('#site-header-container-overlay').addClass('col');
+      if (typeof azbalacSettingHeaderColor != 'undefined' && typeof azbalacSettingHeaderColor.bg != 'undefined') {
+        $('#site-header-box-title').css('background', azbalacSettingHeaderColor.bg);
+        $('#site-header-box-subtitle').css('background', azbalacSettingHeaderColor.bg);
+        $('#site-header-container-overlay').css('left','0px').css('top','0px').css('right', '0px').css('bottom','0px');
+        $('#site-header-text a').css('background', azbalacSettingHeaderColor.bg);
+        $('#site-description').css('background', azbalacSettingHeaderColor.bg);		
+      } 
+    } 
+    else {
+      headerImage.appendTo($('#site-header-above')).addClass('position-absolute');
+      headerImage.addClass(azbalacHeaderImageClassPos);
+      $('#site-header-container-overlay').removeClass('col');
+      if (typeof azbalacSettingHeaderColor != 'undefined' && typeof azbalacSettingHeaderColor.bg != 'undefined') {
+        $('#site-header-box-title').css('background', '');
+        $('#site-header-box-subtitle').css('background', '');
+        $('#site-header-container-overlay').css('left','').css('top','').css('right', '').css('bottom','');
+        
+        $('#site-header-text a').css('background','');
+        $('#site-description').css('background', '');		
+      } 
+    }
 
 
-	var mediaSize = '';
-	var azbalacHeaderImageClassPos = '';
-
-	$.moveHeader = function(moveAbove) {
-		// if title and subtitle is placed as overlay of the header image, 
-		// move this above the header image
-		var headerImage = $('#site-header-container-overlay');
-		if (! headerImage.length) {
-			return false;
-		}
-
-		if (azbalacHeaderImageClassPos == '' ) { // only check once when page is loaded
-			if (headerImage.hasClass('fixed-top')) { // store for later usage
-				azbalacHeaderImageClassPos = 'fixed-top';
-				
-			} else if (headerImage.hasClass('fixed-bottom')) {
-				azbalacHeaderImageClassPos = 'fixed-bottom';
-			}
-		}
-		if (moveAbove == true) {
-
-			headerImage.appendTo($('#site-header-container-above')).removeClass('position-absolute');
-		
-			headerImage.removeClass(azbalacHeaderImageClassPos);
-			$('#site-header-container-overlay').addClass('col');
-			if (typeof azbalacSettingHeaderColor != 'undefined' && typeof azbalacSettingHeaderColor.bg != 'undefined') {
-				$('#site-header-box-title').css('background', azbalacSettingHeaderColor.bg);
-				$('#site-header-box-subtitle').css('background', azbalacSettingHeaderColor.bg);
-				$('#site-header-container-overlay').css('left','0px').css('top','0px').css('right', '0px').css('bottom','0px');
-				$('#site-header-text a').css('background', azbalacSettingHeaderColor.bg);
-				$('#site-description').css('background', azbalacSettingHeaderColor.bg);		
-			} 
-		} 
-		else {
-			headerImage.appendTo($('#site-header-above')).addClass('position-absolute');
-			headerImage.addClass(azbalacHeaderImageClassPos);
-			$('#site-header-container-overlay').removeClass('col');
-			if (typeof azbalacSettingHeaderColor != 'undefined' && typeof azbalacSettingHeaderColor.bg != 'undefined') {
-				$('#site-header-box-title').css('background', '');
-				$('#site-header-box-subtitle').css('background', '');
-				$('#site-header-container-overlay').css('left','').css('top','').css('right', '').css('bottom','');
-				
-				$('#site-header-text a').css('background','');
-				$('#site-description').css('background', '');		
-			} 
-		}
-
-
-	}
-
-    $.getHeaderImage = function(index, fallback) {
-        var siteHeaderImage = '';
-        var width = 0;
-        var height = 0;
-        var dontscale = 0;
-        if (typeof azbalacHeaderImage[index].url != 'undefined') {
-            siteHeaderImage = azbalacHeaderImage[index].url;
-            height = azbalacHeaderImage[index].height;
-            width = azbalacHeaderImage[index].width;
-            dontscale = azbalacHeaderImage[index].dontscale;
-        } else if (typeof azbalacHeaderImage[fallback].url != 'undefined') {
-            siteHeaderImage  = azbalacHeaderImage[fallback].url;
-            height = azbalacHeaderImage[fallback].height;
-            width = azbalacHeaderImage[fallback].width;
-            dontscale = azbalacHeaderImage[fallback].dontscale;
-        }
-        return { image: siteHeaderImage,
-            width: width,
-            height: height,
-            dontscale: dontscale};
-	}
-	
-	
-    $.headerImageResize = function(mediaSize) {
-        if (! $('#site-header-image').length) {
-            return false;
-        }
-        var siteHeaderImage =  $('#site-header-image');
-        var width, height;
+  }
+  
 
-		
-        var newWidth = 0, newHeight = 0;
-        var imgData = {};
+    $.checkMoveHeader = function(mediaSize) {
+      if (! $('#site-header-image').length) {
+        return false;
+      }
+      if (typeof azbalacSettingHeaderMoveTitle != 'undefined' && azbalacSettingHeaderMoveTitle == 'true') {
         if (mediaSize == 'xs') {
-            newWidth = $('#main').width() -30; 
-			imgData = $.getHeaderImage(3,0);
-			$.moveHeader(true);
-            //newWidth = 244;
+          $.moveHeader(true);
         } else if (mediaSize == 'sm') {
-            imgData = $.getHeaderImage(2,0);
-			newWidth = 510;
-			$.moveHeader(true);
+          $.moveHeader(true);
         } else if (mediaSize == 'md') {
-            imgData = $.getHeaderImage(1,0);
-			newWidth = 690;
-			$.moveHeader(false);
+          $.moveHeader(false);
         } else if (mediaSize == 'lg') { // lg
-            imgData = $.getHeaderImage(0,0);
-			newWidth = 930;
-			$.moveHeader(false);
-		} else { // xl
-            imgData = $.getHeaderImage(0,0);
-			newWidth = 1110;
-			$.moveHeader(false);
-		}
-		
-		
-        if (imgData.image != '') {
-            $('#site-header-above').show();
-
-
-            siteHeaderImage.attr('src', imgData.image);
-
-            if (imgData.dontscale == 1) {
-                newWidth = imgData.width;
-                newHeight = imgData.height;
-            } else {
-                var ratio = imgData.width / imgData.height;
-                newHeight = Math.round(newWidth / ratio);
-            }
-            siteHeaderImage.attr('width', newWidth);
-            siteHeaderImage.attr('height', newHeight);
-            siteHeaderImage.attr('data-width', newWidth);
-            siteHeaderImage.attr('data-height', newHeight);
-
-
-        } else {
-
-                $('#site-header-above').hide();
-
+          $.moveHeader(false);
+        } else { // xl
+          $.moveHeader(false);
         }
+      }
     };
-
+  
+    
     $.checkMediaSize = function( ) {
-		var elementSize = $('#media-width-detection-element').width();
-		if (elementSize < 540) {
-			mediaDetectSize = 'xs';
-		} else if (elementSize >= 540 && elementSize < 720) { 
-            mediaDetectSize = 'sm';
-        } else if (elementSize >= 720 && elementSize < 960) { 
-            mediaDetectSize = 'md';
-        } else if (elementSize >= 960 && elementSize < 1140) { 
-            mediaDetectSize = 'lg';
-        } else { // >= 1200
-            mediaDetectSize = 'xl';
-		}
-        if (mediaDetectSize != mediaSize || mediaDetectSize == 'xs') {
-            mediaSize = mediaDetectSize;
-            $.headerImageResize(mediaSize);
-		}
-
+      var elementSize = $('#media-width-detection-element').width();
+      if (elementSize < 540) {
+        mediaDetectSize = 'xs';
+      } else if (elementSize >= 540 && elementSize < 720) { 
+        mediaDetectSize = 'sm';
+      } else if (elementSize >= 720 && elementSize < 960) { 
+        mediaDetectSize = 'md';
+      } else if (elementSize >= 960 && elementSize < 1140) { 
+        mediaDetectSize = 'lg';
+      } else { // >= 1200
+        mediaDetectSize = 'xl';
+      }
+      
+      if (mediaDetectSize != mediaSize || mediaDetectSize == 'xs') {
+        mediaSize = mediaDetectSize;
+      
+        $.checkMoveHeader(mediaSize);
+      }
+  
     };
-	
+  
+  
 
     $( window).resize(function () {
         if (! $('#site-header-image').length) {
@@ -172,24 +113,24 @@
     });
 
 
-	
-	$( function() {
-		// Search toggle.
-		$( '.search-toggle' ).on( 'click.azbalac', function( event ) {
-			var that    = $( this ),
-				wrapper = $( '.search-box-wrapper' );
+  
+  $( function() {
+    // Search toggle.
+    $( '.search-toggle' ).on( 'click.azbalac', function( event ) {
+      var that    = $( this ),
+        wrapper = $( '.search-box-wrapper' );
 
-			that.toggleClass( 'active' );
-			wrapper.toggleClass( 'hide' );
+      that.toggleClass( 'active' );
+      wrapper.toggleClass( 'hide' );
 
-			if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
-				wrapper.find( '.search-field' ).focus();
-			}
-		} );
+      if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
+        wrapper.find( '.search-field' ).focus();
+      }
+    } );
 
 
 
-	} );
+  } );
 
     $(window).on('load', function() {
 
@@ -197,9 +138,9 @@
             return;
         }
         $.checkMediaSize();
-	});
+  });
 
-	
+  
 
 $( ".innersocial" ).hover(
   function() {
@@ -216,43 +157,43 @@ $( ".innersocial" ).hover(
   see https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar */
 
 $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
-	var $el = $( this );
-	var $parent = $( this ).offsetParent( ".dropdown-menu" );
-	if ( !$( this ).next().hasClass( 'show' ) ) {
-		$( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
-	}
-	var $subMenu = $( this ).next( ".dropdown-menu" );
-	$subMenu.toggleClass( 'show' );
-	
-	$( this ).parent( "li" ).toggleClass( 'show' );
-
-	$( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
-		$( '.dropdown-menu .show' ).removeClass( "show" );
-	} );
-	
-	 if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
-		$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
-	}
+  var $el = $( this );
+  var $parent = $( this ).offsetParent( ".dropdown-menu" );
+  if ( !$( this ).next().hasClass( 'show' ) ) {
+    $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
+  }
+  var $subMenu = $( this ).next( ".dropdown-menu" );
+  $subMenu.toggleClass( 'show' );
+  
+  $( this ).parent( "li" ).toggleClass( 'show' );
+
+  $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
+    $( '.dropdown-menu .show' ).removeClass( "show" );
+  } );
+  
+   if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
+    $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
+  }
 
-	return false;
+  return false;
 } );
 
-
+/*
 $(window).on('load', function() {
 var elementSize = $('#main').width();
 if (elementSize < 540) {
-	mediaDetectSize = 'xs';
+  mediaDetectSize = 'xs';
 } else if (elementSize >= 540 && elementSize < 720) { 
-	mediaDetectSize = 'sm';
+  mediaDetectSize = 'sm';
 } else if (elementSize >= 720 && elementSize < 960) { 
-	mediaDetectSize = 'md';
+  mediaDetectSize = 'md';
 } else if (elementSize >= 960 && elementSize < 1140) { 
-	mediaDetectSize = 'lg';
+  mediaDetectSize = 'lg';
 } else { // >= 1200
-	mediaDetectSize = 'xl';
+  mediaDetectSize = 'xl';
 }
 });
-
+*/
  
 } )( jQuery );