inner pages banner updated for dynamic format blog page banner image updated

components/pagetitle/PageTitle.js

@@ -3,13 +3,18 @@ import Link from 'next/link'
 
 const PageTitle = (props) => {
     return (
-        <section className="wpo-page-title">
+        <section
+            className="wpo-page-title"
+            style={{
+                backgroundImage: `url(${props?.backgroundImage?.src || props?.backgroundImage})`,
+            }}
+        >
             <div className="container">
                 <div className="row">
                     <div className="col col-xs-12">
                         <div className="wpo-breadcumb-wrap">
                             <h2>{props.pageTitle}</h2>
-                            <ol className="wpo-breadcumb-wrap">
+                            <ol className="wpo-breadcumb">
                                 <li><Link href="/home">Home</Link></li>
                                 <li><span>{props.pagesub}</span></li>
                             </ol>
@@ -21,4 +26,4 @@ const PageTitle = (props) => {
     )
 }
 
-export default PageTitle;
+export default PageTitle

pages/blog/index.js

@@ -1,18 +1,19 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import PageTitle from '../../components/pagetitle/PageTitle'
 import BlogList from '../../components/BlogList/BlogList.js'
 import Navbar2 from '../../components/Navbar2/Navbar2';
 import Footer from '../../components/footer/Footer';
 import Scrollbar from '../../components/scrollbar/scrollbar'
+import bg from '/public/images/blog/blog-banner.webp'
 
-const BlogPage =() => {
-    return(
+const BlogPage = () => {
+    return (
         <Fragment>
-            <Navbar2/>
-            <PageTitle pageTitle={'Blog'} pagesub={'Blog'}/> 
-            <BlogList/>
-            <Footer/>
-            <Scrollbar/>
+            <Navbar2 />
+            <PageTitle pageTitle={'Blog'} backgroundImage={bg} pagesub={'Blog'} />
+            <BlogList />
+            <Footer />
+            <Scrollbar />
         </Fragment>
     )
 };

styles/sass/components/_page-title.scss

@@ -1,12 +1,14 @@
 // page-title
 .wpo-page-title {
-	background: url(/images/page-title.jpg) no-repeat center top / cover;
+	// background: url(/images/page-title.jpg) no-repeat center top / cover;
 	min-height: 350px;
 	position: relative;
 	display: flex;
 	justify-content: center;
 	flex-direction: column;
 	z-index: 1;
+	background-repeat: no-repeat;
+	object-fit:cover ;
 
 	@media(max-width: 767px) {
 		min-height: 250px;