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

This commit is contained in:
Alaguraj0361 2025-08-14 16:31:37 +05:30
parent 2d3d95bbee
commit e92b31fd23
4 changed files with 20 additions and 12 deletions

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -1,12 +1,14 @@
// page-title // page-title
.wpo-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; min-height: 350px;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
z-index: 1; z-index: 1;
background-repeat: no-repeat;
object-fit:cover ;
@media(max-width: 767px) { @media(max-width: 767px) {
min-height: 250px; min-height: 250px;