soames-gatsby-theme 0.1.8 → 0.1.9

package/dist/src/components/HeroHeader.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const HeroHeader = ({ title, subhead, backgroundImage, backgroundImageTitle, overlayOpacity, }) => {
+const HeroHeader = ({ title, subhead, backgroundImage, overlayOpacity, }) => {
     if (!backgroundImage) {
         backgroundImage = "https://picsum.photos/1080/720";
     }
-    else {
-        if (backgroundImageTitle?.includes("_02o_"))
-            overlayOpacity = 0.2;
-        else if (backgroundImageTitle?.includes("_03o_"))
-            overlayOpacity = 0.3;
-        else if (backgroundImageTitle?.includes("_04o_"))
-            overlayOpacity = 0.4;
-        else if (backgroundImageTitle?.includes("_05o_"))
-            overlayOpacity = 0.5;
-        else if (backgroundImageTitle?.includes("_06o_"))
-            overlayOpacity = 0.6;
-        else if (backgroundImageTitle?.includes("_07o_"))
-            overlayOpacity = 0.7;
-    }
     if (!overlayOpacity) {
         overlayOpacity = 0.6;
     }

package/dist/src/pages/preview.js

@@ -69,9 +69,9 @@ const PreviewPage = () => {
     const heroBg = isPost
         ? (content.blogHero?.guid ?? null)
         : (content.featuredImage?.sourceUrl ?? null);
-    const heroBgTitle = isPost
-        ? (content.blogHero?.title ?? null)
-        : (content.title ?? null);
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: `Preview: ${content.title ?? ""}` }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: heroTitle, subhead: heroSubhead, backgroundImage: heroBg, backgroundImageTitle: heroBgTitle }), isPost ? ((0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: (0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: content.title ? (0, html_react_parser_1.default)(content.title) : "" }), content.date && (0, jsx_runtime_1.jsx)("p", { children: content.date })] }), content.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(content.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-sidebar-container", className: "soames-gatsby-sidebar", children: [content.featuredImage?.sourceUrl && ((0, jsx_runtime_1.jsx)("img", { src: content.featuredImage.sourceUrl, alt: content.featuredImage.altText || "", style: { marginBottom: 50, width: "100%" } })), (0, jsx_runtime_1.jsx)("h1", { children: "Recent Posts" }), (0, jsx_runtime_1.jsx)(BlogSidebar_1.default, { postId: "" })] }) })] }) })) : (content.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: content.content }) })))] }));
+    const heroOpacityStr = isPost
+        ? (content.blogHero?.overlayOpacity ?? null)
+        : (content.overlayOpacity ?? null);
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: `Preview: ${content.title ?? ""}` }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: heroTitle, subhead: heroSubhead, backgroundImage: heroBg, overlayOpacity: heroOpacityStr ? parseFloat(heroOpacityStr) : undefined }), isPost ? ((0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: (0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: content.title ? (0, html_react_parser_1.default)(content.title) : "" }), content.date && (0, jsx_runtime_1.jsx)("p", { children: content.date })] }), content.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(content.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-sidebar-container", className: "soames-gatsby-sidebar", children: [content.featuredImage?.sourceUrl && ((0, jsx_runtime_1.jsx)("img", { src: content.featuredImage.sourceUrl, alt: content.featuredImage.altText || "", style: { marginBottom: 50, width: "100%" } })), (0, jsx_runtime_1.jsx)("h1", { children: "Recent Posts" }), (0, jsx_runtime_1.jsx)(BlogSidebar_1.default, { postId: "" })] }) })] }) })) : (content.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: content.content }) })))] }));
 };
 exports.default = PreviewPage;

package/dist/src/templates/blog-post-archive.js

