Merge pull request #115 from divinerites/use-lozad-for-all-webp-img

Use "class=lozad" also for more images (except portfolio)

layouts/_default/article.html

@@ -10,4 +10,4 @@
       <a class="btn btn-transparent" href="{{ .Permalink }}">{{ i18n "readMore" }}</a>
     </div>
   </div>
-</article>
+</article>

layouts/_default/single.html

@@ -11,7 +11,7 @@
           <li class="list-inline-item"><a href="{{ `author/` | relLangURL }}{{ .Params.Author | urlize }}/">{{ .Params.Author }}</a></li>
           <li class="list-inline-item">{{ dateFormat "Monday, Jan 2, 2006" .Date }}</li>
         </ul>
-        <img class="img-fluid mb-50" src="{{ .Params.Image | absURL }}" alt="blog-image">
+        <img class="img-fluid mb-50 lozad" data-src="{{ .Params.Image | absURL }}" alt="blog-image">
       </div>
       <div class="col-lg-8 offset-lg-2">
         <div class="post-single-content">

layouts/author/single.html

@@ -14,10 +14,10 @@
 				<div class="content text-center">
 					<figure>
 						{{ if .Params.Image }}
-						<img class="rounded-circle img-fluid" src="{{.Params.Image | relURL }}">
+						<img class="rounded-circle img-fluid lozad" data-src="{{.Params.Image | relURL }}">
 						{{else if .Params.Email}}
-						<img class="rounded-circle img-fluid"
-							src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
+						<img class="rounded-circle img-fluid lozad"
+							data-src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
 						{{ end }}
 						<figcaption>
 							<h5 class="font-weight-bold">

layouts/partials/banner.html

@@ -5,7 +5,7 @@
 {{"<!-- Welcome Slider-->" | safeHTML}}
 <section class="hero-area" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 
 	<div class="block">
 		{{ if .icon }}

layouts/partials/cta.html

@@ -5,7 +5,7 @@
 {{"<!-- Start Call To Action -->" | safeHTML}}
 <section id="cta" class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-12 text-center">

layouts/partials/feature.html

@@ -7,8 +7,8 @@
 	<div class="container-fluid">
 		<div class="row">
 			<div class="col-lg-6 padding-0" style="background-image: url('{{ .image_webp | absURL }}'); background-size: cover; background-position: top center; background-repeat: no-repeat; min-height: 400px;">
-			<!-- this image is for trigger this section fallback background image -->
-			<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .image | absURL }})'" src="{{ .image_webp | absURL }}" />
+				<!-- this image is for trigger this section fallback background image -->
+				<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .image | absURL }})'" data-src="{{ .image_webp | absURL }}" />
 			</div>
 			<div class="col-lg-6">
 				<div class="content-block">

layouts/partials/funfacts.html

@@ -5,7 +5,7 @@
 {{"<!-- Start Counter Section -->" | safeHTML}}
 <section id="counter" class="parallax-section bg-1 section overly" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row justify-content-center">
 			{{ range .counter_item }}

layouts/partials/navigation.html

@@ -1,9 +1,9 @@
 <section class="sticky-top navigation">
 	<div class="container">
 		<nav class="navbar navbar-expand-lg navbar-dark">
-			<a class="navbar-brand p-0" href="{{ site.BaseURL | relLangURL }}">
+			<a class="navbar-brand p-0" href="{{ .Site.BaseURL | relLangURL }}">
 				{{ if site.Params.logo }}
-				<img class="img-fluid" src="{{ site.Params.logo | absURL }}" alt="{{ site.Title }}">
+				<img class="lozad img-fluid" data-src="{{ site.Params.logo | absURL }}" alt="{{ .Site.Title }}">
 				{{ else }}
 				{{ site.Title }}
 				{{ end }}
@@ -29,7 +29,6 @@
 					{{ end }}
 					{{ end }}
 
-
 					{{ range site.Menus.static }}
 					<li class="nav-item"><a class="nav-link" target="_blank" href="{{ .URL }}">{{ i18n .Name }}</a>
 					</li>

layouts/partials/skill.html

@@ -21,7 +21,7 @@
 				<h2>{{ .subtitle | markdownify }}</h2>
 				<p> {{ .content | markdownify }}</p>
 				{{ with .image }}
-				<img class="img-fluid" src="{{ . | absURL }}" alt="image">
+				<img class="img-fluid lozad" data-src="{{ . | absURL }}" alt="image">
 				{{ end }}
 			</div>
 			<div class="col-lg-6">

layouts/partials/testimonial.html

@@ -6,7 +6,7 @@
 <section id="testimonial" class="testimonial overly section bg-2"
 	style='background-image: url("{{ .bg_image_webp | absURL }}")'>
 	<!-- this image is for trigger this section fallback background image -->
-	<img style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" src="{{ .bg_image_webp | absURL }}" />
+	<img class="lozad" style="display: none;" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'" data-src="{{ .bg_image_webp | absURL }}" />
 	<div class="container">
 		<div class="row">
 			<div class="col-xl-12">