swap images for main pages

[geografa]

keep each page banner interesting. let's swap these out. prob need to adjust the yml and layouts and then put images in a common folder

• home
• about
• contact
• resources

[rhewitt22]

Something like choosing a random photo from a new directory: /images/header/*.png?

[mapsam]

You'd be able to specify this in the YAML with a tag like:

---
header_image: something-awesome.jpg
---

and grab it in the page layout with:

<img src="/img/header/{{ page.header-image }}">

[rhewitt22]

@svmatthews @geografa

The background image is defined in the global css file (along with background-size: cover), so there is no way to access page variables.

In order to implement this we'd need to define the image as an <img /> in the template. This would prevent us from having a pre-defined image height; as the window grows in size so too would the image, which would push content down the page.

[mapsam]

What if you added an image inline for the <div class="main col12 contain dark"> portion. That would scale similarly without adding height.

<div class="main col12 contain dark" style="background-image:url({{ page.header-image }});">

And some styles to make sure the background image works properly

.main {
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
}

[mapsam]

You could also specify a default background image if one doesn't exist:

<div class="main col12 contain dark" style="background-image:url({% if page.header-image %}{{ page.header-image }}{% else %}DEFAULT_IMG.jpg{% endif %});">

[rhewitt22]

@svmatthews What CSS framework is this?

[mapsam]

What I mentioned above is framework independent. But the main col12 contain dark classes in that div are from this file. Unsure of what framework that is.

[rhewitt22]

Right, I get that, I'm just not sure if all of these presentational classes
are coming from a framework that has them documented somewhere.

On Mon, May 11, 2015 at 1:57 PM, Sam Matthews notifications@github.com
wrote:

What i mentioned above is framework independent. But the main col12
contain dark classes in that div are from this file
https://github.com/maptime/maptime.github.io/blob/master/_includes/css/base.css.
Unsure of what framework that is.

—
Reply to this email directly or view it on GitHub
#55 (comment)
.

[geografa]

Not a framework, just based on https://www.mapbox.com/base/

[mapsam]

Mystery solved 🔍! @rhewitt22 this functionality definitely requires a little rewriting of how the header is structured. I'd be happy to work on this one if you'd like.

[mapsam]

@geografa I'm going to pretend I didn't see this "Feel free to find inspiration in the source code. Just don't use it directly." 😉

[rhewitt22]

Right now everything is hard coded into header.html. It seems like if we're going to pull out the background image then we should do the same with header title and intro text, and the introduction of defaults for when a new page is added.