@@ -15,7 +15,7 @@ const BlogIndex = ({ data, pageContext }) => {
     const archive = data.wpPage;
     const { nextPagePath, previousPagePath } = pageContext;
     if (!posts.length) {
-        return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, backgroundImageTitle: archive.featuredImage?.node.title || null }), (0, jsx_runtime_1.jsx)("p", { children: "No blog posts found. Add posts to your WordPress site and they'll appear here!" })] }));
+        return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, overlayOpacity: archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined }), (0, jsx_runtime_1.jsx)("p", { children: "No blog posts found. Add posts to your WordPress site and they'll appear here!" })] }));
     }
     const groupedPosts = posts.reduce((groups, post, index) => {
         if (index % 3 === 0) {
@@ -26,7 +26,7 @@ const BlogIndex = ({ data, pageContext }) => {
         }
         return groups;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { isHomePage: true, children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, backgroundImageTitle: archive.featuredImage?.node.title || null }), (0, jsx_runtime_1.jsx)("section", { className: "soames-blog-roll", children: (0, jsx_runtime_1.jsx)("div", { className: "container", children: groupedPosts.map((group, index) => ((0, jsx_runtime_1.jsx)("div", { className: "media-container-row", children: group.map((post, idx) => ((0, jsx_runtime_1.jsx)("div", { className: "card p-3 col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-box", children: [(0, jsx_runtime_1.jsx)("h4", { className: "card-title mbr-fonts-style display-5", children: (0, html_react_parser_1.default)(post.title) }), (0, jsx_runtime_1.jsx)("h4", { className: "mbr-fonts-style display-7", children: post.date }), (0, html_react_parser_1.default)(post.excerpt)] }), (0, jsx_runtime_1.jsx)("div", { className: "mbr-section-btn text-center", children: (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${post.uri}`, itemProp: "url", className: "btn btn-primary display-4", children: (0, jsx_runtime_1.jsx)("span", { itemProp: "headline", children: "Read More" }) }) })] }) }, idx))) }, index))) }) }), (0, jsx_runtime_1.jsxs)("section", { children: [previousPagePath && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${previousPagePath}`, children: "Previous page" }), (0, jsx_runtime_1.jsx)("br", {})] })), nextPagePath && (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${nextPagePath}`, children: "Next page" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { isHomePage: true, children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, overlayOpacity: archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined }), (0, jsx_runtime_1.jsx)("section", { className: "soames-blog-roll", children: (0, jsx_runtime_1.jsx)("div", { className: "container", children: groupedPosts.map((group, index) => ((0, jsx_runtime_1.jsx)("div", { className: "media-container-row", children: group.map((post, idx) => ((0, jsx_runtime_1.jsx)("div", { className: "card p-3 col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-box", children: [(0, jsx_runtime_1.jsx)("h4", { className: "card-title mbr-fonts-style display-5", children: (0, html_react_parser_1.default)(post.title) }), (0, jsx_runtime_1.jsx)("h4", { className: "mbr-fonts-style display-7", children: post.date }), (0, html_react_parser_1.default)(post.excerpt)] }), (0, jsx_runtime_1.jsx)("div", { className: "mbr-section-btn text-center", children: (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${post.uri}`, itemProp: "url", className: "btn btn-primary display-4", children: (0, jsx_runtime_1.jsx)("span", { itemProp: "headline", children: "Read More" }) }) })] }) }, idx))) }, index))) }) }), (0, jsx_runtime_1.jsxs)("section", { children: [previousPagePath && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${previousPagePath}`, children: "Previous page" }), (0, jsx_runtime_1.jsx)("br", {})] })), nextPagePath && (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${nextPagePath}`, children: "Next page" })] })] }));
 };
 exports.default = BlogIndex;
 exports.pageQuery = (0, gatsby_1.graphql) `
@@ -48,10 +48,10 @@ exports.pageQuery = (0, gatsby_1.graphql) `
     wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid
-          title
         }
       }
     }

package/dist/src/templates/blog-post.js

