RichNSD commented 1 year ago

Summary

The only full-width 'hero' image that loads correctly right now is on the Homepage, which is still the original file that came with the template:

~/pages/pages-root-folder/index.md

All other pages in the ~/pages folder build, but the space where the header image goes is currently empty.

Details

Item	URL
GitHub Repository	https://github.com/NewSpectrum/Technovine-Site
GH-Pages Host	https://site.technovinesolutions.com/

The repository is public so if you need to see anything from the files you can check them out there.

Configuration Settings

Config Summary

Filtered information from the _config.yml

# Site Settings
title: 'Technovine Solutions'
description: 'IT Solutions.'

author: RichNSD

url: 'https://site.technovinesolutions.com'
baseurl: '/'

improve_content: https://github.com/NewSpectrum/Technovine-Site/edit/gh-pages

urlimg: 'https://site.technovinesolutions.com/images/'

logo: "Fulll Logo (Site) [F].png"

plugins:
    - jekyll-asciidoc
    - jekyll-gist
    - jekyll-paginate

# Defaults
defaults:
  -
    scope:
      path: ''
      type: 'pages'
    values:
      show_meta: false
      sidebar: left
      comments: false
      author: RichNSD
  -
    scope:
      path: ''
      type: 'posts'
    values:
      show_meta: true
      sidebar: left
      comments: false
      author: PatriotsForLife

Frontmatter

The YAML frontmatter from the About page

Source: about.md

layout: page
permalink: /about

title: "About"
subheadline: ""

header: yes
header:
    image_fullwidth: yes
    image: "about-002.jpeg"
    color: # "hsla(0, 0%, 10%, 1.0)" (text)
    background-color: "hsla(43, 100%, 100%, 1.0)"
    title: # "Title Text"

sidebar: left
meta_title: # Enter later
meta_description: # "Page Description"
tags:
  - 

homepage: false

Let me know if you need any other information.

TWiStErRob commented 1 year ago

I think the "yes" is the problem, compare https://github.com/Phlow/feeling-responsive/blob/gh-pages/_posts/design/2014-08-19-page-fullwidth.md?plain=1 and https://github.com/NewSpectrum/Technovine-Site/blob/gh-pages/pages/contact.md?plain=1#LL11C4-L11C20

Also see what you're missing (image URL):

The header is defined at: https://github.com/Phlow/feeling-responsive/blob/6b298e4a7a32eb411f7d8b976737539389ba04ec/_includes/_masthead.html#L49-L63

and filled with an image at: https://github.com/Phlow/feeling-responsive/blob/6b298e4a7a32eb411f7d8b976737539389ba04ec/_includes/_footer_scripts.html#L11-L16

The key here is that {% elsif page.header.image_fullwidth %} doesn't check for a boolean, but it checks for page.header.image_fullwidth != NULL. In most cases in programming there's no need to have a flag saying "true" and another field for the actual data.

RichNSD commented 1 year ago

I think the "yes" is the problem - @TWiStErRob

Wonderful, you were right. :sunglasses:

Thanks for your help!

To Clarify the Issue & Solution

Original Frontmatter:

https://github.com/Phlow/feeling-responsive/blob/ce04d116874b936045f0b35d11285586e22ffefa/pages/about.md#L2-L22

Incorrect Code:

header:
  - image_fullwidth: yes

Correct Frontmatter Syntax:

header:
  - image_fullwidth: # Image Filename

Phlow / feeling-responsive

Header Images not loading #252