@@ -18,7 +18,7 @@ const BlogPostTemplate = ({ data }) => {
     const { post, previous, next, page } = data;
     const featuredImageData = post.featuredImage?.node?.gatsbyImage ?? null;
     const featuredImageAlt = post.featuredImage?.node?.altText || "Featured image";
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: post.title || "", description: post.excerpt || undefined }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: page?.title ? (0, html_react_parser_1.default)(page.title) : "Blog", subhead: page?.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page?.featuredImage?.node?.guid || null, backgroundImageTitle: page?.title || null }), (0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: [(0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: post.title ? (0, html_react_parser_1.default)(post.title) : "" }), (0, jsx_runtime_1.jsx)("p", { children: post.date })] }), post.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(post.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "blog-post-nav", children: (0, jsx_runtime_1.jsxs)("ul", { style: {
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: post.title || "", description: post.excerpt || undefined }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: page?.title ? (0, html_react_parser_1.default)(page.title) : "Blog", subhead: page?.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page?.featuredImage?.node?.guid || null, overlayOpacity: page?.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined }), (0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: [(0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: post.title ? (0, html_react_parser_1.default)(post.title) : "" }), (0, jsx_runtime_1.jsx)("p", { children: post.date })] }), post.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(post.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "blog-post-nav", children: (0, jsx_runtime_1.jsxs)("ul", { style: {
                                                 display: `flex`,
                                                 flexWrap: `wrap`,
                                                 justifyContent: `space-between`,
@@ -57,6 +57,7 @@ exports.pageQuery = (0, gatsby_1.graphql) `
     page: wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid

package/dist/src/templates/page.js

@@ -13,7 +13,7 @@ const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
 const Shortcodes_1 = require("../utils/shortcodes/Shortcodes");
 // Gutenberg block styles
 require("../styles/vendor/wordpress-blocks.css");
-const Page = ({ data: { page } }) => ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: page.title }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: (0, html_react_parser_1.default)(page.title), subhead: page.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page.featuredImage?.node.guid || null, backgroundImageTitle: page.featuredImage?.node.title || null }), page.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: page.content }) }))] }));
+const Page = ({ data: { page } }) => ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: page.title }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: (0, html_react_parser_1.default)(page.title), subhead: page.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page.featuredImage?.node.guid || null, overlayOpacity: page.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined }), page.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: page.content }) }))] }));
 exports.default = Page;
 exports.pageQuery = (0, gatsby_1.graphql) `
   query PageById($id: String!) {
@@ -22,9 +22,9 @@ exports.pageQuery = (0, gatsby_1.graphql) `
       title
       excerpt
       content
+      overlayOpacity
       featuredImage {
         node {
-          title
           guid
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soames-gatsby-theme",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A customizable Gatsby theme for personal websites using WordPress as a headless CMS.",
   "main": "dist/gatsby-config.js",
   "scripts": {

package/src/components/HeroHeader.tsx

@@ -4,7 +4,6 @@ export interface HeroHeaderProps {
   title: React.ReactNode;
   subhead?: React.ReactNode;
   backgroundImage?: string | null;
-  backgroundImageTitle?: string | null;
   overlayOpacity?: number;
 }
 
@@ -12,18 +11,10 @@ const HeroHeader = ({
   title,
   subhead,
   backgroundImage,
-  backgroundImageTitle,
   overlayOpacity,
 }: HeroHeaderProps) => {
   if (!backgroundImage) {
     backgroundImage = "https://picsum.photos/1080/720";
-  } else {
-    if (backgroundImageTitle?.includes("_02o_")) overlayOpacity = 0.2;
-    else if (backgroundImageTitle?.includes("_03o_")) overlayOpacity = 0.3;
-    else if (backgroundImageTitle?.includes("_04o_")) overlayOpacity = 0.4;
-    else if (backgroundImageTitle?.includes("_05o_")) overlayOpacity = 0.5;
-    else if (backgroundImageTitle?.includes("_06o_")) overlayOpacity = 0.6;
-    else if (backgroundImageTitle?.includes("_07o_")) overlayOpacity = 0.7;
   }
 
   if (!overlayOpacity) {

package/src/pages/preview.tsx

@@ -17,6 +17,7 @@ interface BlogHero {
   title?: string | null;
   excerpt?: string | null;
   guid?: string | null;
+  overlayOpacity?: string | null;
 }
 
 interface PreviewContent {
@@ -25,6 +26,7 @@ interface PreviewContent {
   content?: string;
   excerpt?: string;
   date?: string;
+  overlayOpacity?: string | null;
   featuredImage?: FeaturedImage | null;
   blogHero?: BlogHero | null;
 }
@@ -109,9 +111,9 @@ const PreviewPage: React.FC = () => {
   const heroBg = isPost
     ? (content.blogHero?.guid ?? null)
     : (content.featuredImage?.sourceUrl ?? null);
-  const heroBgTitle = isPost
-    ? (content.blogHero?.title ?? null)
-    : (content.title ?? null);
+  const heroOpacityStr = isPost
+    ? (content.blogHero?.overlayOpacity ?? null)
+    : (content.overlayOpacity ?? null);
 
   return (
     <Layout>
@@ -120,7 +122,7 @@ const PreviewPage: React.FC = () => {
         title={heroTitle}
         subhead={heroSubhead}
         backgroundImage={heroBg}
-        backgroundImageTitle={heroBgTitle}
+        overlayOpacity={heroOpacityStr ? parseFloat(heroOpacityStr) : undefined}
       />
       {isPost ? (
         <section>

package/src/templates/blog-post-archive.tsx

@@ -22,10 +22,10 @@ interface PostNode {
 interface ArchivePage {
   title: string;
   excerpt: string;
+  overlayOpacity?: string | null;
   featuredImage?: {
     node: {
       guid: string;
-      title: string;
     };
   };
 }
@@ -53,7 +53,7 @@ const BlogIndex: React.FC<BlogPostArchiveProps> = ({ data, pageContext }) => {
           title={archive.title ? parse(archive.title) : "Blog"}
           subhead={archive.excerpt ? parse(archive.excerpt) : ""}
           backgroundImage={archive.featuredImage?.node.guid || null}
-          backgroundImageTitle={archive.featuredImage?.node.title || null}
+          overlayOpacity={archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined}
         />
         <p>
           No blog posts found. Add posts to your WordPress site and they'll appear here!
@@ -78,7 +78,7 @@ const BlogIndex: React.FC<BlogPostArchiveProps> = ({ data, pageContext }) => {
         title={archive.title ? parse(archive.title) : "Blog"}
         subhead={archive.excerpt ? parse(archive.excerpt) : ""}
         backgroundImage={archive.featuredImage?.node.guid || null}
-        backgroundImageTitle={archive.featuredImage?.node.title || null}
+        overlayOpacity={archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined}
       />
 
       <section className="soames-blog-roll">
@@ -156,10 +156,10 @@ export const pageQuery = graphql`
     wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid
-          title
         }
       }
     }

package/src/templates/blog-post.tsx

@@ -32,6 +32,7 @@ interface Post {
 interface Page {
   title?: string | null;
   excerpt?: string | null;
+  overlayOpacity?: string | null;
   featuredImage?: {
     node: {
       guid?: string | null;
@@ -66,7 +67,7 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({ data }) => {
         title={page?.title ? parse(page.title) : "Blog"}
         subhead={page?.excerpt ? parse(page.excerpt) : ""}
         backgroundImage={page?.featuredImage?.node?.guid || null}
-        backgroundImageTitle={page?.title || null}
+        overlayOpacity={page?.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined}
       />
       <section>
         <div className="media-container-row">
@@ -173,6 +174,7 @@ export const pageQuery = graphql`
     page: wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid

package/src/templates/page.tsx

@@ -16,9 +16,9 @@ type PageTemplateProps = PageProps<{
     title: string;
     excerpt?: string;
     content?: string;
+    overlayOpacity?: string | null;
     featuredImage?: {
       node: {
-        title: string;
         guid: string;
       };
     };
@@ -32,7 +32,7 @@ const Page: React.FC<PageTemplateProps> = ({ data: { page } }) => (
       title={parse(page.title)}
       subhead={page.excerpt ? parse(page.excerpt) : ""}
       backgroundImage={page.featuredImage?.node.guid || null}
-      backgroundImageTitle={page.featuredImage?.node.title || null}
+      overlayOpacity={page.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined}
     />
     {page.content && (
       <section
@@ -54,9 +54,9 @@ export const pageQuery = graphql`
       title
       excerpt
       content
+      overlayOpacity
       featuredImage {
         node {
-          title
           guid
         }
       }